tutorialninja
free photoshop tutorials!
lovely wordpress layout
Tuesday ~ April 04, 2007 by admin Posted in Photoshop, layouts
1. create a new document that is 800 x 400 px with a white background. 2. bring up your rectangular marquee tool and create a selection that is 800 x 85 px and fill it with any color. drag it about 30px down from the top. 3. now bring up your spherical selection tool and (i used one that was 117 x 117 px) on the same layer drag your selection about 20px from the left and 15px from the top. fill with whatever color. (I have filled with red for your benefit!) 4. bring up blending options for this layer and apply: 5. you should by now have something like this: 6. ctrl+click on the current layer to make a selection, now go to select>modify>contract>2px and on a NEW layer fill it with white (#FFFFFF) change this layer to soft light and 18% opacity 7.bring up your text tool times new roman, roman, 30px, sharp, left align, white (#FFFFFF) and bold (window>character then highlight text and hit bold) 8. bring up your custom shape tool, and select shape 9. select the Leaf Ornament 3 and drag it out in the circle. 10. apply a slight gradient overlay to this new shape. from #DAD5D5 to #FFFFFF - notice the midpoint is at 16% 11. bring up the rounded rectangle tool and set the radius to 15px and set the fixed size to 89 x 49 px. rasterize this layer (layer>rasterize>layer). 12. now delete the segment of the layer below the main header. 13. apply a color overlay of white (#FFFFFF). bring up text tool and use verdana, 10px, #000000, sharp (NOT bold) 14. duplicate this layer a few times and edit to suit yourself. 15. your headers done! now to start on the main content. drag all your current layers (apart from the background) into a new layer set. 16. now duplicate this layer again, hold shift and drag it to the left hand side. 17. paste a few times too create a longer bar. 18. add text, i used times new roman, roman, 14pt, sharp and #FFFFFF (white), NOT bold 19. now, create a new layer and drag it to just above your background layer. 20. now just add demo content! have fun folks!
in this tutorial I will teach to too create a layout that is suitable for a blog or such!
a 2px stroke of white (#FFFFFF) on the outside
a gradient (linear) from #2777C2 to #42A9EA
and a outer glow like:
click the arrow as shown and select ornaments from the dropdown
drag these 2 layers (the rounded rectangle and the text layer) into a layer set (to create a layer set click the folder icon at the bottom of the layer pallet) now lower this sets opacity to 78%
duplicate this layer set (layer>duplicate layer set)
on this new layer set delete the navigation and the title text.
flatten this layer set (click the layer set and then hit ctrl+e)
now free transform (edit>free transform) and change to 30% width and 30% height. then use your move tool, hit apply the transformation.
make a selection as shown and copy (ctrl+c)
delete overlapping parts (ctrl+click on layer then click the overlapping layer and hit delete)
you should end up with something like this:
make appropriate selections and fill as shown. (I used #DDEBF7)
(the calender is from: wordpress.com
i give you permission to use this for personal uses, although a link back at the bottom is necessary. you may not sell this or pass is off as your own work. and don’t rip this tutorial, I put a lot of work into these things!
thanks guys and gals!
