Learn to design a website in Adobe Photoshop, slice the â€œpsdâ€ file and implement it in html using Macromedia Dreamweaver.
First take a look over the â€œpsdâ€ file:
Save next picture on computer. Need it in this tutorial:
Letâ€™s begin :). Open a new file in Adobe Photoshop with a black background. Import the picture in your document and place it like this:
New layer in the Layers Tab and place the logo in the top left corner. I chose â€œAnnaBelleâ€ as logotype:
Create a new layer and type the site content on the same vertical line with the site logo. Choose what font you want. I used â€œFutura Light 24px,16pxâ€ and â€œArial 11pxâ€. It should look like this:
Ok. Now the navigation: type the name of the buttons with â€œArial Bold 12pxâ€ like this:
Create the buttons’ background. New layer (down the layer buttons):
Right click on layer and select Rasterize Layer
With Brush Toll selected, delete an area like this:
Duplicate layer and move it for any button. The result should be like this:
Now select layer background thatâ€™s behind the â€œhomeâ€ button and Edit>Transform > Flip Horizontal and move it like this:
Now you have a layout for your site:
In the next part we’ll prepare the “psd” for html implementation. We slice the “psd” file. Take a look in the next picture and you can see what parts of layout interests us:
For the rest of the site content we’ll use HTML and CSS in Dreamweaver. Now we can cut the images we need for the HTML implementation. Select the Slice Tool and trace a contour like this:
Continue with the next zone and the result should be like this:
File > Save For Web and for every slice set the slice settings:
For the slices that need a higher quality, set â€œjpeg â€“ high resolutionâ€ and for the rest, set settings â€œgifâ€. Do this for every slice in your layout:
Quick Tip: To get the best image quality/file size ratio, export an image in GIF format whenever it has a few colors and/or close shades and export as JPEG when there are a lot of different colors in the picture.
After you configure the settings for every slice, and select all your slices (SHIFT+CLICK), choose Save and configure the save settings like this: Save as Type: â€œImages Only(.jpg)â€, Settings: â€œDefault Settingsâ€, Slices: â€œSelected Slicesâ€:
Thatâ€™s all. You sliced your â€œpsdâ€ file. Open the folder where you saved the pictures and rename them like this: â€œsite_03.gifâ€ to â€œlogo.gifâ€, â€œsite_07.jpgâ€ to â€œgirl-top.jpgâ€, â€œsite_10.gifâ€ to â€œactive-page.gifâ€, â€œsite_11.gifâ€ to â€œhome.gifâ€, â€œsite_13.gifâ€ to â€œus.gifâ€, â€œsite_14.gifâ€ to â€œservices.gifâ€, â€œsite_15.gifâ€ to â€œhelp.gifâ€, â€œsite_16.gifâ€ to â€œcontact.gifâ€, â€œsite_19.gifâ€ to â€œbeauty-txt.gifâ€, â€œsite_22.gifâ€ to â€œbottom.gifâ€.
You have now the pictures for your site. In the next steps you’ll do the implementation in HTML using Macromedia Dreamweaver MX 2004.
Open a new html document in Dreamweaver. In the Layout Tab select the Layout Table Tool:
Draw a table like in the next picture:
Choose Draw Layout Cell in the Layout Tab and draw a cell table:
Next draw another layout cell:
Click inside in this cell and choose Insert > Image and select your image folder. Choose â€œlogo.gifâ€ picture and click OK.
Set your background page to black Modify > Page Properties, Background Color. Set the Top Margin to â€œ50 pixelsâ€:
Click on the table and change its size, then insert a new row:
Inside this row insert the â€œactive-page.gifâ€ picture and adjust the row, set the row horizontal alignment in the Properties Tab to â€rightâ€ like here:
Another cell box and insert the â€œhome.gifâ€ picture:
Continue to add new cells and rows for all your pictures:
Now insert a nice text in middle site section. Set the text size, color, etc.
Select each button and on Properties Tab enter the in the link field â€œ#linkâ€ and you have a very simple site made by you.