The BarbLog

Design, front-end dev and other random thoughts


All of the posts under the "tools" tag.

Having fun with some new tools

I’m currently working on my thesis project for the MA course (Spot That Shot) and I’ve been trying to use various new tools and techniques. This is my first project using Sass, and I don’t think I’m using it to its full potential yet but it’s already proven handy for handling rem units in my code, thanks to a mixin by ry5n that I found on GitHub. I’m also using it for colour variables.

I’m also aiming to take the principles of OOCSS (object-oriented CSS) on board and try to write it in a modular way. This does include some repeating, but ensures elements can be styled separately without changes affecting a seemingly unrelated element. It’s not pure OOCSS because I found that I didn’t quite get the hang of that – it probably takes much more planning time, practice and self-discipline than I currently have at my disposal (full time job + part time job + thesis project work = not that much time to learn difficult new things at leisure).

Adobe’s new-ish text editor Brackets is now my preferred text editor, replacing Notepad++ and Sublime Text 2. I like the monospaced typeface better than the ones in the other 2, and the interface is nicer (for me). I also used it to create my flat HTML holding page for Spot That Shot because it offers live previewing as you type which is pretty awesome! For the real project I can’t make use of that since it doesn’t support previewing of PHP files but I still quite like it. The only thing Sublime Text is better at is autocompletion of attributes; the autocomplete matches any part of an attribute when you type some letters (e.g. typing ‘mrgb’ offers ‘margin-bottom’ which is very useful) whereas Brackets only matches the beginning of words. Maybe they’ll update that at some point, for now it’s not a massive issue so I’m sticking with it.

And finally, I’ve been playing a bit more with WordPress as well, to get a feel for what files affect what parts of a website. The prospect of implementing Spot That Shot into WP, frankly, really scares me and I keep procrastinating because of that :-(


Icon fonts: How to make your own

This is the writeup to accompany my presentation slides about icon fonts.

Before we get into the ‘icon’ part of it…

If you use custom icon fonts, you will be likely embedding them using the @font-face CSS option. The most fail-safe way of doing so is by using the following syntax, as explained at first by Paul Irish and tweaked by Jon Hicks to arrive at this version:

@font-face {
font-family: 'Pictos';
src: url('pictos-web.eot');
src: local('☺'),
url('pictos-web.woff') format('woff'),
url('pictos-web.ttf') format('truetype'),
url('pictos-web.svg#webfontIyfZbseF') format('svg');

This is to ensure all browsers, including that pesky Internet Explorer, display the correct font files. Yes, that’s a smiley face there. Read the above articles to find out why!

Why use icon fonts?

Because they are awesome! There are four main reasons, though. Icon fonts are…
Read more →

Barbara February 17, 2014 Leave A Comment Permalink

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

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

get_footer() ?>