« Simple Html Structure | Main
Designing WebPages in Photoshop
By ramakrishna | December 19, 2006
Designing webpages in Photoshop
What elements are responsible for a website to look professional?.
Its minimal use of colors and tones from same family and the balanced layout of the page. It is best practice to make a rough layout on paper before you start designing on computer. Try how you can design differently.Refer some eye catching designs of websites. Analyze what elements are reflecting the website’s look and feel rich. Note down the Hexadecimal color codes of the site. Apply those colors in your own layout and check how the final design appears.
Slicing the Design in Photoshop
You need to slice the final design in order to insert sliced graphics and gradients in to html pages. Colors can be filled with the help of Cascading Style Sheet (CSS). For rounded corner page elements and gradients you need to slice and place them in the html pages.
Following tutorials are designed based on Photoshop CS. The step by step procedure may same for lower version of Photoshop. The menu and tool options mentioned may differ slightly with lower/higher version of Photoshop. However the tutorial will give you clear idea about slicing your design in photoshop.
Open your Photoshop. If you are first time to photoshop, please go through Step 1 to 3 below.
(1) Start Photoshop.
(2) Go to File >> New (Keyboard shotcut Ctrl+N).
(3) In New dialogue window change the following settings:
- Type Width :780 pixel, Height : 600 pixel (or any measurement you wish).
- Resolution:72 pixels/inch. (Resolution 72 widely used and it is web standards).
- Color Mode:RGB 8 bit. (do not go for 16bit. 16 bit will double the file size).
- Background Contents: White (Also see other options Background and Transparent by clicking small arroww right side).
When you select Background option, the color selected at “Set background color” color box in tools will be applyed and for knowing about how the Transparent background look like?, please go through Transparent Background tutorials on this site.
Leave all other options as is and click OK to get new photoshop Document.
Playing with Tools.
The easy why to learn and understand any Graphic tutorials is to play with tools for some time to understand the tool behaviors. Play whatever why you want. Nothing will happen to software or computer. Devote some time to know about the tools. Iam going to tell about only for few tools those are required for slicing the design. Start playing with the following tools mentioned below. I explained required steps to understand the behaviour of the tool in right manner.
Slice Tool
Slice tool is used to slice the images, buttons, logos, banners and other required small minute parts that are existing on photoshop document (.psd format). Finish playing with tools section. Iam going to discuss in details about document formats in Layers in Design Section.
When you click and hold mouse on slice tool in tool box (from top third row right) you can see two tools. One is slice tool and another is slice selection tool. (A Small triangle icon at the lower right of a tool icon indicates hidden tools.)Slice tool is used for slicing the graphics and the other tool is for obviously for selecting the sliced images.
Practice this:
There is no need of any graphic included in document. Let the document you opened be blank.
(1) Select Slice Tool.
(2) Click and draw a rectangele without realeasing the mouse. You will see this:
Move mouse inside the selection, the slice tool turns to slice selection tool with an arrow pointing on top. You can toggle between Slice Tool and Slice Selection Tool by holding Ctrl Key.
(3) Double click inside the selection to see slice option dialogue box. Here you can see width and lenghth of the sllice. Change the width and the length and click ok. The slice you draw on document will change to new sizes. This way you can increase and decrease the size of the slices pixel by pixel.
Tip:
You can measure any graphic’s width and height on design with slice tool by adpoting method explained in Sl.No.(3) above.
(4) Continue to draw more slices side by side. when you draw new slice, previous slices will get automatically deselected. To select previous slice hold down Ctrl key and click inside the slice.
Tip:
You can toggle visibility of slices by pressing Ctrl+H
(5) Double click inside any slice.
You will see slice option widow. By default the slice names will appear as Untitled-1_01/02..you can change this default title settings with descriptive image names to identify them when you insert the slices in HTML pages.
Tip:
You can duplicate slice by holding Alt key and dragging the selected slice.
To delete a slice, select the slice with selection tool and press Delete Key.
To adjust the slice width and height move the slice selection tool to the selection edges. When mouse turns to horizontal arrow drag the handles to required size.
For adjusting from corners of the slice, hold down Ctrl Key and move curser to the corners. When cursor get slanted direction drag the handle.
Topics: Graphic Tutorials |
December 24th, 2006 at 3:13 pm
Hi Rama,
Thanks for commenting on my blog. Seems that you’re into web designing, why don’t you apply for an affiliate account at
http://www.webdesign.org/?aff=relbenezon
It’s a great site. You can check out their tutorials and besides, joining as an affiliate, you can also earn money on the side!
Good luck!
December 25th, 2006 at 1:50 am
Thanks Bob for the information.
December 26th, 2006 at 2:27 am
hi rama,
thanks for drop a comment on my blog. i’m looking for your next post. seems I will get more info from your site….(i’m still in the learning curve)
December 26th, 2006 at 5:07 am
Hi Ombak,
Thanks for the comments. I too visited your blog. Really you have some useful content. I need to visit your site again and again to read more and more:)
Regards!
December 27th, 2006 at 8:29 pm
you have some good info there!
btw, thx 4 visiting my blog
December 27th, 2006 at 9:25 pm
Thanks Sam!
January 30th, 2007 at 3:36 am
Awesome post!
Thank you,Rama!
January 30th, 2007 at 3:46 am
Hi Richie,
Thanks for the comments left. The page will be updated soon.
January 30th, 2007 at 4:19 am
Sweet!
I just subscribed your blog so I can keep myself updated!
July 27th, 2007 at 1:59 pm
??? ???????.Very good tutorials.
August 10th, 2007 at 3:17 am
wacom graphic tablet
Your blog posts are insightful. I will take them into deep thought and consideration. Your point of view is very smart and intellectual. Charlie
January 4th, 2008 at 1:41 am
I found your blog via Google while searching for web design with photoshop and your post regarding Designing WebPages in Photoshop looks very interesting to me. I have seen many sites before and most of them do not look this good. I cannot wait to let my friends know about this site. Thanks for the excellent content.