Home : Week 6 : Create Website Graphics
When you browse through the portfolio html templates you see three different images.
The dumbnail is a dummy - thumbnail. Get it?
The thumbnail images you created last week will replace this graphic. We do not have to worry about making a custom dumbnail.
This 300px by 350px image sits on the site's home page.
The splash graphic works like a title page. The graphic should probably include your name, and perhaps a title for your site.
Visually, your splash graphic should resemble your work. Perhaps you will use a piece of work not featured in your portfolio as a background, with your name and title layered on top. Maybe your splash graphic will be completely abstract.
It's your choice.
The header graphic appears on top of every page but the home page.
It works like a banner telling your audience where they are.
You have seen similar things on other websites, like the Weather Channel website we reviewed in WDTS #1.
This image should look very similar to your splash graphic. It should include a title for your website, and your name.
You can create these graphics in either photoshop or illustrator. Photoshop might be the best choice.
Open Photoshop from the Apple menu.
Create a new document, 300 pixels wide by 350 pixels tall.
Save the file on your zip disk (the same one where you keep your public_html folder). Save in Photoshop format, with the file name "splash.psd."
Design your graphic in Photoshop using your mad, phat skillz.
When finished, save the file, then choose "Save For Web" from the File menu.
Make sure "JPEG" is the image format. Adjust the quality level so that the web formatted image is about 20K or less.
Click "OK" and save the JPG file in the "images" folder inside your "public_html" folder.
Basically follow the steps above.
Creating the header graphic is no different from creating the splash graphic except:
The header graphic should be saved in the "images" folder in the "public_html" folder.
If you have named your files correctly and saved the images in the images folder, you should be able to open the "index.html" template you downloaded in Explorer, and see your images on the page.
If not, double check that your splash graphic is saved in the "images" folder, in the "public_html" folder, and named "splash.jpg."
Make sure your header graphic is saved in the "images" folder in the "public_html" folder and named "header.jpg."
Also, make sure you copied your HTML templates into the "public_html" folder.