Things you need

• sansserifexbflfcond Font

Step 1

Create a new document width:1000px x height:631px background #000000

Step 2

Select the type tool font:sansserifexbflfcond(medium), size:200px, color:#ff9700, smooth. Now select the Character Panel or go to Window>>Character and change the text Tracking to -60(Text tracking goes from left to right). Then write a word that you would like to use. I’ve chosen Webdevtuts.

Double click on the text layer or right click>>blending options. Select color overlay and change the color to #1b1b1b. Then select stroke, size: 1, position: outside, blend mode:normal, opacity:100, fill type:color, color; #b4b4b4

Step 3

Duplicate the text layer then right click>>blending options. Now click on gradient options. blendmodenormal, opacity:100, Gradient(Double click on the gradient bar, left color:#adadad, right color:#ffffff), style:linear, angle:90, scale:100

Step 4

Select the rounded rectangle tool color:#5f5f5f then draw a circle under your typography.

Then go to Filter>>blur>>Guassian blur 90px.

Step 5

Select the rounded rectangle tool color:#151515 and draw a rectangle under your text(Make sure it goes into the black on both sides). Then go to Filter>>blur>>Guassian blur 5px.

Step 6

Duplicate the text layer then create a new group then add the text layer to the group. Right click on the group>>merge group. Go to Edit>>transform>>Flip Vertical. Then drag the vertical text downward until its under the original text.

Now select the rounded blur eraser tool and erase the bottom text until you have that reflection look. Might take of couple of tries but you’ll get it.

Step 7

Select the rounded rectangle tool color: #ffffff, and create a circle on top of your text leaving some of the bottom area untouched.

Now change the layer opacity to 10%.

Step 8

Select the custom shape tool>>Triangle and create a triangle over the text. Try to have it so the triangle is within the glow with just did in the previous step.

Now go to filter>>blur>>Guassian blur. Set the blur to 80. Then change the layer opacity to 80. You’re now done and should have a nice elegant glass looking text typography.

Things You Need

• Airstream Font

Step 1

Create a new document 1000px x 72px. Background color:#0096ff.

Step 2

Select the blur brush tool color:#61beff and create a circle blur above our background layer. You should have glow look if done correctly.

Step 3

Select the type tool size:200px, Text:Airstream, color:#ffffff, and create the word Eclipse. Then go to Window>>Character and change to settings below.

Step 4

Duplicate the text layer and change the color to #000000. Then move text downward left to give it that eclipse look.

Step 5

Now this is where the neatness comes in or shall I say the great effect of out logo. Select the black text layer and change the color from black to #61beff. Text should now blend in with background.

Step 6

Select the type tool size:30px, Text:Airstream, color:#fff, and create the word Solar. Then add the word to the top upper left of the Eclipse text.

Step 7

Select the rounded rectangle tool color:#fffff and create a circle.

Duplicate the layer and change the circle color to #61beff. Move it down leftward. Click image below to enlarge!

You are now done! I know this tutorial was quite simple but you should have an basic understanding of how creating a logo.

Beyond This tutorial

If you would like there are many things you could do with this logo or any logo you create. I just change the backgrounds and dropped the shadow on some but there were a ton of other things I could of done with this. So be creative and don’t just settle for your first idea.

Things you will need

• Brain
• Old paper
• AvantGarde-Demi font

Step 1

Create new document 1200px x 800px 72dpi. Background Color #efdcb4

Step 2

Now import or drag the old paper image onto your photoshop canvas.

Now go to Filter>>Lighting effect>> Style: soft omni, Light type:Omni,intensity:39, Gloss:-41, Material:-36, Exposure:-8, Ambience:-44, and Texture Channel:none.

Repeat 3-4 times.

Step 3

Select the type tool font: AvantGarde-Demi, Size:150px, Smooth, color:#4d1a1b and create the word one.

Step 4

Select the type tool again Size:220px, color:#2b2b2b and create the word Mind. After you have created the word Mind make sure the M connects to E using the move tool. Zoom in if needed.

Step 5

Select the type tool Size:35px, color:#ffffff, opacity:50%, and create the word to. Place word right below mind.

Step 6

Select the type tool Size:150px, color:#2b2b2b, and create the word Create. Place word to left under the word to(Hope that was not confusing).

Step 7

Select the type tool Size:200px, color:#381414, and create the word Designs. Place word to bottom right of canvas.

Step 8

Select the rectangle tool Color:#4d1a1b, and create a rectangle from the O in ONE to the top of the canvas.

Step 9

Select the rectangle tool color:#2b2b2b, and create a rectangle from the D in Mind to the right of the canvas.

Right click on rectangle layer>>blending options>>gradient overlay. blendmode:normal, opacity:100, Style:linear,
Angle:0, and Scale:100%.

Double click on graident bar. Left color:#2b2b2b, Right color:#191919.

Step 10

Select the rectangle tool color:#381414, and create a rectangle from the D in Designs to the left of the canvas.

Right click on rectangle layer>>blending options>>gradient overlay. blendmode:normal, opacity:100, Style:linear,
Angle:0, and Scale:100%.

Double click on graident bar. Left color:#2b2b2b, Right color:#191919 then press ok.

Step 11

Now we’re going to create multiple words. Select the type tool font: AvantGarde-Demi, Size:35px, Smooth, color:#4d1a1b, opacity50% and create the following words. Thought, Graphic, and Astonishing. Place words similar to image below.

Step 12

Select the vertical type tool(Hold down right click to see vertical option) font: AvantGarde-Demi, Size:20px, Smooth, color:#fff and create the word you.

Right click on the you layer>>blending options>>inner shadow. Blend mode:multiply, Opacity:75%, Angle:120, Distance:0, Choke:0, Size:5.

Then select color overlay and change color to #411718.

Step 13

Select the type tool font: AvantGarde-Demi, Size:35px, Smooth, color:#fff and create the word Control.

Right click on the you layer>>blending options>>inner shadow. Blend mode:multiply, Opacity:75%, Angle:120, Distance:0, Choke:0, Size:5. Then select color overlay and change color to #464242.

Step 14

Select the type tool font: AvantGarde-Demi, Size:35px, Smooth, color:#fff and create the word Your.

Right click on the you layer>>blending options>>inner shadow. Blend mode:multiply, Opacity:75%, Angle:120, Distance:0, Choke:0, Size:5. Then select color overlay and change color to #2d1010.

Step 15

Now import/drag brain image onto canvas.

Select the magic eraser tool and erase the black areas. It’s ok if there’s a little bit of black showing after use of magic eraser tool.

Now change layer from normal to darken. Should be located to the left of the layer opacity option. Then change the layer opacity to 50%.

Step 16

Now this is an extra step. If you’re satisfied with the top results then you’re done but if you would like to do this last step then lets do it. First thing first, group all of the typography words into one group then right click on folder to merge group. Select the eraser tool but use some fancy brushes to erase. I think I may have used grudge paint brushes.

Then group all rectangle layers into one group and right click on group folder to merge group. Now select the same brush tool you have used and erase some of the edges. After you have done that you should have a simple but nice typography wallpaper.

Before we begin you will need the files below:

• Grass Pattern
• Soccer Players

Step 1

Create a new document 1280px x 1000px.

Step 2

Now we’re going to create our grass background. Right click on the background layer>>blending options>>Pattern overlay and load or choose the grass pattern that you’ve downloaded.

Now go to Filter>>Render>>lighting effect

Style: Triple Spotlight, Light Type: Spotlight, Intensity: 35, Focus:100 , Gloss:0 , Material:69 , Exposure:65 , Ambience:13 , and Texture Channel:none.

Step 3

Next thing we are going to be doing is creating the actual soccer lines for our feilds. Select the rectangle tool, color:ffffff and create a nice big rectangle across the grass leaving space around the rectangle.

Now change the layer opacity to 10% and layer fill to 0. Then right click on the rectangle layer>>blending options>>stroke>> size:3px, position:inside, blend mode:normal, opacity:100, Fill Type:color, #ffffff

You should now have a rectangle box for the soccer field.

Step 4

Now we’re going to be doing the same steps for the rest of the boxes on the field. Create a another rectangle box, color:#fffff. Now change the layer opacity to 10% and layer fill to 0. Then right click on the rectangle layer>>blending options>>stroke>> size:3px, position:inside, blend mode:normal, opacity:100, Fill Type:color, #ffffff

Create another rectangle inside of the one we’ve just created color:#ffffff. Now change the layer opacity to 10% and layer fill to 0. Then right click on the rectangle layer>>blending options>>stroke>> size:3px, position:inside, blend mode:normal, opacity:100, Fill Type:color, #ffffff

Now select the rounded rectangle tool color:#ffffff and create a small circle at the top of our rectangle.

Now change the layer opacity to 10% and layer fill to 0. Then right click on the rectangle layer>>blending options>>stroke>> size:3px, position:inside, blend mode:normal, opacity:100, Fill Type:color, #ffffff. Then select the eraser tool(square brush) and just drag it down half of the circle leaving the upper half untouched.

Step 5

Group all the layers we’ve just created for our soccer field lines except of the big rectangle. Then right click on the group and duplicate it. After you have duplicated the group go to Edit>>Transform>>flip horizontal.

Step 6

Now lets create our center field marks. Select the rounded rectangle tool color:#fffff, then create a circle in the middle of the field. Now change the layer opacity to 10% and layer fill to 0. Then right click on the rectangle layer>>blending options>>stroke>> size:3px, position:inside, blend mode:normal, opacity:100, Fill Type:color, #ffffff. Then select the line tool color:#ffffff, and hold Shift+drag to create a perfectly straight line going down the middle of the feild. Change the opacity on the straight line to 10%. You should now have something like the image below.

Step 7

Select the type tool, font: Arial,bold size 200px, smooth. Create a fancy text you would like to use. I used Webdevtuts for the example. Then change the text opacity to 30%.

Right click on the text layer>>blending options>>drop shadow. blend mode:multiply, opacity:100, angle:120, distance:5, spread:65, size:5,

Now select inner shadow. blend mode:multiply, opacity:100, angle:120, distance:0, spread:0, size:35,

Now select Bevel & Emboss. style:inner bevel, technique:smooth, depth:205, direction:up, size:174, soften:16.
angle:120, altitude:30, highlight mode:screen color:#dbdbdb, opacity:75, shadow mode:multiply color:#64781c, opacity:75

Now select pattern overlay. Choose the grass pattern again that we used for our background.

Now select stroke. size:1, position:outside, angle:120, blend mode:normal, opacity:100, color:#000000.

You should now have something like this.

Step 8

Select the elispe tool, color:#fffff and create a circle in the middle of our field. Then change layer filter to exclusion(by default it should say normal) opacity: 70% and fill to 8%.

Step 9

Now lets add our soccer players. Drag or insert the soccer players. Players might be to big at first but just resize them to the appropriate fixture.

Step 10

Duplicate the Webdevtuts text layer then change the text to game time and resize it to 100px. Right click on the text layer>>blending options>>drop shadow. blend mode:multiply, opacity:100, angle:120, distance:5, spread:65, size:5,

Now select gradient overlay. blend mode: normal, gradient: left color#858585, right color, #000000, style:linear, angle:90, scale:100. Then click ok then you’re finish. You
have created your very own soccer theme wallpaper. If you follow this tutorial I would love to see other outcome.

Here is the final image

Create a new a document Width:960px x Height: 1200px, color:#313131

Step 2

Now were going to give our website a little space. First things first, make sure you have your ruler turned on then add a guide line to 0px and 960px.
Note: To insert a guide line just select the move tool and click on the grid and drag it.

Now press CTRL+ALT+C for windows or CMD+ALT+C for Mac. Now you should see a Canvas size box. This is how we’re going to give our document more room for our website. Select the left arrow and change the width from 960px to 1160px then press ok.

Now repeat the last step but select the right arrow and change the width from 1160px to 1360px then press ok. Now you should have 960px in the middle
of your document.

Note: If your document is white or any other color on either side just select the paint bucket tool and change it to the background color

Step 3

Now were going to create a navigation menu. Select the rounded rectangle tool, 5px radius, color:#1c1b1b and draw a rounded rectangle from 0px to 960px. If you’re
lost just just draw the rectangle from guide line to guide line.

Step 4

Keep the rounded rectangle tool selected just change the color:#515151, and draw another rounded rectangle slightly over the menu background

Step 5

Now create a rounded rectangle box color:#fff. Make sure you leave 15px on both sides of the rectangle.

Step 6

Now create another rounded rectangle for our sidebar. Leave a little space at tht top for out logo. There is 15px space in between elements.

Step 7

Ok so now that the layout is basically there we will start with adding out menu nav links. Select the type tool, Arial, Bold, 14px, sharp, color:#686868. Then
type out the correct menu links. To get the single line text just double click when you have the type tool selected. Then after you have the text entered
create another rounded rectangle color #000 for our rollover.

Step 8

Now were going to make our logo. Select the type tool color:#fff, Arial, Bold, 36px, sharp. Now write out a custom name for your blog.

Now right click on the text layer>>Blending options>>Inner shadow Blendmode:multiply, Opacity:75, Angle:120, Distance0, Choke:0, Size:5.

Then select the color overlay check box and change the color to #3f3f3f. You should now have a letterpress logo effect.

Select the type tool color:#fff, Arial, regular, 10px, sharp. Then write out a sub heading. For the letterpress symbol all that is needed is to duplicate the letterpress text layer and select any symbol from the custom symbol panel. Photoshop will ask you if you would like to rasterize layer and simply click yes then insert your symbol. Your final logo should look exactly like this or similar to the one below

Step 9

Select the rectangle tool color:#313131, then create a rectangle box for our featured slider. Leave 15px on each side and the top.

Now find any image you would like and lets insert it over our slider background leaving 5px around the entire image.

Select the rectangle tool color:#313131, and create a rectangle just a bit above our image then change the opacity to 50%.

Now select the type tool color:#ffffff, Arial, Bold, 18px, Sharp then create a generic post heading.

Step 10

Now we’re going to create our blog post. I will only demonstrate 1 blog post because after you have one completed you can duplicate the rest. Select the rectangle tool color:#313131, then create a rectangle box.

Right click on the box layer>>blending options>>gradient overlay. Blendmode:Normal, Opacity:100, Style:Linear, Angel:90, Scale:100.

Now double click on the gradient bar>> Left Color:#e9e9e9, Right Color:#ffffff.

You should have something like the image below.

Now we will add a thumbnail image to our design. You can use any image just make sure you leave 5px around the entire image. Try to make height similar to mine.

Select the type tool color:#313131, Arial, Bold, 14px, Sharp then create a generic post title.

Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create a generic post information heading. Link color:#cc4343.

Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create a generic excerpt(Little information about the post). Link color:#313131(–>Read More<--).

For our final step select the type tool color:#515151, Arial, Regular, 12px, Sharp then create some post tags. Link color:#cc4343.

Step 11

Now that we have our 1 of the posts completed we can now duplicate the other 4. Group all the layers for the post into one folder then right click on the folder and duplicate group. You can then change titles and thumbnails images if you would like. It makes it seem more like a live website preview.

Step 12

Now we will work on the sidebar. Before we begin working on the sidebar make sure you leave 15px on the sides and top of the sidebar. Google search or create 4 images 125px x 125px for our ad spots. Then place the ads into the sidebar.

Step 13

Select the rectangle tool color:#ededed then create a rectangle box for our popular post widget.

Select the type tool color:#515151, Arial, Regular, 20px, Sharp then create a POPULAR POST heading.

Select the type tool color:#606060, Arial, Regular, 20px, Sharp then create some generic post title headings. Make sure they are all cap so that
they look the same as the images below. The highlighted color:#2c2c2c.

Step 14

For our final step we we now create the footer text. Select the type tool color:#515151, Arial, Regular, 12px, Sharp then create your footer text. All
text below in image below was used on one line.

You’re now done! Your final layout should look like the image below(Click to enlarge)

Step 1

Select the rounded rectangle tool, radius: 5px, color:#1f1f1f and draw a rectangle in the middle of your canavas.

Right click on button layer>>blending options>>gradient overlay. Blend mode:normal, Opacity:100%, Style:linear, Angle90, Scale:54%.

Now double click on the gradient bar. Left Color:#1f1f1f, Right Color:#343434.

Step 2

Now were going to give our button a little of pop out technique. Ok so you know the first rectangle layer we’ve created, we are going to take that layer and duplicate it 2 times. After you have duplicated it 2 times you should now have 3 buttons in total. First Rectangle will be the gradient we’ve created in the beginning of this tutorial and the second 2 buttons will be changed from gradients to a 1 solid color.

Note: To change a layer from a gradient to 1 solid color all you would have to do is right click on the layer>>blending options>>and unselect the gradient overlay box. Then select the
color check box and change the color without making a new button over again.

First rectangle: Gradient
Middle Rectangle: #3D3D3D
Last Rectangle: #343434

Now that you have all 3 buttons made with the proper colors we will now make them them close to one another. Zoom in and select the move tool. Now drag the two layers close to the gradient layer. You should now see a little pop out. If you can not then it might be because of the white canvas.

Step 3

Now we will add our little gloss inside of the button. Select the rounded rectangle tool, color:#ffffff. Now draw a rectangle at the top of the button and change the opacity to 1%, and fill to 10%.

Step 4

Select the type tool color: #4b4b4b, font size:30px arial. Right click on the text layer>>blending options>>Inner shadow. blend mode: multiply, distance 0, choke: 0 , size: 5

Now select the color overlay check box and change the color to #333333.

Step 5

Select the type tool color: #4b4b4b, font size:12px arial. Right click on the text layer>>blending options>>Inner shadow. blend mode: mutiply, opacity: 75%, angle: 120, distance 5, choke: 0 , size: 5

Now select the color overlay check box and change the color to #ffffff. And you should now have a nice looking button.

Note: Click to Enlarge!

You can change the colors of these buttons very easy without creating new buttons. Just change the gradients and background colors and you will be good to go.

Note: Click to Enlarge!

Demo

Folder Structure

In the folder of your for your image gallery you should have 3 folders and 2 files.

• Css -Contains the jquery css
• Images – Contains images
• Js – Contains the javascript
• index.html
• style

The HTML Structure

For the image gallery I simply wrapped the gallery in a div and added the images. Every 4 image has two different classed assigned to them. For example the first 4 images has a class name of thumb-small and for the other 4 images they have a class name of thumb-bottom.

<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>

The Css

For the Css you might wonder what -webkit, and -moz-transform is. Webkit is a Css3 tag that targets the safari web browser and moz-transform is a Css3 tag that targets the Mozilla Firefox web browser. In the css

1. -webkit-transform: – Used to rotate the images
2. -webkit-transition: – Used to zoom/ease in on the images

.thumb-top{
	clear:none;
	padding:10px 10px 30px 10px;
	height:200px;
	width:200px;
	background:#fff;
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:25px;
}

.thumb-bottom{
	clear:none;
	padding:10px 10px 30px 10px;
	height:200px;
	width:200px;
	background:#fff;
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:25px;
}

.thumb-top:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	-moz-transform:rotate(-8deg) scale(1.2);
	-webkit-transform:rotate(-8deg) scale(1.2);
}

.thumb-bottom:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	-moz-transform:rotate(4deg) scale(1.2);
	-webkit-transform:rotate(4deg) scale(1.2);
}

#gallery {
	margin-top:20px;
}

Inserting and activating jquery plugins

First things first when activating a jquery plugin is to simply make sure we call in the jquery script. Insert the code below into the head section of your document. The code below calls in jquery, then the two jquery plugins, and finally the plugin Css.

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

Now we want to add the script below to the body of our HTML document right before the end of the body tag.

<script type="text/javascript">
$(document).ready(function(){
$(".thumb-top,.thumb-bottom").fadeTo("slow", 0.3);
$(".thumb-top,.thumb-bottom").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.3);
});
});

$(function() {
    $('#gallery a').lightBox();
});
</script>

For the code below I will try to explain it the best way I can so you can better understand it. I know not everyone is good with inserting Javascript plugins or changing functions.

The first function inside of the script tag targets the light box plugin. The light box plugin is when you click on an image and the image enlarges without being taken to the direct image location.

For this $(“.thumb-top,.thumb-bottom”).fadeTo(“slow”, 0.3); function it just tells jquery to fade to anything with the class of thumb-top or thumb-bottom. So whenever your mouse is not on the image it will be darken.

For this $(“.thumb-top,.thumb-bottom”).hover(function(){ function it just tells you on hover, or whenever you move over the image with your mouse that it will highlight the image.

For the $(‘#gallery a’).lightBox(); function it just asks you what id tag would you like for it to bring up whenever you click on something with the tag of a href. For example I have the images wrapped inside of the id gallery and every image has an a href assign to it so whenever you click on it jquery knows when to call for the second lightbox function.

Note: Rotation does not work in Internet explorer browsers do to lack of support of Css3.

After that you should now have your very own css3/jquery image gallery. I am no jquery expert but I try to help you guys understand it and a easy way instead of using words that you guys are not familiar with.

Credit

Credit goes to Csswizardry for the css3 image gallery.
Credit goes to Leandrovieira for the lightbox plugin.

Click here for Demo

Getting an active state when using css can be very frustrating if you’re not that familiar with css. Many developers that are new to css often think it is the end of the world when really the active state can be accomplish with very little code.

The Body

The body is of the most important roles when you’re trying to create an active page using css. The reason the body tag is very important because when its time to define what page the user is on the body tag will keep that page active. You’re probably thinking that just body tag can complete that and truth is it can but with a little bit of help from an id or class tag. to give the body a id or class name you would simply do the following.

body id="home"
or
body class="home"

Everytime you create a new index page make sure you change the body class or id name and you will later know why.

The HTML

For the HTML I created/ a basic navigation menu with and unique id name. Notice every link such as home, about, etc all have different id names. The reason they all have different id names is so we can identify that certain linktag in the css file.

<div id="menu-nav">
	<ul>
		<li id="home"><a href="index.html">Home</a></li>
		<li id="about"><a href="about.html">About</a></li>
		<li id="team"><a href="team.html">Team</a></li>
		<li id="video"><a href="video.html">Video</a></li>
		<li id="contact"><a href="contact.html">Contact</a></li>
	</ul>
</div><!--end menu-nav-->

The CSS

Ok so you now have and idea of how the menu has to be laid out using html. Now its time to define each id element from the html. If you look at the code below
you will notice that every css tag has the body id, followed by the menu id with the a(active) tag and finished with the css properties. Take a look at css and compare it to the html.

body#home #home a,
body#about #about a,
body#team #team a,
body#video #video a,
body#contact #contact a{
	padding:10px;
	background:#FF0000;
	margin-right:5px;
	color:#FFFF00;
	text-decoration:none;
}

This was not a tutorial but I truly hope it helped you guys out. I know many people face this problem quite often and do not know what to do. It was a simple, fast, and sweet technique.

Create new document 800px x 800px 72dpi. Background Color #58d7f8

Step 2

Select the blur paint brush tool 800px, color #ffffff, and create a circle in the middle of the document

Step 3

Now select the rectangle tool color: 4db0ca and create a rectangle box at the bottom of the document. Does not have to be exact.

Right click on the rectangle layer>>Blending options>>Gradient Overlay. Blend mode: Normal, Opacity:100, Style:Linear, Angle:90, and Scale:100%.

Now double click on the gradient bar. Left color: #4db0ca, right color: #aee7f6.

Step 4

Select the rounded rectangle tool, color: #191813, and radius 2px. Now create a rectangle box just above the rectangle box we created in the last step.

Step 5

Create another rectangle box but this time make it small in width and place it in the left corner of the rounded rectangle we’ve just created.

Right click on the inner rectangle layer>>blending options>>Gradient Overlay. Blend mode: Normal, Opacity:100, Style:Linear, Angle:90, and Scale:100%.

Double click on the gradient color bar. Color 1:#000000, Color 2:#191813, Color 3:#272424, Color 4:#434343.

Step 6

Now we are going to create our keyboard. Select the rectangle tool and create a box color: #1f1f1f.

Now create a second box color:#1f1f1f, and add a stroke of 1px color: #000. To add a stroke right click on the layer>>blending options>>stroke. Size: 1px, color: #000

Step 7

Select the line tool, 1px color:#151515, and create a verticle line. Now create a second line 1px color:#2b2a2a. Make sure both lines are connected.

Add the the lines layer to a group then right click on the group>>Merge Group. You should now have one layer with the 2 lines merged into that layer. Now duplicate that layer 5 times. For the last line make it a 3rd of the way down.

Note: If you’re unsure of how to change the height of the line just press ctrl+T for windows, and cmd+T on mac to bring up the transform tool

Duplicate the lines across until you have filled the inner rectangle box.

Step 8

Now we’re going to make our lines go horizontal. Duplicate one of the lines from the last step then press ctrl+t on windows and cmd+t on mac. While holding shift turn the line so that is it horizontal and stretch it to the end of the inner box line.

Now duplicate the horizontal line 3 more times or until you have filled thed inner box layer vertically.

Step 9

Next we are going to create the letters and symbols on our phone. Select the type tool, Color:#c2d4f4, Font: Verdana, Size: 14px. Now create the symbols and letters for the phone. If you forget where a symbols or letter goes
just take a look at the original image or my image. Each letter was done separately!

Step 10

Now we’re going to create the sub letters and symbols for our phone. Select the type tool, Color:#fff9d2, Font: Lucida Sans Unicode, Font-size: 12px. Now create the symbols and letters for the phone.If you forget where a symbols
or number goes just take a look at the original image or my image. Each letter was done separately!

Step 11

Select the rounded rectangle tool, color:#231d18, and create a rectangle to the right of the keypad for your button.

Right click on the button layer>>blending options>>Bevel and Emboss. Style:Inner Bevel, TechniqueSmooth, Depth: 11%, Direction:up, Size3px, Soften:4px. For the shading area Angle:142, Altitude:32, Highlight Mode: Screen, color:#fff, Opacity:75, Shadow Mode:Multiply, color:#000, and Opacity:75.

Now select the gradient overlay setting. Blend mode: Normal, Opacity:100, Style:Linear, Angle:90, and Scale:100%. Then Double click on the gradient color bar. Left color: #222222, Right Color: #222222. You should now have something like the image below.

Step 12

Select the rounded rectangle tool, Color:#000 and create a rectangle above the first rectangle layer.

Right click on the rectangle layer>>blending options>>Bevel and Emboss. Style:Inner Bevel, TechniqueSmooth, Depth: 11%, Direction:up, Size3px, Soften:4px. For the shading area Angle:142, Altitude:32, Highlight Mode: Screen, color:#ffffff, Opacity:75, Shadow Mode:Multiply, color:#000, and Opacity:75. Now select the gradient overlay setting. Blend mode: Normal, Opacity:100, Style:Linear, Angle:90, and Scale:100%. Then Double click on the gradient color bar. Left color: #222222, Right Color: #222222. You should now have something like the image below.

Note: Settings were the same as step 11 that’s why images were not shown for step 12 #2.

Step 13

Select the rounded rectangle tool, Color:#9f6438 then create a rectangle inside of our other two rectangles.Then right click on layer>>blending options>>Stroke, Size: 1px, Color:#878787

Step 14

Now we are going to give the right side of our phone some bevel. Select the rounded rectangle tool, Color:#000 and create a rectangle on the right side of the phone.

Right click on the layer>>blending options>>Gradient Overlay, Blend mode: Normal, Opacity:100, Style:Linear, Angle:90, and Scale:100%. Then Double click on the gradient color bar. Left color: #000, Right Color: #262626. You should now have something like the image below.

Step 15

Next we’re going to add a little blue line to the right side of our text and button pad. Select the line tool, 1px, Color:#364450 then draw a line right next to the text and button pad. Create another 1px line, Color:#48575f and connect it to the first 1px line so that they are side by side.

Step 16

Select the rounded rectangle tool, Color: #191813, and create a rectangle for the upper part of out phone.

Right click on the button layer>>blending options>>Bevel and Emboss. Style:Inner Bevel, TechniqueSmooth, Depth: 1000%, Direction:up, Size9px, Soften:7px. For the shading area Angle:142, Altitude:32, Highlight Mode: Screen, color:#4c4c4c, Opacity:75, Shadow Mode:Multiply, color:#000, and Opacity:75.

Now select the gradient overlay setting. Blend mode: Normal, Opacity:24, Style:Radial, Angle:90, and Scale:150%.

Then Double click on the gradient color bar. Left color: #000000, Right Color: #373737. You should now have something like the image below.

Step 17

Create another rectangle, Color:#1e1e1e inside of the first rectangle.

Right click on the layer>>blending options>>Gradient Overlay, Blend mode: Normal, Opacity:27, Style:Reflected, Angle:90, and Scale:150%. Then Double click on the gradient color bar. Left color: #000, Right Color: #302f2d. You should now have something like the image below.

Step 18

Now we’re going to create our screen. Create a another rectangle, Color:#d6d6d6. Make sure you leave space around the screen especially on the left and right of the rectangle.

Step 19

Now we will create the symbols for the touch pad. Color:#c2d4f4. I used the custom shape tools from photoshop to create the touch symbols

Step 20

Select the line tool, 1px, Color:#161616. Create a 1px line on the left side of the screen. Create another 1px line, color#2b2b29. Connect the two lines so that they are side by side. Then select the type tool Arial, Italic, 13px, Color:#545454 and create the desire name you would like for our phone. You should now have something like this.

Step 21

Now we are going to add some cool things to our screen. Google search or grab a favorite image that you would like to use for the wallpaper. Then select the rectangle tool, Color:#ffffff then create a rectangle at the top of the
screen.

Step 22

Now lets add our screen icons and widgets. Select the type tool, Arial, 10px, color:#000 and insert a time on the right side of the screen. For the battery select the rounded rectangle tool, Color:ffffff then create a small rectangle.

Duplicate the rectangle so that you have two. Right click on the rectangle>>blending options>>Stroke, Size:1px, color:#b9b9b9. Right click on the duplicated layer>>blending options>>color: and change the color to #a0ffb4. To change the energy just used the transform tool to make it full or halfway.

Step 23

Now we will add some icons to our screen. The icons I used for this tutorial are free and can be used. You can download them here. Add any icons you would like to use for this tutorial. I used the 16×16 icons.

Step 24

Now for the reflection. To add a reflection merge all the layers except for the backgrounds. Duplicate the phone, then go to Edit>>Transform>>Flip Vertical. Now drag the phone layer down just a bit then go to Filters>>Blur>>Box blur and set the radius to 7px. Then change the layer opacity to 70%. Now you should have a phone reflection. You are now finished

Ok Were finally on the last step on how to transform a photoshop mockup into a working wordpress theme. For this tutorial you will need

1.Stalker Naked WordPress theme!-By Elliot Jay Stocks
2. Local Server to run wordpress xxamp
3. The html file fromPSD to wordpress part 2

Ok so now we will begin the final part to PSD to WordPress series. You should now have the stalkers wordpress downloaded and ready to use. Also before we begin make sure you have xxamp or a local server up and running so you can see changes we make to our wordpress theme.

Open up your primary code editor. I will used dreamweaver for this tutorial. If you do not have dreamweaver then you can download the free trial or use a free code editor like
notepad++ for windows and for Komondo for mac

Now inside the stalker folder you should have 15 PHP files but we will only use 7 of them. The reason we will only use 7 because most of the steps we will cover today can be used on other pages. So after this tutorial you should have and idea or clear vision on what to do for the other wordpress pages.

Note: You do not have to delete the ones we do not use

The files we will use/need for this tutorial are

• archive.php
• footer.php
• header.php
• index.php
• page.php
• sidebar.php
• single.php

archive.php – The page that shows after you’ve click on a category name
header.php – for all JavaScript or Stylesheet imports
index.php Main/Home page
page.php Single page
sidebar.php sidebar
single.php after you click on a post its takes you to the single.php page

Since we’ve already coded the theme into xhtml/css we will just be copying and pasting a lot of things and changing some of our HTML markup into php functions.

Step 1

First thing is first. copy your entire style.css to your wordpress style.css

Note: Copy everything after Code start. Everything above that is the css reset and has to go into another style sheet

Step 2

Now lets place the css reset code into the right file. Click on the Style>>Css>>Reset.

Delete everything in the reset file.

Now copy everything above code starts and place it into the wordpress reset file then save it.

You should have something like this so far

Step 3

Now that our css and reset files is taken care of its time to get the ball rolling and get our wordpress theme looking good. Open up your index.html file (From part2 psd wordpress series) and header.php file. Copy the highlighted code into your header.php file.

<div id="header">

<div id="main_nav">
<ul>
<li><a href="http://www.webdevtuts.net">Home</a></li>
<?php wp_list_categories('title_li='); ?>
</ul>
</div><!--end main_nav-->

<div class="clear"></div>

<div id="logo"></div><!--end logo-->

</div><!--end header-->

<div class="clear"></div>

<div id="Container">

Step 4

Now open your index.php file.

First thing you should do is add

right below the header tag then close it right above the sidebar tag.

This code below is our post section. We will substitute some XHTML markup into wordpress php functions

Below is the entire section for the post area (Just the normal HTML)

Below is the wordpress markup that we will be using

Copy the code below into your index.php

<div class="post_break">
<div id="post_thumb"><img src="<?php echo get_post_meta($post->ID, 'Thumbnail',true) ?>" alt="Post Image" id="postbreakimg" /></div>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div id="post_info"><p>Posted in <?php the_category(', ') ?> <?php the_time('F jS, Y') ?> by <?php the_author_posts_link(); ?></p></div>
<div id="post_text"><?php the_excerpt('Read the rest of this entry &raquo;'); ?></div>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" class="post_more">Read More</a>
</div><!--end post break-->

<div class="clear"></div>

Note: Below is information to help you better understand what I did and what changes I made.

So I will start off with the div class=”Post_break”. I used div class because there are mutiple post, and when you have mutiple things using the same styling then it is good to use class
instead of

plus it will keep your code vaild.

For the image I kept the div id=”post_thumb but I changed the inside to

<img src="<?php echo get_post_meta($post->ID, 'Thumbnail',true) ?>" alt="Post Image" id="postbreakimg" />

The code above tells wordpress to grab the thumbnail image. Whenever you would create a new post you would insert the word Thumbnail into your custom fields and link to the direct image and there is where your image will appear.

For the second level heading(H2) I change the inside of the h2 tags to

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>

For the post info section I changed the inside of the div to

<p>Posted in <?php the_category(', ') ?> <?php the_time('F jS, Y') ?> by <?php the_author_posts_link(); ?></p>

The code above basically tells wordpress to find out what category the post was written for then the date of publish and finally the author name that has written that post.

For div id=”post_text” I’ve added

<?php the_excerpt('Read the rest of this entry &raquo;'); ?>

which tells wordpress to get the short description of the post instead of the entire post

For the read more link I’ve added

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>" class="post_more">Read More</a>

which tells wordpress that you would like to read more and it will take you to the single page.

Finally I ended the post section then cleared the floats.

The index.php page is finally completed in here is what your page should like.

Step 5

Now that our header.php, index.php are completed we will now work on our sidebar.php page. Open your sidebar.php page.

Note: remember that most of the divs and markup codes are codes/tags I grab are from the original index.html file

Scroll down the index.html page until you see the sidebar tag. Copy div id=”sidebar” into your sidebar.php file. Add the code right below the php header tag

Now lets add our advertisement 125×125 into our wordpress layout.

Copy the code below

<h2>Sponsors</h2>
<ul id="adverts">
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/ad125.jpg" alt="125x125 banner ad" /></a></li>
</ul><!--adverts-->

<a class="side_more" href="">Advertise here</a>

<div class="clear"></div>

Note: Below is information to help you better understand what I did and what changes I made.

In the normal HTML I just linked the images to the image folder but with wordpress you have to use a custom php function which calls the images.

Now lets add the Flickr images to our theme. Copy the code below

<h2>Flickr</h2>
<ul id="flickr">
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/flk_samp.jpg" alt="flickr" /></a></li>
</ul><!--end flickr-->

The code above does the same thing as the ads. WordPress calls for the images. If you wanted to turn these images into live working images from your flickr account then the best thing to do is use a wordpress plugin.

You should now have something like this

Step 6

Now that are header.php, index.php, and sidebar.php are completed it is time to complete our single.php page. The single.php is very simple to complete.

All we have to do is add the main col tag after the header tag(Very first tag at the top) then delete this tag

<?php previous_post_link('&laquo; %link') ?> | <?php next_post_link('%link &raquo;') ?>

Finally lets add this code after the end tag of main col

<?php get_sidebar(); ?>

Your single page should now look like this

Step 7

Open your archive.php. For our archive page we will just be adding the main col tags and using the post code from index.php. Hope that made sense!
Below is the archive page untouched!

Add the div id=”main_col” to the top of your archive.php page and place it right under the get header function. Then replace the post area code
with the post area code from your index.php file. Do not forget to close the main col div.

Here is an example of what your archive.php should actually look like.

step 8

Now we will work on the footer page Open your footer.php and copy the footer tag from the index.html into your footer.

CONGRATULATION! You are now finish and should have your first wordpress theme completed. I did not go over some of the pages because what you’ve learn from this tutorial can be applied to other pages in wordpress. If you would like for me to create a screencast for part 3 please leave a comment letting me know and will create a screen cast for part 3. Hard work was put into this series and I truly hope it helped you beginners out there understand wordpress better. I did not go over the comment.php page but you can check this article from Darren Hoyt and it will teach you all about the comment.php page. Thanks for following this tutorial, if you have any question leave a comment and I will respond asap.