A Touch of Class Web Design Tutorial
Short summary:
... to design a site that's a bit more elegant than the standard business ... Drag this little image into Photoshop so you can get the exact colours from. it. ...
Long summary:
A Touch of Class Web Design Tutorial A Touch of Class Web Design Tutorial If youd like to design a site thats a bit more elegant than the standard business web design style, follow along with this tutorial. 1 Making a Bent Selection In Adobe Photoshop, make a new image . Id recommend 775 x 600 pixels. (My example pictures are deliberately smaller, due to space constraints.) Click on your background layer and press Ctrl+I, to invert it and make it black. Make a new layer. Zoom right in (Ctrl +) and use the Selection Tool to select a crooked, one-pixel thick line , as shown. Youll need to do this in three parts. Rememberhold down Shift to add to your selection. 2 Gold and Grey Lines As you may already know, most realistic gold effects are a combination of two colours brown and yellow. Drag this little image into Photoshop so you can get the exact colours from it. Select the Brush Tool, and choose a diffuse 45-sized brush. Brush the whole selected area with brown. Then dab with yellow, then brown, then yellow. With such a thin selection, the m arching ants selection line will cover it and make it impossible to see what youre doing. Use your imagination. :) Choose the Selection Tool again. Nudge the selection down and r ight by five pixels. To do this, press the Down Arrow key five times, then the Right Arrow key five times. Use the Selection tool to extend the selection to the left, so it touches the edge of the image. Brush the selected area with light and dark grey as you did with the yellow and brown. Then Deselect the area (Press Ctrl+D.) Duplicate the layer, by dragging it onto the New Layer icon. To create the bottom set of lines, Click Edit > Transform > Rotate 180° Use the Move Tool to move the layer down. 3 Selecting a Picture Border Find a nice image that represents a page of your site. If theres no image that represents Home on your site, just scour the net for a nice picture of a house. Theres no need to be exact. To shrink the image, Click Image > Image Size. Make all your images the same size this way. Using the Move Tool, drag the image into your main file. In the layers list, Hold Ctrl and click on the layer of your picture, to select that area. Zoom right in and deselect all but a one -pixel border. (Alt+Drag deselects an area.) Its delicate work. Do it in stages if you like. Dont use any of the Modify Selection options. These will give you an anti-aliased (fuzzy and smooth edges) selection, which will fuzz up the whole selection, because its so thin. Make a new layer. Brush the area with yellow and brown, as before. 4 Giving the Picture a Double Border The next step is to make the bigger grey border that goes around the gold one. Click the eyeball next to your picture layer to hide it if it gets in the way. Make a new layer. The gold border should still be selected. Nudge the selection up and left five pixels, by pressing the Up Arrow key and Left Arrow key five times each. With the Paint Bucket Tool, fill the ...
Source: webdesign.ittoolbox.com
Search Terms:
Related
Tiger Skin Web Design Tutorial, Open up Photoshop, make a new image, and
follow along with this tutorial. ... Adobe
Photoshop, and run regular Photoshop
tutorial classes. Student Portfolios ...,
more
A Touch of Class Web Design Tutorial, ... to design a site that's a bit more
elegant than the standard business ...
Drag this little image into Photoshop so
you can get the exact colours from. it.
...,
more
Create a DVD menu in Adobe Photoshop, design tools of Photoshop to create menus
and buttons. ... For this tutorial, you
will. need Photoshop and an idea for your
menu. ...,
more
