10.02.2009 -
Excellent!
Create an advanced professional layout for your hosting company, 100% expandable with a 100 steps to follow.
Here is what you should have!
Now make a new layer, using the styles and methods used to create the main big border, create a similar border as shown below.
Now grab the pencil tool and draw a thick line in the middle as shown below.
Now arrange the layer so its at the bottom of the layers pallet. "Layer > Arrange > Send to Back".
Now make a selection similar to below and make a new layer. Fill the selection in with white. Then bring up the blending options.
Now make a selection similar to below and make a new layer. Fill the selection in with white. Then bring up the blending options. Gradient Overlay and then press OK.
Here is what you should have:
Make a new layer, CTRL click the gradient layer, grab the rectangular marquee tool, hold ALT and form a similar selection like below.
Fill the selection in with white, set the mode to "Overlay" and opacity to "31%". (enjoy step 69 :).
Now fill out the box with various hosting information, try and find an image of some sort of server to give the box that "professional look".
Now we need to produce 2 more boxes, (business, extreme). Using your knowledge of duplicating duplicate the first box and edit the text and so on. Sorry if i'm going too fast but nothing really needs explaining that well, just allot of duplicating, however if you keep your layers in layer sets then this will be done 10x quicker.
Make a new layer (above the first background layer - very bottom), make a selection like below, fill it in with the colour #3E4663. This will leave you with a nice background for the packages. Then press CTRL+D to deselect.
We now need to code the packages into our layout in Dreamweaver. We first need to save each package box as a separate image. Make a selection for the first package, zoom in to keep to the borders and to make a more exact selection.
Hold "Shift + CTRL + C" to copy the box. Then "CTRL + N" to start a new document (keep the default size). Then press "CRTL + V" to paste the box into the new document.
Now simply "File > Save" and save the file (name it starterpackage) either a .gif or .jpg into your layout images folder. Do the same process for the other 2 boxes.
Open up Dreamweaver and your current layout. Click in the left column and set the background as shown below to: #454E6D
Insert your package images in the left column. We now need to add a dotted border. The easiest way to do this is to right click save target on this link and save the image in your images folder. YOU MUST DO THIS. Then find the below code, edit it to the code I highlighted.
Save and preview in your browser. This is what my layout looks like:
Now go back to your Photoshop document and remember
to save it. Make a new document, width: 476, height: 27 and a white background.
Make a new layer and fill the canvas in with any colour and then bring up the
blending options. Gradient Overlay:
Stroke (colour: #242A3C) and then press OK.
Fantastic!!!
Totally awesome!
Excellent!
very very nice
I LOVE this tutorial. congratulations and THANK YOU for ALL your hard work. My Web address is: smashbrossaga.uuuq.com
View all user comments for this tutorial.