/%category%/%postname%/

If you’re using the above structure from your permalinks then you may have noticed that wordpress adds category into your email.

Example:

http://www.yoursite.com/category/postname

You would like the url to look like this.

Example:

http://www.yoursite.com/postname

This can be achieved using wordpress. Add the following code below to your functions.php file.

add_filter('user_trailingslashit', 'remcat_function');
function remcat_function($link) {
    return str_replace("/category/", "/", $link);
}

add_action('init', 'remcat_flush_rules');
function remcat_flush_rules() {
    global $wp_rewrite;
    $wp_rewrite->flush_rules();
}

add_filter('generate_rewrite_rules', 'remcat_rewrite');
function remcat_rewrite($wp_rewrite) {
    $new_rules = array('(.+)/page/(.+)/?' => 'index.php?category_name='.$wp_rewrite->preg_index(1).'&paged='.$wp_rewrite->preg_index(2));
    $wp_rewrite->rules = $new_rules + $wp_rewrite->rules;
}

The code above tells WordPress that any url that is using the word category to remove category and rewrite the url without the category. This method is a cleaner approach then editing the .htaccess file since some WordPress owners have no experience editing the .htaccess file.

Things yous will need.

• Amienne Font
• Dots tutorial(Optional)

Step 1

Create new document 1360px x 800px 72dpi. Background Color #000(Black)

Note: Turn on your photoshop ruler(PX!).

Step 2

Now drag your guide lines to 200px on the left side and 1160px on the right side(Exact place). That should leave 200px on both sides.

Step 3

Select the rectangle tool and create a rectangle box for your nav. Then right click on the rectangle layer>>blending options>> Gradient overlay, double
click on the gradient bar Left color: #131313, right color: #343434. Now select the stroke option and make a 1px inside line, color #000000.

Step 4

Now select the type tool, font: Amienne, size: 51px and type out a word for your logo.

Right click on the logo layer>>blending options>>drop shadow. blend mode: multiply, opacity: 75, angle:120, distance: 0, spread: 0, size: 5.

Select the inner shadow checkbox now. blend mode: multiply, opacity: 75, angle:120, distance: 0, spread: 0, size: 5.

Select the color overlay. color: #ffffff. now select the gradient overlay check box. blend mode: normal, opacity: 100, gradient: Left color:#000000, Right color:#ffffff, style: linear, angle: 90, scale: 100.

Then select the stroke check box. size: 1, opacity: 100, position: outside, blend mode: normal, opacity: 100, color: #000000.

Step 5

Select the type tool, font: Amienne bold, color: #ffffff, size: 28px. Now write out the your portfolio items. After you have written out your portfolio items highlight the home option and change the color to #e4d640.

Step 6

Now select the rectangle tool then create a box for the bio. Then apply a gradient overlay to the box, left color: #000000, right color: #2a2a2a then you should have a faded box.

Select the custom shape tool color: #e4d640 and select the tile2 pattern. Stretch the tile so it fits within the box then change the opacity to 4% so that it is barley seen.

select the type tool, font: Amienne, size: 55px and type out your name. For the stars I used a separate type tool and created them separately on both sides. After you have your name create right click on the layer>>blending options>>gradient overlay. Left color: #c6bd2a, Right color:#ffed53. Now select the stroke check box>> 1px #000000. Apply the same option to your stars.

Step 7

Select the type tool, font: Arial, size: 12px, color:#ffffff and write a bio. I used gibberish text(Lorem Ispum).Then select the rectangle tool and create a scroll box and arrow to the right side of your text. Then apply a 1px stroke #000000 to your arrow and scroll bar.

Step 8

Create or a find a image about the same size as your bio area. I used an image from Google.

Step 9

Now lets create our portfolio items. Create 3 new portfolio items. width:320px height:260px. Then select the custom shape tool and select the triangle and create a sideways triangle for our play button. Then change the opacity 50%.

Step 10

now select the rectangle tool color #000000 and create a rectangle box for your footer. Then apply a gradient to it, left color:#080808, right color:#313131. Then duplicate the logo and re size it to 12px and write your copyright text. Then pick some of your favorite social icons and place them to the right of your footer. Finally drag in your background. Right click on the layer>>blending options>>pattern overlay and select the dots pattern. Make sure it is scale to 1%. Now you’re done.

Before you begin this tutorial please download the font and vinyl records that we’ll later use in this tutorial.
AvantGarde-Demi Font
Vinyl Record

Step 1

Create a new document (w)800px x (h)500px background #11d0ff

Step 2

Select the type tool font: AvantGarde-Demi, color: ffffff, size:150px, and write out the word LOOP.

Now select the character panel or go to window>>character and a panel with character options should appear. Now Highlight your text then change the tracking from 0 to -140.

Step 3

Now right click on your text layer>>blending options>>drop shadow. blend mode:multiply, opacity: 75, angle: 120, distance:0, spread:15, size:7.

Select the Bevel and Emboss option now. style:inner bevel, technique:chisel hard, depth:21, direction:up, size:27, soften:5, SHADING –> angle:120, attitude:30, highlight mode:screen color:ffffff, opacity:75, shadow mode:mutiply color:000000, opacity:75, then press ok.

To resize an image press CTRL+ALT+T on windows or CMD+ALT+T on mac then press click + SHIFT and drag it down to proper size.

Step 4

Now drag in the vinyl record you’ve downloaded at the beginning of this tutorial and re-size it. Then duplicate the record and place them inside of the two OO’s.

Step 5

Select the type tool font: AvantGarde-Demi, color: 000000, size:36px, and write out the word FM.

You are now finished. As you can see a logo can be anything you like it to be but try to get creative. We could of done much more to this logo to make it more detailed or complex but I wanted you guys to get the hang of creating simple but elegant logos. Hope you’ve all learn something.

The HTML Markup

Step 1

Download the blue print PSD then Open Photoshop. Usually people used the slice tool and slice the entire layout fast but I like to crop everything which is the slow way. So if you’re familiar with or feel better slicing your layout then you can look over over this step. As for the rest of you take a look at the crop diagram I’ve created and crop each of the items in the picture. I have included labels by each one.

Step 2

Now we’re going to begin coding our blue print layout. Open your HTML text editor or WYSIWYG editor and lets begin. The first thing we’re going to do is add in our doctype and setup our
main site structure. copy the code below inside your HTML document and I will explain after.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Blue Print Website</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
</body>

The code below is the main structure of our website. When first creating a website it is very important that you have the basis HTML tags included in the document such as the head, title, and body tags.

Step 3

Now we’re going to create our header. Below I have created a div with in #header and inside the header will be our logo.

<div id="header">
<div id="logo"><a href="#">Blue Print</a></div><!--end logo-->
</div><!--end header-->

Step 4

Next we’re going to add the HTML for our container and top section menu and search bar. We will end the container tag at the end of our document.

<div id="container">

<div id="menu">
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Design</a></li>
	<li><a href="#">Tutorials</a></li>
	<li><a href="#">Freebies</a></li>
	<li><a href="#">Submit</a></li>
</ul>

<span>
<form name="search-form" id="searchform" method="get" action="">
  <table width="300" border="1" cellpadding="5">
    <tr>
      <td>
        <input type="hidden" name="dff_view" value="grid">
        <input type="text" name="dff_keyword" size="30" maxlength="50"><input id="submit-btn" type="submit" value="Submit" style="padding:8px 10px 10px 10px; height:35px; margin-left:5px;">
      </td>
    </tr>
  </table>
</form>
</span>
</div><!--end menu-->

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

Step 5

Right below the above code insert the code below. The code below is our wraps for the content.

<div id="inside-container">
<div id="content">

After the content wrap let’s create our post area with the thumbnails. Copy and paste the code below after the content wraps.

<div class="post">
	<img src="images/thumb.jpg" alt="thumbnail"/>

	<h2><a href="">5 Astonshing lighting effects made using Photoshop</a></h2>

		<div class="post-info"><p>Posted in <a href="">Design</a>, <a href="">Tutorials</a>, on 12.01.2009 by <a href="">Marcell</a></p></a></div>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et d
	olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>

	<div class="more"><a href="">Read More</a></div><!--end more-->

</div><!--end post-->

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

Copy and paste the code above 4 more times. This will give us our blog section. After you have copied and pasted the code 4 times place this code after the last clear div.

</div><!--content-->

Step 6

Now we’re going to create our sidebar HTML code. Copy and paste the code below after the end of the content div(After the step above).

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

Since we have our sidebar ready it time to insert our widgets or shall I say sidebar content.

<div class="widget">
<h2>Subscribe</h2>
	<ul id="social">
		<li class="rss"><a href="#"><img src="images/rss.png" alt="rss"/></a></li>
		<li class="twitter"><a href="#"><img src="images/twitter.png" alt="Twitter"/></a></li>
		<li class="facebook"><a href="#"><img src="images/facebook.png" alt="facebook"/></a></li>
		<li class="flickr"><a href="#"><img src="images/flickr.png" alt="flickr"/></a></li>
	</ul>
</div><!--end widget-->

<div class="widget">
<h2>Sponsors</h2>
	<ul id="adverts">
		<li><a href="#"><img src="images/advert.jpg" alt="advert"/></a></li>
		<li><a href="#"><img src="images/advert.jpg" alt="advert"/></a></li>
		<li><a href="#"><img src="images/advert.jpg" alt="advert"/></a></li>
		<li><a href="#"><img src="images/advert.jpg" alt="advert"/></a></li>
	</ul>
</div><!--end widget-->

<div class="widget">
<h2>Popular Posts</h2>
	<ul>
		<li><a href="#">10 WordPress tutorials that will help you better understand wordpress </a></li>
		<li><a href="#">Create an amazing typography poster using adobe photoshop </a></li>
		<li><a href="#">15 Articles best showing you how to create your very own wordpress theme option </a></li>
		<li><a href="#">Freelancing vs The 9-5: Should you quit your day job to freelance</a></li>
		<li><a href="#">PSD to wordpress Series: Part 2 Converting the wordpress theme</a></li>
	</ul>
</div><!--end widget-->

Step 7

Next we’re going to close the containers.

<div class="clear"></div>
</div><!--end inside-container-->
</div><!--end container-->

Step 8

Last step of Inserting our HTML markup is adding the footer.

<div id="footer">
<p>Copyright 2010 to Webdevtuts. All Rights Reserved.<span><a href="#header">Top</a></span></p>
</div><!--end footer-->

The Css a.k.a Styling of our webpage

So now that we have our HTML Markup language completed we will now begin styling our web page. I did not explain each markup code above but will do in the css below so have no worries.

Step 9

First we’re going to style our body, links and paragraphs.

/*
Blue-Print Theme by Marcell Purham
Webdevtuts.net
*/

@import url("css/reset.css");

body {
	background: #152a5b url(images/bg.jpg) top center no-repeat;
	font-family: 'arial';
}

.clear {
	clear:both;
}

p {
	line-height:20px;
	font-size:12px;
}

a {
	text-decoration:none;
	color:#383838;
}

a:hover {
	color:#6a6a6a;
}

• Import url – Use for css reset. Tells css to look for reset.css and the css folder
• body – I’ve added a background color to the body then from the huge image I cropped I used css to call the image then told it
  to position the image in the top-center of the screen with no repeat.
• Clear – This is used to clear all floats. so if you remember from the HTML document we’ve included a lot of clear divs.
• Paragraph – For the paragraph tag I’ve gave it a line-height of 20px(spacing) and a font size of 12px which is what we need for this layout
• a & a hover – The A tag is the href(links) tag used to link content. I gave it a decoration of none and applied a color to it. For the hover I just simply
  applied a color to it so people would know its a link.

Step 10

Next we’re going to style our logo and menu area. Copy & paste the code below into your css document and I will explain.

#header {
	width:960px;
	margin:0 auto;
}

#logo a {
	background: url(images/logo.png);
	width:384px;
	height:94px;
	display:block;
	text-indent:-9999px;
	margin:30px 10px 10px 0;
}

#menu {
	width:910px;
	float:left;
	background: url(images/grid-pattern.jpg);
	padding:15px;
	margin:10px 0 15px 0;
}

#menu li {
	float:left;
}

#menu li a {
	padding:5px 15px 5px 15px;
	float:left;
	text-decoration:none;
	font-size:16px;
	font-weight:bold;
	color:#383838;
	border-right:2px solid #383838;
	text-transform:uppercase;
	margin-top:5px;
}

#menu span {
	float:right;
}

#searchform input {
	height:25px;
	background:#383838;
	border:none;
	color:#fff;
	padding:5px;
}

#submit-btn  label{
	width:50px;
	display:block;
}

#container {
	width:940px;
	margin:0 auto;
	background:#6b6a6a;
	padding:10px;
}

• Logo – For our logo image since I’ve cropped it I called it using css in the image folder then applied the exact height and width to the css so it knows the exact size of the
  logo.
• Header – For the header I gave it a width of 960px then centered it using the good ol margin 0 method.
• Menu – For the menu I floated the menu to the left and gave it a width of 910px. Then I added a padding of 15px. For the menu li tags I just basically change the
  font size, color, and padding.
• Searchform – For the search form I Used the “O DON’T I JUST LOVE TABLES” method. So the search form is created using tables but styled using css. I basically gave it a height
  added some padding and style the submit button
• Container – The container is what holds the content so I’ve created a container 940px then centered it and gave it the grey background color.

Step 11

Now we’re going to style our inside container, content and post area(Blog area). Copy and paste the code below into your css.

#inside-container {
	background:url(images/grid-pattern.jpg.);
	padding:10px;
}

#content {
	width:590px;
	float:left;
	background:#6b6a6a;
	padding:10px;
}

.post {
	float:left;
	margin-bottom:15px;
	border-bottom:1px solid #7d7b7b;
	padding-bottom:10px;
}

.post img {
	float:left;
	padding:5px 10px 5px 0;
}

.post h2 a {
	font-size:20px;
	font-weight:bold;
	color:#383838;
}

.post-info {
	background:url(images/post-info-pattern.jpg);
	padding:5px;
	margin: 5px 0 5px 215px;
}

.more a{
	float:right;
	text-decoration:none;
	background:#7d7b7b;
	padding:10px;
	font-size:12px;
	color:#383838;
}

.more a:hover {
	background:#989797;
}

• Inside Container – The inside container is what holds the content and sidebar area. For the inside container I did not need to specify a width considering I’ve already
  added a container with an width to our css. So I just applied a padding to it.
• Content – For the content div I applied a width of 590px and added a padding of 15px(padding:Space inside. So 15px on every side) to the content div. Then I finally
  floated it to the left side of the container.
• Post – The post area is the area with our thumbnail, author information, excerpt and read more link. For the post area I’ve floated everything to the left then styled each individual class that was included in the HTML such as Images, links, text and etc.

Step 12

Now we’re going to style our sidebar and widgets area. Copy and paste the code below into your css.

#sidebar {
	width:300px;
	float:right;
}
.widget {
	margin-bottom:15px;
	clear:both;
	list-style-image:url("images/arrow.png");
}
.widget h2 {
	background:#383838;
	color:#fff;
	font-weight:bold;
	font-size:20px;
	padding:10px;
	margin-bottom:10px;
}

.widget ul li a {
	background: url(images/arrow.png) left top no-repeat;
	padding-left: 20px;
	margin-bottom: 10px;
	font-size:12px;
	line-height:20px;
	display:inline-block;
}

#social li {
	float:left;
}

#social li a{
	display:inline;
	float:left;
	background:none;
	padding-left:0;
	margin-left:10px;
}

#adverts li {
	float:left;
	margin-bottom:10px;
}

#adverts li a{
	display:inline-block;
	float:left;
	margin-bottom:10px;
	background:none;
}

• Sidebar – For the sidebar I gave it a width of 300px and floated it to the right side of the page.
• Widget – For the widget area I gave it a margin bottom of 15px which gives each widget a space of 15px. Then I style the widgets list using css and
  the arrow image that we cropped earlier in this tutorial.
• Social – For the social Icons I’ve floated each item to the left and gave them a margin-left of 10px.
• Advertisements – For the advertisement I floated each item to the left and told the css to display them as inline block.

Step 13

For the last and final part of our css will be the footer. Copy and paste the code below into your css.

#footer {
	width:940px;
	margin:0 auto;
	padding:10px 10px 10px 0;
	color:#6b6a6a;
}

#footer span {
	float:right;
}

• Footer – For the footer I gave it a width of 940px then added padding. I also told the footer that any paragraph text should be #6b6a6a(grey). I finally added a span to float to the right and take users back to the top page.

CONGRATULATIONS You have finished the Blue Print PSD to HMTL tutorial. I know I did not get in depth with this tutorial but from what I have explain should give you all a hint of how to create your very own HTML website layout. I also think the best way to learn is to experience and play with the code. SO take a look at my code and relook at this tutorial and you should have no problem creating your very own website. If you guys would like to see this template converted to wordpress 3.0 just ask below and I may consider it.

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

Step 1

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 the 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 navigation 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)

Create a New Document. It can be any size.

Step 1

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

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: multiply, 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!