Carl Hattley - Learning Resources

Learning Resources

Web Development

Aim: To teach Web Development with an emphasis on DESIGN and HTML and its APPLICATION within professional environments and outputs.

Week: Two

Hello!
Hope you are all having a fantastic week!
My priorities for week two are:

1.	To distribute and discuss the Mid-Term Project.
2.	To ensure that the planning and preparation work for your portfolio websites are going well.
3.	To give you examples of corporate identity branding guidelines, fonts, and website structures to help you finalize your concepts and ideas in a professional manner that is up to industry standards.
4.	To demonstrate the process of creating a website design / layout in Photoshop in preparation for week 3.

Mid Term Project
The Mid Term Project will be issued and discussed.

Class Resources
I hope these examples help you to organize a set style for yourself. Once you have figured out your style you limit the amount of options you have (from the millions of variables you have otherwise) which should make designing your site little easier.

TARGET® Corporate Identity Guidelines
You might not feel that a logo is appropriate for your look. If not then you should treat the font you choose in the same way you would a logo. Try to choose your font(s), colors and how your stationary might look. Once you have decided this it shouldn't be too difficult to see how it would transfer a website.

TARGET® Press Kit Templates Guidelines
This is just more of the same from above. You don't really need to play much attention to this... I just thought I would include it because it gives more examples. (CD label, Folder, Letterheads etc)

TARGET® Website
Here are a few examples of how TARGET® have transferred their style to web.

PIXAR Website Structure
Here is an example of how the structure for the Pixar website looks. It is IMPORTANT that you plan your website on paper before designing it. Otherwise you might have to design it over and over again because you forgot to add something :)

Activity One: Website Comparisons
Three leading department stores from three different countries. They have similar services and a similar audience but they all choose to utilize different layout designs. How are their websites different from each other and why do you think this is?

* Fill in the PDF online save it and then either email it or print it out and hand it to me in class.
We will have a class discussion about your findings.

Font Library
Choosing the right font is VERY important. The width and shape of a font can communicate many things to your audience. With the right font you may not even need a logo. It's important to make the font a part of the design rather than slapping something generic and awkward on top of it or squashed into a corner.

Adobe Photoshop CS3 Tutorials
I hope these examples help you to get started in Photoshop. You can create websites in HTML directly from Dreamweaver. This will just be an introduction. You will get to play with Photoshop in Week Three. However, should you feel motivated to familiarize yourself before then you are more than welcome! :)

Document Setup, Import Image
Open Photoshop and set up your document. 850 x 500 pixels is usually a good size for a wbsite. Arrange your workspace so that the 'Tool Box' and 'Layers Palette' are visible ( window > workspace > default ). Open up your main image and then drag it into your document.

Add Type, Use Layers and Guide Tools
When you enter new type in automatically creates it on it's own layer. If it does not do this just simple select the 'Pointer Tool' and then re-select the 'Type Tool'.
Enter your type and play around with the fonts, colors, and character tools.

Creating Buttons using the Type, Layer, Fill and Marquee Tools.
You can create your buttons in many ways. You can have graphics or just text. I have chosen to use circles. Which, I created using the 'Marquee Tool' and The 'Fill Tool'. Duplicate the layer of the first one you create to save time and to ensure that they are all the same size.

Create a Rollover State using the Layer Styles Tool
Duplicate your button and then select the 'Layer Styles Tool'. It is a quick and simple way to add effects to type and graphics. For the first button I used the 'Bevel Tool' and 'Shadow Tool'.

Create a Rollover State using the Layer Styles Tool
Duplicate your button and then select the 'Layer Styles Tool'. It is a quick and simple way to add effects to type and graphics. For the second button I used the 'Fill Tool' and 'Outline Tool'.

Create Slices
Use the 'Ruler Tool' to mark where you would like your slices to be and then select the 'Slice Tool' and select 'Slices from Guides' in the 'Properties Bar' at the top of the page. You can select multiple slices by holding the 'CTRL' key. Combine multiple slices by right clicking on the mouse and selecting 'Combine'. Try to be economical with your slices. Use them to separate buttons or sections.

Name Buttons and Export Design.
Name the slices of your buttons so that Photoshop saves them as something that is easy to find. Export your website for Web saving both the 'HTML and Images'. An 'Images folder will be created automatically which will contain all your slices.

Export Rollovers
Use the 'Layers Palette' to make your rollover states visible. Rename them and then Export your site again. Photoshop will save the new slice names (rollovers) into the 'Images' folder. That's it! You are now ready to play with Dreamweaver :)

Homework
None. However I would encourage you to go over the Photoshop handouts a little or perhaps tweak your portfolio layout concepts and designs... but it's not essential.