Today you need to create at least:
- A simple logo (Illustrator). Can even just be the name of your site)
- Header (might just be white space with the logo placed in)
- Navigation buttons for two states – normal and rollover
If there are other parts of your website that you would like to create in Photoshop/Illustrator you are welcome to as long as time allows.
First, need to pull out your sketch that has your lengths and widths defined.
- Open Illustrator. Create new artboard that is the same width and height as the header. Save the logo as an .ai file (default).
- Create Photoshop file that is the same width and height as your webpage (typically 800x600px).
- Select the Rectangular Marquee Tool (second tool from the top on the left side of the screen). Along the top switch the Style to “fixed ratio”. Define the width and height of your header region (such as 800px by 200px) and draw the border at the top. There should be a dotted outline in the header area.
- Go to FilePlace and select illustrator file with the logo. Put the image in the header space and click the checkmark in the top right to accept the placement.
You can create the navigation bar in Photoshop.
- Select the Rectangular Marquee Tool (second tool from the top on the left side of the screen). Along the top switch the Style to “fixed ratio”. Define the width and height of your navigation bar (such as 800px by 25px) and draw the border at the top. There should be a dotted outline in the navigation bar area.
- Create a new layer. Either fill in the space using the paintbucket tool (Click and hold on the Gradient tool halfway down the toolbar on the left side and then select the paintbucket) or outline the top and bottom with the line tool (click and hold the rectangle tool at the bottom and select the line. At the top right of the screen click on the fill pixels button (it looks like a square and is next to a button dots with a pen tip). Now can draw a line at the top and bottom part of the marquee box in the navbar area.
- This box or lines acts as a guide while you create your navbar. You can keep these lines/boxes or you can delete them later
- Select the type tool (letter “T” towards the bottom of the tool bar on the left side of the screen). Can change the font and size at the top of the screen. Click once and type in a button (such as home). Click again to create another button (such as contact). Each button should be on a separate layer. Place the text in the navbar area.
- Once all of the text buttons have been created, create a folder in the layers panel. The layers panel is on the bottom left part of the screen. Click on the folder button (third from the right) at the bottom of the layers panel to create a new group. Name the group “Buttons”. Click and drag the text button layers into the folder group in the layers panel.
- Create another folder and rename “Rollover”. Now click on one of your text buttons and choose “duplicate layer.” Take that duplicated layer and drag it into the Rollover Folder. Duplicate each of your button layers and put them into the Rollover Folder.
- Change an aspect of each of your rollover buttons such as color, size, effects (like bevel/emboss, glow, etc.) or a combination of the three. This will be what your button looks like when someone moves their mouse across it.
- Turn on/off the groups to see what the completed states of the button looks like.
For color design ideas check out:
Keep it simple. A well designed website does not have to have super fancy graphics.