The BarbLog

Design, front-end dev and other random thoughts

How to suck a little bit less in Adobe Illustrator

I started using Photoshop when I was 14. I used it to draw, paint, retouch, animate even… I love it and if I could get a ‘Team Photoshop’ shirt I probably would. Although it might be misinterpreted by all the feminists out there… anyway. When I ventured into Illustrator with 10 years of PS loving behind me, I quickly closed it again in fear. I did go back to it every now and then to try and make it do what I wanted, but always ended up in Photoshop since I could make THAT do what I wanted without problems – why bother with the rival?

Then of course the MA and Prisca came along and I now have to learn to use AI properly :P No, I realise I really have to if I want to be a designer. So I’m going to push myself and wrestle with it even if what I produce will end up looking like a squashed turd or something. Actually, a turd would be quite easy to do, maybe I should start with that, in memoriam of Justin’s abandoned civet coffee idea?

Helpful techniques from class that I will try to practise:

  • .EPS files save the embedded font as well, and have less chance of becoming corrupted than .AI, so better to save in this format
  • ‘Info’ window: helps get dimensions of a shape
  • Single click anywhere to insert a shape of custom, preset dimensions
  • Pathfinder: works with interaction of 2 or more shapes, so need to select at least 2
  • Group selection tool: better than Direct selection tool as it lets you move stuff around better
  • New layer > Select all shapes on the layer > Alt+drag coloured square in layer window to the new layer above it to duplicate shapes
  • Punch shapes in another shape: Pathfinder’s Exclude option (! keep editable copy to edit later if required, you never know !)
  • Artboard tool: Trim by just clicking on the shape you want
  • Saving for web: can change image dimensions in the dialog box
  • Selecting parts of a path: better to click and drag rather than just clicking
  • Align 2 points on a path on a vertical or horizontal axis: ‘Join’ command

Keyboard shortcuts to remember:

  • 100% preview Ctrl+1
  • Outlines/paths view Ctrl+Y
  • Preserve shapes in Pathfinder Alt (hold)
  • Convert anchor tool Shift+C
  • Join command Ctrl+J
  • Reflect tool Alt+Shift+drag
  • Repeat last transformation Ctrl+D

Barbara November 16, 2013 Leave A Comment Permalink

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

3 websites with bad typography


I’m not quite sure what the purpose of this website is, but the typeface is unimaginative, the lines are too long, body copy is in bold (why??), italics are used excessively and there are some random extra typefaces on the Peter Pan images.

2. Bedknobs Bed and Breakfast

I remembered the assignment when we had to find inspiration for a Cornwall B&B website and how I found many ugly ones, so I went back to that search term and found this one. It’s unbalanced and all over the place – doesn’t seem to be well thought out at all. The mix of center-aligned text with left-aligned text doesn’t look good at all, and the bold heading running over 3 lines is not pleasant to read despite their probable intentions to make it so.

3. A.S.K. Tattoo and Piercing

On first count I think I can see 4 different typefaces on this page, liberal use of font-weight:bold, and some unpleasant 3D text effects. I definitely wouldn’t trust a tattoo artist with my precious skin if they can’t see how ugly that website looks!

Barbara November 5, 2013 Leave A Comment Permalink

3 websites with good typography

1. Chris Wilhite Design

Chris combines the serif and sans serif fonts on this site very well, making it look cohesive but varied. I especially like his choice of fonts in the first picture – he is using 3 different ones but it doesn’t look like it’s too much. One of them, which is also used in the top navigation, is Grotesque MT while the serif is Pistilli.

2. Squared Eye (old website)

squared eye matthew smith

Unfortunately this site is no longer online – it redirects to Matthew Smith’s homepage which is nowhere near as fun and nice to look at as this whale-themed one! The slab serif is attention grabbing and slightly playful, so full of character that a simple sans serif to complement it is a good choice, plus a simple serif used on the buttons only. Looks like Verdana and Georgia for the latter two, but as the site is not online I can’t check.

3. Knuckles Industries

The typography is what makes this site more than just some pictures with a bit of info – the typography is like part of the picture, complementing the vintage feel. Very apt to use that particular font for the word ‘tradition’, while ‘skill’ stands out due to both its colour and the font size to emphasise it even more. Here too, a combination of several different fonts, including the logo, works well but of course this is not a content-heavy site where such a bold combination wouldn’t work at all.

Barbara November 5, 2013 Leave A Comment Permalink