a look at design for the web & all it entails

· view menu ·

Bitmap images – core skills

Looking forward to hearing all about your current working techniques and discuss good working practices for visual element creation with you ;)
This presentation is intended to summarise various aspects of a typical workflow, covering a lot of details. It is intended as reference for you – whether you are entirely new to design and Photoshop, or whether you are already happily working in Photoshop. We’re using Photoshop as example of a common bitmap editor only, this is by no means a recommendation.

Let’s take a closer look at image cut outs, one of the most common tasks when working with visual design elements.

Use selections and layermasks to to isolate the phone, to be saved with transparent background.
↓ download image (.jpg / 19kb)

useful reading:

online profile services:

profile page design

mini project – part #1

The aim of this project is to create a professional profile page for yourself, a single page design. Selecting any information you find suitable, create a design which will present your chosen information in a clear and meaningful manner.

This project will span over 4 weeks, allowing you time for each step, from designing the mockup to saving the visual elements for the web, ready for coding. Our sessions will go hand in hand with each step ~ hopefully helping you along nicely :)

to do list

  1. select your information and plan a suitable structure
  2. sketch out your ideas in your sketchbook
  3. produce a digital mockup of your design

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


  1. prisca

    Thanks for the links, Izzy and Su :)

    I like your plan of content and visuals – though I am not sure whether the order of elements works as well as it could. After your name, you are showing the contact links, before details about you, or your photo.
    I think these links will result in more interaction if you placed them after some of your info – once people have read more details about you.
    Curious to see the large visual you will present ;)

    nice work – love that shade of yellow :) beautiful :)
    as you linked to your actual coded page – I’ve had a quick look at your code – a few comments on your code and design:

    ~ you’re missing a reset – this will affect your current CSS if you add this now. It will always be best to start you CSS with a reset to ensure more consistent rendering across browsers.
    (at the moment, some of your styling now depends on the browser defaults)

    ~ your border CSS is incomplete at the moment:
    border-right: dotted; #000;
    Ideally, you will write the border rule something like this:
    border-right: 1px dotted #000;
    = width | style | colour

    ~ I like your red squares, nice idea for structure and highlighting :)
    If you used this on a website, however, there could be an issue with how this gets interpreted by users. Your red squares in the page work as markers for your titles, in the top right corner, they precede links. This would lead to some confusion. Red as such a strong colour can then be seen to indicate links ~ leading people to try and click your headings.
    (not as much of an issue for you profile page – just wanted to point this out anyway. On a website, you might want to highlight the titles/links with a blue square instead.)

    ~ though I love your yellow, I’m not too sure about the 2 shades of blue you used. The red works very well – in harmony with the yellow. The pastel blue is a little hard to read, especially for the link hover. Your bold setting of the type helps with readability yet is still a little too low in contrast

    ~ your sidebar works well – though a little added spacing would work better:

    hope this helps ;)

  2. su

    Hi all, sorry dont think the link worked – so profile and webpage are accessible at:



  3. IzzyGP

    Ah! I’m so sorry! I only just thought to check back here before tomorrow’s session : O.

    I know it’s super-late but hopefully this new link should actually work:


    Sorry! (again)

  4. prisca

    Hello :)
    nice ideas, everyone ;)
    to give you some feedback – replying to everyone in a single comment.

    Nice layout – the information you chose works well, and the colours and type are clear. The header, intro and content elements form a typical pyramid which can work well. In your case, however, I think a more even/balanced layout for the header and intro (photo+text) would create clearer focus.
    profile comments
    I’m not sure about your initials here – is this / will this become your logo? I think it might work better with simply your name, nicely set in type.

    very nice and elegant layout, with lots of information :)
    Your concept, type choice and colour scheme so far is very feminine and light. This clean and minimal approach works very well though you need to pay close attention to detail. For example, will your text align with the margin, or will your containing boxes and their background colour?
    For clarity and ease of reading, this will need to be carefully planned for coding.

    My concern would be your typeface and colour / contrast. I find it a little difficult to read on your mockup. If you are decided on this font, you could solve this by setting the scale larger overall.
    However, the fine lines might be an issue for legibility.
    I’m also not sure about the alignment of your footer ~ could look a little neater? Without the centre alignment?

    @IZZY & @SU:
    can’t see yours as you’ve linked to your local files, rather than a hosted version. If you want to leave another comment with the right link for me? ~ Thanks :)

    what a gentle and light design, very nice.
    I like your gradient ~ though I’m not sure about the contrast between text colour and the background, might need more tweaking.
    Though I think your layout works well, I think a more tighter set presentation of the content elements would work better.
    Also, your profile shot is nice, I like the photo. However, the direction of your sight to the left is not ideal. Right facing imagery is more positive and would work better, with a little alignment tweak:
    profile alignment

    quirky shot with a great sight angle :)
    Though this could work well – you should work on the content details first, then edit your mockup to present your information. At the moment, the visual balance is off. The 2 icons should not dominate your page as they do at the moment, using only the icon for all, at a smaller size and maybe positioned below your text would work better?
    icon edits
    I would also suggest to move your white content box further to the right, away from your face ~ and the fade between photo and the white background looks a little incomplete at this stage.

  5. Wes

    Hi, here’s my attempt!

  6. Cathryn

    My profile mock-up:

    (I do plan on adding colour)

  7. Izzy Graham-Potts

    Hi there,

    Heres the link to my website mockup:


    Warm Regards!


  8. Su

    Here is my draft 1 profile.


    I concentrated on two things which I considered more important than the visual at this stage:

    1) Learn Photoshop – I undertook a Lynda.com tutorial including on layers, grids, colours, shapes etc
    2) Content – Having a marketing background, I based the content on the questions, who, what, why (should clients choose me), how (do they get in touch).

    If the content is going on the right direction, I can then focus next on visuals.

  9. Jenn

    Hi, see my mock-up here:

    Looking forward to your feedback!

  10. alfi

    Here’s my very early rough of a profile page.