a look at design for the web & all it entails

· view menu ·

Photoshop for the web

With your beautiful profile designs in hand - let's take a look at preparing and saving your images for the web.

view final design

alternatives for bitmap editing

GNU Image Manipulation Program // open source // PC/MAC/LINUX

The Image Editor for Humans by Flying Meat // MAC

paint net
image and photo manipulation application // free (but no longer open source) // PC

image editing app // MAC

image optimisation

8bitalpha (online)
Upload a 24-bit PNG with alpha transparency and get back an 8-bit PNG also with alpha transparency.

imgageOptim (MAC)
ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.

JPGmini (MAC/PC/online)
JPEGmini is a patent-pending photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality.


Practice makes perfect :)
Let's get creative with repeating textures and patterns.

Experiment with creating your own patterns in any graphics app of your choosing. Implement your finals for testing and preview in the provided sample page.
↓ download source files
(includes vector source file for pattern creation, HTML/CSS files for testing)

useful tutorials & resources

Revision3 - Pixel Perfect with Bert Monroy

Pixel Perfect is a tutorial podcast by artist Bert Monroy. If you like video tutorials - you might find an insight into his working techniques useful, here is a sample:

These tutorials cover working techniques for various purposes, very useful techniques and tips for retouching and image editing - however, they are not specifically for the web.

profile page design

mini project - part #2

With your design in hand, it's time to get coding and implementing your design :)
Feel free to focus entirely on the layout and content structure. Next week's lesson will be part of the 'webpage design' course where we will cover images and colour, continuing on from David's sessions with coding. So you can then put focus on adding your visuals as well as colour.

to do list

  1. mark up your content in a meaningful and semantic manner
  2. write your CSS with a focus on layout and structure
  3. upload your page for viewing online

Please feel free to comment below if you have any questions :)


  1. prisca

    Sonata, yes, I was talking about your motto, sorry – that wasn’t very clear…

  2. Sonata

    Thanks Prisca, most helpful :)
    P.S.: Little text tag- you mean my motto?

  3. prisca


    nice work on your profile, I like the colour and feel of your page ~ very nice ;)

    a few thoughts:

    • the little text tag would look nicer without the gradient or the shape, a solid colour block would work better.

    • listing the languages: make sure to write these our correctly: eg: not Css but CSS, not JQuery but jQuery…

    • the phone number should be spaced out for easy reading: 000 0000 0000

    • not sure if your social media icons would not be better placed with the contact info below – they don’t deserve the focus you currently have given them, in my view.

    • your content panels could also be aligned more neatly.

    Nice work – curious to see the final already :)

  4. Sonata

    Hi Prisca:)
    As we didn’t get the time to see you today, I wonder would you give me some feedback on my profile page (just don’t look at the code as it’s not finished yet and a total mess :D)

  5. prisca

    Good luck :-)

  6. Sonata

    Thanks :) Will try

  7. prisca

    ideally, you will work on your document in layers, using the layer masks etc… once your edit is complete – create a new document at the final output size, ie fitting as closely to the edge of your visual as appropriate. You can then bring the edited version into this new document, crop to size if need be – and go onto to saving it for the web.

    You’re then left with a layered working file which you could edit again if you wanted to. And a new file with smaller dimensions which is your web-ready file, ready for ‘save for web’.

    Does that make sense?
    The idea is to have a close crop around the visual to keep the file size down – while keeping the original intact with its layers, layer masks and edits.

    Hope this helps ;)

  8. Sonata

    Hi Prisca,
    If I want to use just one part of my picture I have to apply layer mask. What to do after that? How to hide the rest and save only the part I want?