one of the tasks you might be confronted with will be the editing of any source images your client might give you - so practise your editing skills by repairing, touching up and editing these images.
→ selection of 8 sample images
HOMEWORK: Choose 3 images from the resource folder (see link above) and restore them
to presentation quality.
→ restore-retouch project
a few reminders for working methods in Photoshop
→ selection techniques
→ using channels to smooth out edges
one visually very effective method to highlight your menu links and enhance their rollover apearance is to use icons or ornamental elements which change on mouse rollover. Though this can be achieved in different ways - the most efficient methods is the sprite rollover:
→ clever rollovers
HOMEWORK: Using a single image file - create 3 link lists with 3 different rollovers.
→ sprite project
the layout classic - 3 columns
time to tackle proper page layouts - let's start by creating a simple 3 column layout
→ fluid 3 column layout
and to practice - a quick mini project :)
→ fluid 3 column layout
working with tiled backgrounds
expand your photoshop skills by creating seamlessly tiling pattern for use as webpage background.
→ creating tiled backgrounds
→ Creating Backgrounds (The Photoshop Anthology - by Corrie Haffly)
just to get you thinking about what is possible with background images - 2 pages which present a variety of different styles and visuals:
→ 80 Large Background Websites (webdesigner wall)
→ Ornate backgrounds (design melt down)
handcoding reminders :)
With getting your head now into coding - just a few reminders here on my blog:
→ working with HTML editors
→ getting started with handcoding and testing
Time to dive into the deep end of CSS - with the help of CSS Edit.
→ CSS Edit - a coders joy :)
a few photoshop tips for good working practices :)
As you will be doing a lot of work with visuals, be it editing or creating your own - an efficient workflow will be vital - so here are a few pointers ....
→ working methods
→ download sourcefile
Using this screenshot of the website for 'Matt' (a web application by carsonified) - create a new layout and structure for their homepage. The aim is to refresh the look - without adding any new elements but rather working with only the exisiting content, navigation and visuals. You cannot add any new visuals - but you can edit, change, duplicate or omit the exisiting imagery.
→ download source file
ready to get coding? - Let's start from the basics :-)
01 - introduction to XHTML overview
Well done today, everyone :) just to give you those CSS handouts:
→ CSS overview
→ CSS selectors
let's get your face online ;) To set up our new gallery page - create a portrait for your online presence on our webeyedea site.
→ download project brief
As we were talking about design and its different approaches in lesson - I thought I should give you some of those links again. I've started a new discussion on our forum for this - so please have a look and share any other links you found yourself:
→ design matters: design links for your perusal
just to confirm class times and term dates - here is the → final PDF :-)
glad to have you all on board - and looking forward to teaching all webdesign, the web standard's way :) Before we dive into handcoding and get stuck in - make your first mark on our course website and create visual to show in this year's gallery. Download the original fan image and font and be creative.
→ download project brief
→ download source file and font
To get your head into the right gear - please have a look at the mindmap below. Think about the questions and topics.
Then begin to expand the map. Go to bubbl.us and create an account for yourself.
Duplicate the mindmap and add your answers and thoughts to it - growing your own personal mindmap to however large you like :)
Once you're done - please email the saved image for inclusion in our site.
a few articles on the subject of mind maps:
→ why should freelancers use mind mapping? (freelanceswitch.com)
→ mind mapping (Matthew Lang)
Please visit the college website for more information about open days, enrolment and the college.
Tower Hamlets College
If you have any questions, queries or would like to get in touch with me personally - please feel free to get in touch via this form :)
content:
web news
to keep us up to date with the latest developments - hoping you will contribute to this sections and send me any links you come across
graphics
anything to do with graphics - tutorials for Illustrator and Photoshop
XHTML / CSS
tutorials, exercises and projects for XHTML and CSS
flash
tutorials, exercises and projects for Flash
scripts
tutorials, exercises and projects for anything script related - actionscript, javascript and php
student gallery
your own online gallery - this section will show off your beautiful work as well as contain links to your own sites
hoping this section will grow continously over the year ;)
course info
information on our course as well as any course related paperwork
contact
get in touch ;)
05/06 — communication page [archived]
the main page for the year 2005/2006 — archived for keeps ;)
06/07 — communication page [archived]
the main page for the year 2006/2007 — archived for keeps ;)
07/08 — communication page [archived]
the main page for the year 2006/2007 — archived for keeps ;)
