Webdevtuts » PSD

Create a rocking blue print website layout in photoshop

Marcell Purham — Mon, 14 Dec 2009 22:05:01 +0000

In this tutorial you will be learning some new design techniques and I will teach you how to create a professional looking mockup. This tutorial is mainly for people who’ve design websites in photoshop so if you’re a beginner I recommend that you check out some of our other tutorials to better help you understand things. If you think you can do it then give it a shot! Enjoy

Download Final

Resources:
Blue Print Paper
Black Ruler
Graph paper

Step 1

Create new document 1280px x 1000px 72dpi. Background Color #152a5b(Dark blue)

Step 2

Now turn on your rulers and put the guides(Lines that help you keep things contained) at 0px and 960px. You might not be able to see the guides after you’ve place them into your design because they are on the starting and ending point of the canvas.

Step 3

Next we will center our 960px design. Press CTRL + AlT + C for Windows and for Mac Press CTRL + CMD + C. You should now see a box that says Canvas size.

Change the Canvas width to 1160px then select the left arrow and press ok.

Now we’re going to repeat the first step and change the canvas size from 1160px to 1360px and select the right arrow then press ok.

Note: If your canvas has two different colors after you’ve added the extra 200px to both sides, just select the paint bucket tool and fill in the opposite color area so that everything matches.

Step 4

Now place the blue print paper inside your photoshop document then select the rounded paint brush tool with the blurred edges and brush around the imageAfter I resized the image and blurred around it.

With the back ground layer turned back on

Step 5

Now insert your ruler image and re size it to your comfort.

Select the type tool, color:#383838 and type in the name blue print. Right click on the blue print layer>>blending options>>Inner Shadow.
Blend Mode:multiply, Opacity:75%, Angle:-171, Distance:5px, and size 5px.

Now select the gradient check box. and copy settings below

Double click on the gradient color box. Left Color:#000, Right Color:26272d.

Logo should now looks like it is engraved into the ruler.

Now lets add a light above our logo so we can give it a bit of a shine. Select the paint brush tool with the blurred edges, size:500px then press the brush tool once over the logo and change the layer opacity to 45%.

Step 6

Select the rectangle tool, Color:#7a7a7a; and create a rectangle starting from the top ending at the bottom. Leave room between the logo and room so we can insert some footer text.

Step 7

Now lets add our graph paper. Insert your graph paper into photoshop then copy and duplicate the graph layer until you have a full covered graph.Leave 10 pixels space between the left, right, and bottom.

Step 8

Create a rectangle color:#6b6a6a for your left column. Make it around 620px wide leaving 10 px on the left, right, top, and bottom.

Step 9

Now lets create our post area. Find or create an image Width:206px x Height:181px.

Select the type tool Font:Arial, Bold, Size:20px, Color:#383838, and type in some realistic headings.

Resize your graph paper so that it’s able to fit the post information inside it. Then add in some post text font:arial, size:12px, color:#383838. Ex:Posted in Blog, on 12.06.2009 by Marcell

Now lets create an excerpt. You can use dummy text for the excerpt if you would like. You can find dummy text by searching lorem ispum.

We will now add a read more button. Select the rectangle tool Color:#7d7b7b, and create a box at the bottom right edge of the post. Then select the type tool and type read more.

Finally we’re going to add a 1px solid line so that we can keep our posts divided. Select the line tool(In same panel as rectangle tool) then create a 1px solid line Color:#838080. (Look at the top at the panel after you’ve selected the line tool and change Weight) to 1px)

Duplicate the post area 4 times. You can use the same image but It looks more realistic when you use different images.

Step 10

Now that out post area is completed we will now work on our sidebar area. Select the rectangle tool color:#383838 and create a rectangle box for our sidebar/widget heading. Then select the type tool font:arial, bold size:20px, then type Subscribe.

Next we will add some icons to our mockup. Here is a free set of icons that you can use for this tutorial. Add four icons to the design.

Step 11

Duplicate the widget/sidebar heading and title then change the title name to Sponsors and add in 4 advertiments, 125px x 125px

Step 12

Duplicate the widget/sidebar heading and title then change the title name to Popular Post. Then create 5 realistic or dummy post titles. Leave room on the left so we can add in some arrows later.

Now go to the custom shapes panel and select an arrow. I used the arrow selected below.

Change your foreground color: to #838080, then draw an arrow next to the sidebar text. Duplicate the arrows 4 times.

Step 13

Let’s create a navigation menu for our design. Create a new document Width:936px, x Height:74px then drag the graph paper into the new document and crop it. After you’ve cropped the image drag it back into our design layout

Step 14

Now we will create a search form for our design. Select the rectangle tool Color:#383838 then create 2 rectangle boxes, 1 for the search form and the 2nd
one for our search button.

Step 15

Select the type tool and type in search for the search form. For the search form button type Submit color:.#7a7a7a, Size:10px; Now add a search icon glass or image to the top left of the search form. I used an icon from the preset panel in photoshop.

Step 16

For our last and final step we will add two things, a page navigation and some footer text. We will create and older entries nav link right under our post area. Select the type tool font:arial, size:12px, Color:#fff then typeOlder entries. Now we will create the footer text. Select the type tool font:arial, bold size:12px, Color:#6b6a6a

You’re now done! Your final image should look like this, Click to Enlarge

PSD to WordPress Series Part 3: Final Tutorial

Marcell Purham — Mon, 30 Nov 2009 22:19:57 +0000

I know there are many developers and normal people who want to know how to design a wordpress theme from scratch. Well today is your lucky day. In this series, PSD to WordPress we will design a Mockup in Photoshop, then code it for wordpress.(part3)

Download

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.





Home

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


ID, 'Thumbnail',true) ?>" alt="Post Image" id="postbreakimg" />

Posted in   by 

Read More

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 multiple post, and when you have multiple things using the same styling then it is good to use class instead of id, plus it will keep your code valid.

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

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

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

Posted in by

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

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

For the read more link I’ve added

Read More

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

Sponsors

/images/ad125.jpg" alt="125x125 banner ad" />
/images/ad125.jpg" alt="125x125 banner ad" />
/images/ad125.jpg" alt="125x125 banner ad" />
/images/ad125.jpg" alt="125x125 banner ad" />


Advertise here

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

Flickr

/images/flk_samp.jpg" alt="flickr" />
/images/flk_samp.jpg" alt="flickr" />
/images/flk_samp.jpg" alt="flickr" />
/images/flk_samp.jpg" alt="flickr" />
/images/flk_samp.jpg" alt="flickr" />
/images/flk_samp.jpg" alt="flickr" />
/images/flk_samp.jpg" alt="flickr" />
/images/flk_samp.jpg" alt="flickr" />
/images/flk_samp.jpg" alt="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

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

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.

PSD to WordPress Series Part 2

Marcell Purham — Sat, 05 Sep 2009 02:49:13 +0000

Download Final

Welcome to part 2 of PSD to WordPress Series. In this part of the tutorial we’re going to slice and code our theme for valid Xhtml/css.

Note: I do not slice my layouts because I end up having so many unused images so in this tutorial we’re going to crop everything. Also When you have a cropped image I will not go over how to save.

Step 1

Open Photoshop (Continue where we left of from previous tutorial)

Step 2

Select the crop tool

Step 3

First thing we’re going to crop will be the header top. ( Press enter key when you feel you have the appropriate crop. ) Save as body-bg.jpg

Note: After you crop an image go to File>>Revert or press F12 to go back to last save point

Step 4

Now we will crop our logo. ( save as logo.jpg )

Step 5

To speed things up so we can get to coding this thing, I will go over the next 3 objects we will need to crop.

Post Thumbnail: Save as Post_thumb.jpg

Sample ad 125×125: Save as ad125.jpg

Flickr image: Save as flk_samp.jpg

Now that we’ve finished cropping the images that well need for our layout, we can get to coding it.( Woooooooooooooo! )

Note: Before we begin this tutorial Make sure you create a new folder so you can store files.

Step 1

Open dreamweaver ( Other text editors are fine! ) File>>New>>HTML>none

Step 2

We will first begin by creating our header section. Go ahead and copy & paste it . I will explain it below.




Home
Articles
Photoshop
Resources
Flash
Freebies

Step 3

For the navigation I used an unordered list with links inside. Also we will take care of the logo and clear class when we begin styling our theme.

Note: If you’re not familiar with that it is basically a push down for our theme. For example if you do not clear the floats the theme and everything will be completely disorder.

Step 4

Now we will begin adding the content. First we will create the page wrap to contain all of our content.

Step 5

Now we will create our main column which will hold all of our post, thumbnails and etc. The code below will go inside of the container tags.

Step 6

Ok so we have our main_col wrap created, we can now start to add our post to our theme. div class=”post_break” holds our posts information. When working with divs id can not be repeated so we used a class so that we can repeat it and have valid code.

div id=”post_thumb” is our thumbnail for our

div id=”post_info” is what we will used to define the author and tags.

div id=”post_text” will be used for our wordpress excerpt.
div id=”post_more” will be used to link our front page to the actual post. The will keep everything from overlapping and pushed the divs down. Now it’s time to Add the code below inside of the main_col div.



10 WordPress Theme You Probably Won't Forget
Posted in Articles, by Marcell, on May 5th | 19 comments



vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.

Read More

Note: Copy and paste the code above 4 times.

Step 7

Now it’s time to create our sidebar. For the sidebar I used an unordered list for advertising since most people want to run ads on their blog. Copy & paste the code below inside of the main_col div.


Sponsors







Advertise here



Flickr

Step 8

For the last html markup we will now add the footer


Copyright 2009 Your Website.com All rights reserved

Step 9

Here is the final HTML code.

Home
Articles
Photoshop
Resources
Flash
Freebies

10 WordPress Theme You Probably Won't Forget

Posted in Articles, by Marcell, on May 5th | 19 comments

vitae mattis turpis nunc sed lectus. Integer vitae massa nisi, sed adipiscing enim. Etiam semper suscipit nunc, vel condimentum elit mollis ut. Duis scelerisque lacus quis dui sodales tincidunt. Nulla consectetur imperdiet eros vitae vestibulum.

10 WordPress Theme You Probably Won't Forget

Posted in Articles, by Marcell, on May 5th | 19 comments

10 WordPress Theme You Probably Won't Forget

Posted in Articles, by Marcell, on May 5th | 19 comments

10 WordPress Theme You Probably Won't Forget

Posted in Articles, by Marcell, on May 5th | 19 comments

Step 10

Now it’s time to style our HTML. We will begin by linking our stylesheet with our HTML document. Place the following code in the head section of the HTML.


Step 11
First let’s add our css reset into the top part of our stylesheet.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: '';
}
a, ins {
text-decoration: none;
}

Step 12
Now lets add our basic typography into our stylesheet.
.clear							{ clear:both; }
a,a:hover,a:visited				{ color:#b8bab6; }
p							   { line-height:18px; }

Step 13
Ok we will now style our main divs.


body							{ background: #72434d url(images/body-bg.jpg) repeat-x ; font-family:arial; }
#Container						{ width:972px; margin:0 auto; }
#header							{ width:972px; margin:auto; }
#logo							{ width:317px; height:98px; background:url(images/logo.jpg); }
#main_col						{ width:640px; float:left; padding:15px; font-family:arial; }
#main_col p						{ font-size:12px; text-align:left; padding-bottom:2em }

Step 14
It’s time to style the navigation.


/*
Navigation
*/
#main_nav						{ float:left; margin:10px 0 21px 0;}
#main_nav li						{ display:inline; font-weight:bold; font-size:12px;}
#main_nav li a					{ color:#fff;}

Step 15
Post_break>The code below will style our post.


/*
Post
*/
.post_break						{ float:left; margin:10px 0 10px 0; }
.post_break h2					{ color:#222226; font-family: arial; font-weight:bold; font-size:24px; }
#post_text						{ padding:40px 0; font-size:12px; font-family:arial; }
#post_info						{ background:#000; float:left; color:#fff; font-size:12px; padding:5px;  margin:5px 0 5px 0;}
#post_info p						{ padding:0;}
#post_thumb						{ float:right;}
a.post_more						{ font-size:12px; color:#fff; float:right; margin-right:20em;}

Step 16
adverts This will style the code thumbnails in our sidebar


/*
Adverts
*/
#adverts						{ margin:0 0 0 10px;}
#adverts li						{ display:block; float:left; margin:5px 5px; }
#adverts 						{ }
#adverts						{ }
#flickr							{ margin:10px 0 0 10px;	}
#flickr li 						{ display:block; float:left; margin:5px;}

Step 17
sidebar This will style out sidebar and sidebar headings


/*
sidebar
*/
#sidebar						{ width:290px; float:right; background:#000;  }
#sidebar  h2						{ color:#fff; font-family: arial; font-weight:bold; font-size:31px; background:#71434b; padding:5px; margin:30px 40px 0 0; }
.side_more						{ font-size:12px; color:#fff; margin:0 15px; float:right;}

Step 18
footer The final code below will style our wonderful, but simple footer.


/*
Footer
*/
#footer							{ margin: auto; background:#000; height:50px; color:#fff; text-align:center; font-size:12px; font-weight:bold; }
#footer p						{ padding:15px;}

Here is the final css code! Hope this tutorial helps. Please leave comments giving feedback
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: '';
}
a, ins {
text-decoration: none;
}

/*---------------------------------------------------------------Code starts--------------------------------------------------------------------------------------*/
.clear							{ clear:both; }
a,a:hover,a:visited				{ color:#b8bab6; }
p								{ line-height:18px; }

body							{ background: #72434d url(images/body-bg.jpg) repeat-x ; font-family:arial; }
#Container						{ width:972px; margin:0 auto; }
#header							{ width:972px; margin:auto; }
#logo							{ width:317px; height:98px; background:url(images/logo.jpg);}
#main_col						{ width:640px; float:left; padding:15px; font-family:arial;}
#main_col p						{ font-size:12px; text-align:left; padding-bottom:2em}

/*
Navigation
*/
#main_nav						{ float:left; margin:10px 0 21px 0;}
#main_nav li						{ display:inline; font-weight:bold; font-size:12px;}
#main_nav li a					{ color:#fff;}

/*
Post
*/
.post_break						{ float:left; margin:10px 0 10px 0; }
.post_break h2					{ color:#222226; font-family: arial; font-weight:bold; font-size:24px; }
#post_text						{ padding:40px 0; font-size:12px; font-family:arial; }
#post_info						{ background:#000; float:left; color:#fff; font-size:12px; padding:5px;  margin:5px 0 5px 0;}
#post_info p						{ padding:0;}
#post_thumb						{ float:right;}
a.post_more						{ font-size:12px; color:#fff; float:right; margin-right:20em;}

/*
Adverts
*/
#adverts						{ margin:0 0 0 10px;}
#adverts li						{ display:block; float:left; margin:5px 5px; }
#adverts 						{ }
#adverts						{ }
#flickr							{ margin:10px 0 0 10px;	}
#flickr li 						{ display:block; float:left; margin:5px;}

/*
sidebar
*/
#sidebar						{ width:290px; float:right; background:#000;  }
#sidebar  h2						{ color:#fff; font-family: arial; font-weight:bold; font-size:31px; background:#71434b; padding:5px; margin:30px 40px 0 0; }
.side_more						{ font-size:12px; color:#fff; margin:0 15px; float:right;}

/*
Footer
*/
#footer							{ margin: auto; background:#000; height:50px; color:#fff; text-align:center; font-size:12px; font-weight:bold; }
#footer p						{ padding:15px;}

PSD to WordPress Series Part 1

Marcell Purham — Tue, 11 Aug 2009 16:42:52 +0000

Download Final

Here’s what we’re going to create today! Click image to enlarge

Step 1

Create new document 1170px x 1200px, background pink/redish ( #71434b ).

Note: I am using a Photoshop grid system, 100px from left, and 55px from right leaving 970px in the middle.

Step 2

Select color black ( #000) and create a rectangle 50px from the top

Note: Arial font, 12px, bold and color#7ecffd is the font used for top menu

Step 3

Select the type tool and create the following ( double click when type tool is preset for header lines )

Step 4

Now let’s create a heading. size 60px, color dark purple ( #222226 )

Note: Font I used for heading is headline one( dafont.com )

Note: I will not go through details on post sections considering you should have experience with Photoshop if you’re reading this tutorial

Step 5

Next we will create our post area. ( post area is 660px wide )

Note: Here’s and example of what the post area should look like

Post heading: Arial bold, 24px, color dark gray ( #222226 )
Post information: Arial, 12px color white ( #fff ), Link color ( #b8bab6 )
Post Excerpt: Arial, 12px, color dark gray ( #222226 )
Post Thumbnail: width: 204px x Height: 193px
More Link: Arial, 12px, color white ( #fff )

Note: sidebar is 298px wide, leaving 10px between the sidebar and post area

Step 6

Let’s create a sidebar for our mockup. Select the rectangle tool color black ( #000 ) and create a rectangle from top to bottom

Step 7

Select the rectangle tool and create a box like the one below. Then select the type tool and create headings

Note: Sidebar headings : Arial, 31px, bold, color white ( #fff )

Step 8

Now let’s add some real ads to our mockup. Google search “ad 125×125″ and add 4 ads to mockup

Step 9

Ok let’s add some flick photo’s ( 9 pictures, 75px x 75px )

Step 10

Now we will add a footer area to the bottom of the page. Press ctrl+alt+c or Image>Canvas size. Select the top arrow and change the height to 1250px

Note: You should now have a open space at the bottom of the mockup that has no color. Select your main background layer, then select the paint bucket in fill in the background. color black ( #000 )