Free online photoshop training

Photoshop tutorials for webdesigners

Simple website floral layout

September 14th, 2007 · No Comments

Lets create a website layout for flower related website.  Here I have not used the actual website layout size so the choose what ever size suites you.

[1]-First of all open new document of Custom size and Height & Width 500 x 500 pixels and Resolution 72 and Mode RGB Color.pun142-website-layout-rose1.gif

[2]-Now create the following selection by the help of Rectangular Marquee TOol

pun142-website-layout-rose2.gif

[3]-Now fill the selection with # D6D4F6 Color

pun142-website-layout-rose3.gif

[4]-Now go to Select>Modify>Smooth and apply the following settings and after that press ‘Delete’

pun142-website-layout-rose4.gif

[5]-Now Create the following selection with the help of Rectangular Marquee Tool

pun142-website-layout-rose5.gif

[6]-Now fill the selection with # 202335 Color & create the following selection with the help of Rectangular Marquee Tool

pun142-website-layout-rose6.gif

[7]-Now Hold Shift and create another Rectagular Shape as shown below

pun142-website-layout-rose7.gif

[8]-Now fill the selection with # 164AB8 Color and Click on sign’f’ which is indicating by Hand sign

pun142-website-layout-rose8.gif

[9]-Now select Gradient Overlay and apply the following settings

pun142-website-layout-rose9.gif
pun142-website-layout-rose10.gif

[10]-Now select Stroke Structure and use the following settings

pun142-website-layout-rose11.gif

[11]-Now your image will be look as shown below

pun142-website-layout-rose12.gif

[12]-Now create the following selection with the help of Rectangular Marquee TOol

pun142-website-layout-rose13.gif

[13]-Now fill the selection with # D6D4F6 color as shown below

pun142-website-layout-rose14.gif

[14]-Now go to Select>Modify>Smooth and use the following setting

pun142-website-layout-rose15.gif

[15]-Now your image will be look as shown below

pun142-website-layout-rose16.gif

[16]-Now create the following selection with the help of Rectangular Marquee Tool

pun142-website-layout-rose17.gif

[17]-Now Press ‘Delete’ and your image will be look as shown below

pun142-website-layout-rose18.gif

[18]-Now select Custom shape Tool and select following Rectangular Shape

pun142-website-layout-rose19.gif

[19]-Now create the following shapes with the help of Rectangle Tool

pun142-website-layout-rose20.gif

[20]-After create the following shapes, select Pen TOol and click on the following shapes & select Stroke Path

pun142-website-layout-rose21.gif

[21]-Now apply the following settings in Stroke Path

pun142-website-layout-rose22.gif[22]-After used the above settings your image will be look as shown below

pun142-website-layout-rose23.gif

[23]-Now you can take a any image as you understand better

pun142-website-layout-rose24.gif

[24]-Now press Ctrl+J for duplicate layer and fix another place with the help of Move Tool
and press Ctrl+T and Reduced the shape as shown below

pun142-website-layout-rose25.gif

[25]-Now select Text Tool and write the any Text as you wish. Finally,all settings have been completed and your final image will be look as shown below

pun142-website-layout-rose26.gif

Photoshop tutorials - Digital scrapbooking template or invitation card

Organiser badge for your community services

Pink web button image tutorial using photoshop

Tags: Web graphics

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

Leave a Comment