The BarbLog

Design, front-end dev and other random thoughts


All of the posts under the "photoshop" tag.

Sketches and mockup for ‘Warm Bean Coffee’

This project involves building a website for an imaginary small business in a town in south-east England. I started out with a vague idea of something warm, inviting and slightly retro, but also professional. I started by simple sketches on my tablet using my finger – helped me focus on the wireframe and colour palette rather than smaller details. I then played around developing those ideas in Photoshop and also created a logo.

Sketch6322488 Sketch63222727

This is what I worked from – it’s not pixel perfect and it’s not complete yet but I think I have the colour scheme and branding more of less defined now. The below also doesn’t show the responsive version which I designed in the browser as I went along. Check my coursework website (link in the right sidebar) for more details.


Barbara November 12, 2013 Leave A Comment Permalink

What I learned this week (23/10/13)

Webpage design:

  • When saving images for the web in PS, best option is to choose 2-Up, zoom to 150% and check quality there (check for artefacts appearing when reducing quality settings) in order to choose the best one.
  • Two things to reduce file size before saving for web: 1. Blur parts of the image that can be blurred, and 2. Reduce the number of colours where possible.
  • CSS shorthand for background properties: some browsers, even Firefox, can have problems displaying it so if in doubt, use longhand code.
  • Line-height settings: rule of thumb is 1.4x line height per 1 unit text size, but can vary, e.g. light text on a dark background is harder to read so increase line height.
  • Link colours: best to define them in the CSS right at the top of the stylesheet below the body settings, to ensure the links all render in the correct colour – also include various states eg. a:hover etc.

Useful tools:

Barbara October 23, 2013 Leave A Comment Permalink

What I learned this week (9/10/13)

A list of random useful things I picked up during today’s classes.

Applied Art for the Web – Photoshop

  • For design mockups it’s a good idea to start with an 1024×768 px document size, with a 960 px width for the actual site content (although it’s even more recommended to design in the browser if possible)
  • Mark layers that are to be coded with CSS (and not exported as images from the PSD) to help the developer out
  • GIFs and PNG8s can’t display half transparent pixels so we need to know the colour of the background that will be behind the image we’re exporting so we can set the matte to that colour
  • Aim to work with existing content – be assertive with client – use analogy that you wouldn’t just ask an architect how much a house costs, they have to know what you want the house to be made of!

Webpage Design – The structural layer

  • Best practice: use HTML5 elements with the stricter XHTML syntax
  • the <b> and <i> tags are back, with a different meaning: to mark up text that is somehow different (but not necessarily emphasised more) than its surroundings.
  • Whether or not the above tags should still be used is debatable but could be useful for example in text containing latin names etc; and they are less verbose than span classes
  • XHTML: use “id” instead of “name” that was valid in HTML4; “name” now deprecated

Barbara October 10, 2013 Leave A Comment Permalink

get_footer() ?>