How to create a WordPress theme from scratch

by Small Potato of Wpdesigner.com

Part 1 - How to Design a WordPress Theme

Following this part of my book is optional because the design is very simple. This part simply shows you what the design process looks like. Whether to follow it is up to you. TOOLS: You ll need to install Photoshop or !imp. " will be using Photoshop version #.$. "f you mess up during any of the follow steps% simply go to Edit > Undo. For support% visit http:&&www.wpdesigner.com&forums& . Sign up for an account, wait for the confirmation email. (It might be in the junk mail folder.) "ncluded with this part of the tutorial are screenshots taken while " was writing the following instructions. They re in the 'screenshots( folder. Start with $$).png. Step 1: *pen Photoshop. Start a new file. +se the following guidelines:

Preset Si,es: -ustom Width: ..$ pi/els

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

2eight: 3$$$ pi/els 4esolution: #0 pi/els&inch 5ode: 4!6 color -ontents: Transparent !o to File 7 Save or File 7 Save as... 8" named it 'wrath.(9

:/planation8s9:

-reating a new file is like creating a new canvas. Width ..$ pi/els and 2eight 3$$$ pi/els are how wide and long your canvas is going to be. #0 pi/els&inch for 4esolution actually means #0 dots per inch 8dpi9. *ne dot on your computer screen e;uals one pi/el. #0 is for website images. 83$$ is ideal for printing images.9 4!6 is 4ed% !reen% and 6lue. <o yellow. That s the language of computers. Trasparent contents basically means we ll start from scratch with this new canvas% no prefilled background color% nothing.

4esult8s9:

1 toolbard% some bo/es% one of them is labeled Layers. To keep your workstation clean and simple% you may close all bo/es other than =ayers by clicking on the button at the top right corners of the bo/es.

Step !: =ook at your toolbar. Find the two colored bo/es. -lick on the top bo/. That s the foreground color bo/. -hange your foreground 8the top colored bo/9 to White or >FFFFFF. :/planation8s9:

>FFFFFF or >ffffff is a he/ code meaning white. "n Photoshop and while coding% all colors have a specific he/ code. 2e/ codes range from >ffffff% >eeeeee% >dddddd% >cccccc% >bbbbbb% >aaaaaa% >......% and >??????% to >######% >@@@@@@% >AAAAAA% >BBBBBB% >333333% >000000% >))))))% and finally >$$$$$$ 8black9. The first two digits represent 4ed. The third and fourth digits represent !reen. The fifth and si/th digits 8that s right9 6lue. You re getting the hang of this aren t youC 2ence% >ff$$$$ is 4ed. >$$ff$$ is !reen. >$$$$ff is 6lue.What% no yellowC -alm down. >ffff$$ is Yellow% a combination of 4ed and !reen.

Step ": While holding down #$t% press the %ac&space key to fill the whole canvas with the color white. Step ': Step 0 and 3 were warm ups. -hange your foreground to >ededed and do #$t ( %ac&space again. 4esult8s9 and :/planation8s9:

=ayer one is now filled with a light gray background color. While designing% your canvas will be made up of multiple layers.

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

Step ): -reate a new layer. You can do that by:

-licking on the *reate a +ew Layer button% located at the bottom of the Layers bo/. *r% go to Layer > +ew > Layer,,, *r% press and hold down Shft ( *tr$ ( +.

4esult8s9:

You end up with two layers with the newest layer being labeled Layer !.

Step -:

Your Layer ! should be the selected layer. 6ut to make sure Layer ! is selected% you can do that by clicking on Layer !. 1t the toolbar% click on the .ectang/$ar 0ar1/ee Too$. 1t the top% select 2i3ed Si4e as the value for Sty$e, :nter 567 p3 for width% "777 p3 for height. !o back to your canvas% click anywhere to make a .?$ p/ by 3$$$p/ selection. Fill that selection with the color white 8>ffffff9 <ow click on the same spot to deselect. "f it doesn t deselect then go back to Style and select <ormal instead of Fi/ed Si,e. <ow% try to click somewhere% anywhere% to deselect.

4esult8s9:

p/ D pi/el *n Layer !% now you have a large white rectangle that fills the entire height of the your canvas and almost the full width too. You will be using the 4ectangular 5ar;uee Tool a lot. "nstead of trying to guess where you should start and stop making the selection of the 5ar;uee tool% you selected 2i3ed Si4e to let Photoshop do it for you. 1ll you had to do was press down to make a perfect .?$ / 3$$$ selection. .?$ p/ is the overall width of the design. +sually% you have to figure out what the overall width of the design or layout is going to be% before designing. Since " previously created the design for this tutorial% " already know what the overall width si,e would be.

Step 8: -entering the white rectangle. This step re;uires the help of Layer 1.

-lick on Layer 1 -lick on the empty space ne/t to the Layer ! eye icon 8linking the layers together9. !o to Layer > #$ign Lin&ed > Hori4onta$ *enters +nlink the layers by clicking on the Layer ! link <ow click on =ayer 0 to select it.

4esult8s9 and :/planation8s9:

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

Your rectangle is now centered. 1lthough this step isn t really necessary% it s best to stay organi,ed. 1lso% now you have a balanced canvas to work on.

Step 6: -reate .?$ by A pi/el black border at the top

-reate a new layer% Layer ". Notice: If you had Layer !elected, the newly created Layer " would !how up on top of Layer in!tead of on top of Layer #. Sometime! layer! will get out of order, but you can alway! click and hold on a certain layer to mo$e it in order to reorgani%e. -hange the foreground to >$$$$$$ 8black9 Select the .ectang/$ar 0ar1/ee Too$ -hange Fi/ed Si,e values to Width 9 567 p3% Height 9 )p3 !o back to the canvas and click anywhere to make the selection Fill that selection with the color black Switch back to <ormal from Fi/ed Si,e. <ow click anywhere on the canvas to deselect. -lick on Layer ! to select it =ink it to Layer " !o to Layer > #$ign Lin&ed > Hori4onta$ *enters <e/t% go to Layer > #$ign Lin&ed > Top Edges +nlink Layer ! and Layer " -lick on =ayer 3 to select it

4esult8s9 and :/planation8s9:

You should now have a .?$ p/ by A p/ black border on top of the white rectangle. +nlike the last alignment for the white rectangle on =ayer 0% the alignment for the black border was a must.

:U;*< .E=;EW:

You have 3 layers. =ayer ) is the background% filled with the color >ededed. =ayer 0 has a white rectangle% .?$ p/ in width and 3$$$ p/ in height. =ayer 3 has a black border% .?$ p/ in width and Ap/ in height. You ve learned how to: change foreground colors% create new layers% link layers together% make Fi/ed Si,e selections% fill selections with colors% and align elements.

Step 5: 1dd a blog title

While Layer " is the selected layer% create a new layer% Layer ' Select the Hori4onta$ Type Too$ 5ake sure your type settings are >eorgia% .eg/$ar% 16 pt% and +one. *n Layer '% click anywhere near the black border and start typing '%$og Tit$e( -lick on Layer ! 8not =ayer 39% link it to the %$og Tit$e $ayer. !o to Layer > #$ign Lin&ed > Left Edges !o to Layer > #$ign Lin&ed > Top Edges <ow% unlink Layer ! and %$og Tit$e.

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

-lick on the 6log Title to select it Select the 5ove Tool. You won t actually use it. 5ake sure the Show 6ounding 6o/ option is checked. With the 5ove Tool selected% press the down arrow button 8on your keyboard9 ). times. This is called nudging. <ow% nudge it to the right )$ times 8the right arrow button9

4esult8s9:

For the first time% you have a new layer that does not have a number. "nstead% it s labeled %$og Tit$e% based on the te/t that you typed. *n that layer% you have two words that are )B p/ 8pi/els9 away from the bottom edge of the black border of =ayer 3 and )$ p/ away from the left edge of the rectangle of =ayer 0.

:/planation8s9:

>eorgia is the font family. "f you selected something else like 1rial% your blog title would look different. .eg/$ar is the font weight or style of the words & te/ts. You can use regular% bold% italic% or bold italic together. Pt in )? pt is how Photoshop measure font si,e. 1 lower or higher number will give you smaller or bigger words & te/ts. +one is another font style. You can try out Smooth to see the difference% but remember that it doesn t work that way while coding your design. Without using advance techni;ues% web pages in general cannot display Smooth words & te/ts.

Step 17: 1dd a thin border

-reate a new layer. <otice% it s Layer ' again. YayE -hange foreground color to ?ededed Select the Sing$e .ow 0ar1/ee Too$. While clicking on the 5ar;uee Tool button% hold it down for the Single 4ow 5ar;uee option. With Sing$e .ow 0ar1/ee Too$ and Layer ' selected% click anywhere on the canvas to make a very thin selection. That selection is 557 p3 in width and 1 p3 in height. 1fter making the selection% press #$t ( %ac&space to fill that selection with the ?ededed color. Switch back to the .ectang/$ar 0ar1/ee Too$ -lick anywhere on the canvas to deselect. You will see a new 1 pi3e$ gray line. From the Toolbar% select the @oom Too$. Foom in on the gray line. Switch to the 5ove Tool and nudge it up to the bottom edge of the blog title. <ow% nudge it back down )0 times.

4esult8s9 and :/planation8s9:

1 thin% gray line that covers the entire width of the canvas% on =ayer B. You had to nudge up then back down )0 times because you need to know e/actly how many

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

pi/els are in between... everything. Gnowing the e/act measurements is key. Step 17,!: 1dd a hori,ontal menu of links

With Layer ' selected. create a new layer% Layer ) -hange foreground color to ?888888 Select the Hori4onta$ Type Too$ -hange the settings to >eorgia% .eg/$ar% 1'pt% and +one *n Layer )% click anywhere on the canvas to start typing. Type whatever you want% but make sure you type at least 3 to B words. 1dd si/ spaces 8spacebar on keyboard9 in between each word. -lick on Layer ! and link it to the men/ $in&s $ayer. +nlike the two layers. -lick on the men/ $in&s $ayer to select it. <ow ,oom in 8@oom Too$9% switch to 0oAe Too$% and nudge it up to the bottom edge of the gray line. <udge it back down )3 times. <udge it to the right )$ times.

4esult8s9 and :/planation8s9:

<ow you have a hori,ontal menu of 3 to B links & items that look evenly spaced. 1ll the nudging and spacebars in between each word are all to imitate how it s going to look like when it gets coded.

Step 17,": -reate another thin line and place it )0 pi/els under the bottom edge of the menu links

-reate a new layer. *nce again% it s Layer ) -hange foreground color to >cccccc 5ake another Sing$e .ow 0ar1/ee selection Press and hold #$t ( %ac&space to fill it with color Switch to the .ectang/$ar 0ar1/ee Too$. 5ake sure you re using +orma$ instead of 2i3ed Si4e. -lick anywhere on the canvas to deselect. <ow% use the .ectang/$ar 0ar1/ee Too$ to select everything of Layer ) that is outside of the white rectangle. You re using the white rectangle of Layer ! as a guide for where you should make the selection% but you re actually still working on Layer ). Start near the left edge of the white rectangle. -lick and drag the selection to the edge or the canvas. 1fter making the selection% press the %ac&space button to delete the selected area of the gray line of Layer ). !o to the right edge of Layer ) and do the same thing. To deselect% press and hold *tr$ ( D or click somehwere on the canvas while the 4ectang/$ar 0ar1/ee Too$ is selected. Select @oom Too$ to ,oom in Switch to 0oAe Too$

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

<udge the >cccccc gray line to the bottom edge of the menu links <udge it back down )0 times.

4esult8s9 and :/planation8s9:

You have another gray line that is a little bit darker. >cccccc instead of >ededed. <otice% the further you move away from >ffffff the darker it gets. +nlike the last gray line% this line is .?$p/ in width. You had to delete the edges of this gray line because they did not match the background color of =ayer ).

:U;*< .E=;EW:

You have # layers =ayer ): background color >ededed =ayer 0: white rectangle =ayer 3: .?$ p/ width% Ap / height black border at the top 6log title layer: '6log title( =ayer B: ..$ p/ width% ) p/ height >ededed gray line 5enu links layer: 8Your words & menu links or items here.9 :ven spaced links with @ spaces or spacebars in between each link. =ayer A: .?$p/ width% ) p/ height >cccccc gray line

Step 11: 1dd another line using the color >Af$$$$. You should be able to do this step on your own.

-reate a new layer% Layer 5ake a Sing$e .ow 0ar1/ee selection under the last gray line Fill it with >Af$$$$ Helete the edges. =ine it up under the bottom edge of the gray line if you haven t already done so

Step 11,1: 1dd a 567 p3 widthIwise and '7 p3 heightIwise ?cc7777 filled bo/ & selection.

-reate a new layer% Layer 8 -hange foreground color to ?cc7777 Select .ectang/$ar 0ar1/ee Too$ Switch setting to 2i3ed Si4e% .?$ p/ for width% B$ p/ for height With Layer 8 selected% click anywhere on the canvas to make the selection Press and hold #$t ( %ac&space to fill it with ?cc7777 Press and hold *tr$ ( D to deselect or switch from 2i3ed Si4e to +orma$ and then click anywhere on the canvas to deselect. Select the 0oAe Too$ and click on Layer ! =ink Layer ! and Layer 8 !o to Layer > #$ign Lin&ed > Left Edges +nlike the two layers and click on Layer 8 Switch to the 0oAe Too$

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

Press and hold down the Shift button on the keyboard and move the red bo/ up to the bottom edge of the >fA$$$$ line

4esult8s9 and :/planation8s9: You have one new >Af$$$$ line and a new .?$ by B$ red bo/. =ater on 8during coding9% the red bo/ will be used for blog description. For Step ))% " made you make a ..$ by ) selection by using the Single 5ar;uee Tool instead of using Fi/ed Si,e 8.?$ by )9 of the 4ectangular 5ar;uee Tool because " wanted you to learn how to delete too% not Just how to make selections and fill them with color. Step 11,!: 1dd a 567 By 17 >e@$$$$ rectangle under the red bo/.

With Layer 8 selected% create a new layer% Layer 6 -hange foreground color to ?e-7777 Select the .ectang/$ar 0ar1/ee Too$ -hange setting to 2i3ed Si4e 8if you haven t already9% WidthC 567 p3D HeightC 17 p3 -lick anywhere on the canvas to make the selection. "f it s not at the right place% nudge your selection left or right and up or down until it s right up against the bottom edge of the red bo/. Press and hold down #$t ( %ac&space to fill it with the ?e-7777 color

4esult8s9 and :/planation8s9:

Yet another rectangle. 6ut this time% you learned how to nudge the selection before filling it with color. 1gain% " m trying to show you all the different ways that you can make e/act selections at the e/act locations.

Step 11,": 1dd another line under the .?$ by )$ bright red rectangle% but this time we ll do something a little different.

=eft click on Layer <ow% right click on =ayer @ Select D/p$icate Layer,,, 1fter duplicating it% move the Layer - copy above Layer 6 by clicking and dragging it above =ayer ? With Layer - copy selected% switch to the 0oAe Too$, 8You might have to ,oom in first.9 5ove the >Af$$$$ line of Layer - copy down% under the .?$ by )$ rectangle of Layer 6.

4esult8s9 and :/planation8s9:

Your blog description area is now complete. You have a .?$ by ) >Af$$$$ at the top% followed by a .?$ by B$ red bo/ 8>cc$$$$9% followed by a .?$ by )$ bright red rectangle 8>e@$$$$9 that is followed by another .?$ by ) >Af$$$$ line% which is a duplicate of the first line. Huring coding% all thin lines will be borders.

Step 1!: -reate a 567 p3 By )p3 B$ac& Border under the blog description area. You should be able to

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

:1S"=Y do this on your own% but here s the shortcut:

4emember Step ?C Huplicate Layer "% move the Layer " copy above the Layer - copy Switch to the 0oAe Too$ and move the black border of Layer " copy under the blog description area. Press and hold the Shift key while you re moving the black border so you don t have to worry about align it left or right again.

4esult8s9 and :/planation8s9:

You created a new .?$ by A black border by duplicating =ayer 3. You should now have )0 layers all together. 84emember to save periodically% if you haven t already% go to File 7 Save or File 7 Save as...9

Step 1": -reate a vertical dotted pattern

-reate a new file% 2i$e > +ew or press and hold *tr$ ( +. The settings for the new file should be WidthC 1 pi3e$sD HeightC ! pi3e$s. :verything else should be the same as the first file you created. ) by 0 is very small. You can t work with that so ,oom in until you can t anymore. -hange foreground color to black% ?777777, 1t the Toolbar% select the Penci$ Too$. -lick and hold on the %r/sh Too$ button until you get the Pencil option. 5ake sure the pencil options are set to 1D 0odeC +orma$D OpacityC 177E +se the Penci$ Too$ to click on the top pi/el to make one black dot !o to Edit > Define Pattern,,, 1 window will popup. <ame your pattern or go with the default that it gives you. " named it Hotted Kertical. You can now close that new file without saving it.

4esult8s9 and :/planation8s9:

You ve created a ) p/ by 0 p/ dotted vertical pattern which you ll use in the ne/t steps.

Step 1': 6ack to the original file you were working on% separate the rest of the white rectangle space into three columns. First column is '66 pi3e$s wide% height doesn t matter. 1ll you need is the width to space the columns evenly.

With the Layer " copy layer selected% create a new layer% Layer 5 Select the .ectang/$ar 0ar1/ee Too$: 2i3ed Si4eD WidthC '66 p3D HeightC !)7p3 8or whatever the height you want9 -lick anywhere on the canvas to make the selection <udge it to the left edge of the white rectangle and to the bottom edge of the second Ap/ black blorder Fill it with >cccccc Heselect

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

-reate a new layer% Layer 17 5ake a !') p3 By !)7 p3 selection to the right of the rectangle of Layer 5. 5ake sure there s one empty pi/el space in between the >cccccc rectangle and your new selection. Fill it with ?cccccc Heselect Huplicate Layer 17 +se the 0oAe Too$ to move the rectangle of Layer 17 copy to the right. 1gain% make sure there s one empty pi/el in between the two rectangles.

Step 1): +se the vertical dotted pattern for the space in between the columns

-reate a new layer% Layer 11 Select the Sing$e *o$/mn 0ar1/ee Too$. Hon t confuse this with the Single 4ow tool. *n Layer 11% with the Sing$e *o$/mn 0ar1/ee Too$% go to the first empty one pi/el space% click on it to make a selection. Hon t fill it with anything yet. While that space is still selected% go to the top of the page and click on the #dd to se$ection button <ow% go to the second one pi/el empty space% in between the second and third rectangle% click on that space to add on to your selection. You should end up with two Single -olumn selections. !o to Edit > 2i$$ 1 window will pop up% select the dotted vertical pattern you created earlier Heselect. You should see two 1-pi3e$ columns that are filled with black dots. -lick on the eyes ne/t to layers: 5% 17% and 17 copy to hide them. 1ll you should see now are the two columns of black dots running up and down the whole canvas without the >cccccc rectangles. Switch from #dd new se$ection,,, to +ew se$ection While Layer 11 is selected% delete the e/cess black dots. Ho this by making a selection from the bottom edge of the A p/ black border to the top edge of the canvas% then press backspace to delete the e/cess dots Heselect

Step 1),!: -hange color for the vertical dotted pattern

-lick on Layer 11 while you press and hold down the *tr$ key. Two colums of selections will show up. Fill those selections with >cccccc

4esult8s9 and :/planation8s9:

<ow you have two columns of dotted >cccccc pattern that don t overlap the blog description% menu links% and blog title areas. The dotted pattern creates the illusion that the white rectangle has been divided into three

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

columns. Your main content area is B?? p/ in width. Your sidebars are 0BA p/ each. Plus two )Ipi/el columns of dotted patterns% that adds up to .?$ p/.

Step 1-: -reate a hori,ontal dotted pattern. You should be able to do this on your own there will be no screenshots to go along with this step.

-reate a new file% 2i$e > +ew or *tr$ ( +% WidthC ! pi3e$sD HeightC 1 pi3e$s. :verything else should match the first two files you created. Foom in so you can work with this small canvas -hange foreground color to black +se the pencil to color the first or left pi/el !o to Edit > Define pattern,,,% name your pattern or go with the default it gives you -lose this pattern file without saving.

4esult8s9 and :/planation8s9:

1dding on to your collection of patterns is a hori,ontal dotted pattern. Similar to the vertical dotted pattern% when used% this pattern will skip every other pi/el to make a dotted line.

Step 18: -reate the background for back and forth navigation links.

With Layer 11 selected% create a new layer% Layer 1! Select the .ectang/$ar 0ar1/ee Too$C 2i3ed Si4eD Width 9 '-6 p3D Height 9 "- p3 *n Layer 1!% click anywhere on the canvas to make the selection% preferrably near the middle of the first column. -hange foreground to ?fdfBe8 Press and hold #$t ( %ac&space to fill the selection with >fdfbe# Heselect -lick on the hidden Layer 5 while holding down the *tr$ key to load its selection. 6ut notice% you re still working on =ayer )0 !o to Se$ect > 0odify > *ontract -ontract by: 17 pi3e$s !o to Layer > #$ign To Se$ection > Top Edges !o to Layer > #$ign To Se$ection > Left Edges Heselect

4esult8s9 and :/planation8s9:

<ow% the bo/ on =ayer )0 looks like it has a )$Ipi/el padding all around it. 1gain% all you re doing is laying everything out to see what the design in your head actually looks like before you code it. 5ost of this is unneccessary. 2owever% it s a must for more complicated designs or layouts that re;uire lots of grahpic design.

Step 16: 1dd border and hori,ontal dotted pattern on top of the navigation links background

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

With Layer 1! selected% create a new layer% Layer 1" Foom in to make a '-6 By 1 selection. This selection should be right on top of the first pi/el of =ayer )0 s rectangle. "f you can t get it right% nudge your selection until it lines up to the left edge of the rectangle and overlaps the rectangle s first top pi/el. -hange foreground color to ?e7dcB6 Press and hold #$t ( %ac&space to fill that selection with the >e$dcb? color DonFt dese$ect 1fter filling the selection with color% nudge it down to the bottom of the rectangle. DonFt dese$ect -reate a new layer% Layer 1' !o to Edit > 2i$$% select the hori,ontal dotted pattern -lick on Layer 1' while you re holding down the *tr$ key. The selection will change from selecting the whole B@? by ) line to selecting only the black dots -hange foreground color to ?cfcBa!

Step 15: 1dd navigation link title

With Layer 1' selected% create a new layer% Layer 1) -hange foreground color to ?cc7777 Select the Hori4onta$ Type Too$ Font settings: =erdana% .eg/$ar% 1!pt% and +one -lick on your canvas% somwhere near the rectangle you created in Step )? Type 'O$der posts( -lick on Layer 1! while you hold down the *tr$ key to load its selection !o to Se$ect > 0odify > *ontract. -ontract it by 17 pi3e$s !o to Layer > #$ign To Se$ection > =ertica$ *enters !o to Layer > #$ign To Se$ection > Left Heselect

4esult8s9 and :/planation8s9:

<ow you have a navigation bo/ and link to back to '*lder posts(

Step 15,!: Put layers: 1!% 1"% 1'% and O$der posts in a layerset & folder

With the layer 'O$der posts( selected% click on the *reate a new set icon Starting with the GO$der postsH $ayer and then Layer 1' and so on...drag all the layers listed at the beginning of this step into this new layerset & folder -lick to the layerset folder icon% there s an arrow pointing down. -lick on it to collapse the layerset. The arrow should now point towards the folder icon.

:/planation8s9:

This step was for organi,ation. You ll be adding on more and more layers. "t s better to start organi,ing now than later.

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

Step !7: For the content area% create a dummy post that includes post title% date stamp% te/t% and author listing% category listing% and comments number

With the Set 1 $ayer set selected% create a new layer% Layer 1) 8again9 -hange foreground color to ?777777 8black9 Select the Hori4onta$ Type Too$ Font settings: >eorgiaD .eg/$arD !' pt% and +one -lick on start typing anything you want. -lick on the hidden Layer 5 while you hold down the *tr$ key to load its selection !o to Layer > #$ign To Se$ection > Left Edges Heselect Switch to using the 5ove Tool <udge the te/t up to the bottom edge of the navigation link rectangle <udge it back down 0$ times <udge it to the right 0$ times -reate a new layer% it s Layer 1) again -hange the foreground color to ?-----Select the Hori4onta$ Type Too$ Font settings: =erdanaD .eg/$arD 1!ptD and +one -lick and type '#/g/st 78D !778( or another date with month% day% and year in that order -lick on the hidden Layer 5 while holding down the *tr$ key to load its selection !o to Se$ect > 0odify > *ontract. -ontract by "7 pi3e$s !o to Layer > #$ign To Se$ection > Left Edges Heselect <udge it up to the bottom edge of the post title <udge it back down 0$ times -reate a new layer% Layer 1)... again -hange foreground color to ?777777 Select the Hori4onta$ Type Too$ Font settings: =erdanaD .eg/$arD 1! ptD and +one !o to Windows > *haracter. 1 small window will pop up. *n the right column% change the second top bo/ value to !' pt You can now close that window. -lick anywhere on the canvas to start typing% preferrably near to the first column. What you want to do is stay within that column. That means estimating where you will hit the :nter key for line breaks. -lick on the hidden Layer 5 while holding down the -trl key to load its selection. !o to Layer > #$ign To Se$ection > Left Edges Heselect Switch to using the 0oAe Too$% nudge your paragraphs up to the bottom edge of the date <udge it back down 0$ times Switch back to the Hori4onta$ Type Too$ and click anywhere on your paragraphs of te/ts !o the end of the paragraphs% hit :nter twice. Type: %y admin I Posted in Uncategori4ed I *omments J7K

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

-lick and highlight 'admin( -hange its color to ?cc7777 4epeat those steps for 'Uncategori4ed( 4epeat those steps for '*ommentsJ7K(

4esult8s9 and :/planation8s9:

<ow you have a post title% date stamp% two paragraphs of content% and the post meta area% which was the last line that you typed. You changed the colors of the 'admin%( '+ncategori,ed%( and '-omments 8$9%( to indicate that they are links.

Step !1: Put all dummy post layers in a folder

-reate a new set Put the last three te/t layers into that set & folder -ollapse that set by clicking on the arrow ne/t to the folder icon

Step !!: -reate and organi,e the second set of dummy post layers

=ef click on Set 0% right click on it% select D/p$icate Layer Set,,, +se the 5ove Tool to move the duplicated 8second9 dummy post layers to the bottom. <udge it up to the bottom edge of the last set of dummy post layers <udge it back down B$ times. )% 0% 3% B% A...)% 0% 3% B% A. That s what " do.

4esult8s9 and :/planation8s9:

<ow you know how each blog post looks like and how multiple posts listing look like.

Step !": 1dd another navigation links rectangle

=eft click on Set 1% right click on it and select D/p$icate Layer Set,,, =eft click on the duplicated layer set% drag it above the Set ! copy set +se the 0oAe Too$ to drag the duplicate navigation links set to the bottom <udge it back up to the bottom edge of the second dummy post layers <udge it back down 0$ times

4esult8s9 and :/planation8s9:

<ow you have two sets of navigation or back and forth links. You could even call it pagination links. !o figure. +sually% there s only one set of navigation links% but it s better to use two sets so users can easily move through your blog.

:U;*< .E=;EW:

<ow you know how to ma&e se$ections% /se the 0oAe Too$% n/dge% co$or% create $ayersets%

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

$oad se$ections of hidden $ayers% and everything else you need to know. We re going to move ;uickly through the last few steps to create dummy content for the two right columns & sidebars. Step !': -reate the sidebar title background and borders

*n top of Set 1 copy% create a new layer% Layer 16 Select .ectang/$ar 0ar1/ee Too$ Settings: 2i3ed Si4eD WidthC !!) p3D HeightC "- p3 5ake selection in the second column area -hange foreground color to ?f6f6f6 #$t ( %ac&space to fill the selection Heselect -lick on the hidden Layer 17 while holding down the *tr$ key to load its selection !o to Se$ect > 0odify > *ontract. -ontract by 17 pi3e$s !o to Layer > #$ign To Se$ection > Top Edges !o to Layer > #$ign To Se$ection > Left Edges -reate a new layer% Layer 15 Foom in and make a !!) p3 By 1 p3 selection on top of the first pi/el of the rectangle of =ayer )?. <ote: You re still working on =ayer ).. -hange foreground color to >dfdfdf and press 1lt L 6ackspace to fill the selection <udge the selection down the the bottom edge of the gray rectangle -reate a new layer% Layer !7 !o to Edit > 2i$$. Select the hori,ontal dotted pattern. =ef click on =ayer 0$ while holding down -trl to load the selection of the dotted pattern -hange foreground color to >cccccc. 1lt L 6ackspace to fill the selection% which changes the color of the dotted pattern Heselect

Step !): 1dd first sidebar title

-reat a new layer% Layer !1 -hange foreground color to ?777777 Select the Hori4onta$ Type Too$. Font settings: >eorgiaD %o$dD 1- ptD and +one. To change the font si,e to 1- pt% don t click on it for the drop down list. -lick on the font si,e bo/ until you can delete the font si,e and type in your own. Type '*ategories( Left c$ic& ( *tr$ on Layer 16 to load its selection !o to Se$ect > 0odify > *ontract. -ontract by 17 pi3e$s !o to Layer > #$ign To Se$ection > =ertica$ *enters Layer > #$ign To Se$ection > Left Edges Heselect

Step !-: 1dd dummy links list

-hange foreground color to ?cc7777

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

Select Hori4onta$ Type Too$. Settings: =erdanaD .eg/$arD 1! ptD +oneD Line heightC !' pt -reate a new layer% Layer !1 again -lick on the canvas% somewhere near the sidebar title rectangle Start typing anything you want. You re trying to layout sidebar links. 2ow many links and lines is up to you. There s no need to do much. " d go with B to A links & lines. Left c$ic& ( *tr$ on Layer 17 to load its selection -ontract by !7 pi3e$s Layer > #$ign To Se$ection > Left Edges Heselect Switch to 0oAe Too$ and nudge it down )3 times from the bottom edge of the sidebar title background rectangle

Step !8: -reate a new set and put all the sidebar layers in the that set & folder

-lick on *reate a new set button 5ove all the layers in that set & folder% starting with the dummy links list layer -ollapse that new set by clicking on the arrow ne/t to the folder icon

Step !6: 1dd another sidebar block

=eft click on Set "% right click on Set "% and select D/p$icate Layer Set,,, +se the 0oAe Too$ to move all the layers within the duplicates layer set down% under the first sidebar block <udge it down )A times from the bottom edge of the dummy links list

Step !5: 4epeat step 0? Step "7: 5ove the latest sidebar block to the second right column Step "1: 1dd another 567p3 By )p3 black border

=ef click on Layer " copy% right click on it% and duplicate it -lick and drag Layer " copy ! to the top of the layers list% above Set " copy ! +se the 0oAe Too$ to move the new black border down to the bottom of the canvas% 17 pi3e$s from the bottom edge of the second navigation links area

Step "!: 1dd footer te/ts and links

-reate a new layer% Layer !8 -hange foreground color to ?777777 Select Hori4onta$ Type Too$. Font settings: =erdanaD .eg/$arD 11 ptD and +one -lick somewhere under the last black border and start typing your footer message. " typed% 'Powered By WordPress, Theme By Wpdesigner( -hange the color of WordPress and Wpdesigner to ?cc7777 +se the 0oAe Too$ to nudge it up to the bottom edge of the black border <udge it back down 0$ times

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.

=eft click on =ayer 0% link it to the footer layer !o to Layer > #$ign Lin&ed > Hori4onta$ *enters +nlinkthe two layers

Step "": -ut off the rest of the white rectangle and dotted pattern

With Layer ! selected% use the .ectang/$ar 0ar1/ee Too$. -lick and drag the selection from where the black border stops to the bottom of the canvas. 2it the 6ackspace key DonFt dese$ect =eft click on =ayer )) and hit 6ackspace again to delete the e/cess vertical dotted pattern at the bottom of the canvas

THE E+D

-opyright 0$$# by Wpdesigner.com. 1ll rights reserved.