/ Rouge news / Pixel-perfect web designs

Pixel perfect web designs

Contact Telephone

Call us for a chat
0118 930 4245

Give us a call. We are in the office from 8.30am to 5.00pm Monday to Thursday. We try and finish early on a Friday when we are usually heading off by 4.00pm.

If you need us at any other time then try an email. We’ll get right back to you.

Creating sharp images for the web isn't rocket surgery but is often overlooked. Getting your design documents setup and artwork produced correctly will make your images look sharp and clear. Here is a useful reference with some top tips and best practices...

Creating a document from scratch

1. Create new document with the following settings:

Create new document with the following settings

2. Go to view and select "Pixel Preview":

Go to view and select 'Pixel Preview

Updating an existing design

1. Check your document raster effects settings are at Screen (72ppi):

Check your document raster effects settings are at Screen (72ppi):

Check your document raster effects settings are at Screen (72ppi):

2. Go to view and select "Pixel Preview":

Go to view and select 'Pixel Preview

3. Select all artwork (remembering to unlock locked layers and objects and make all layers visible) and select "Align to Pixel Grid" on the transform palette. This aligns any pixels which may currently be spanning half a pixel, giving it the blurry appearance. Be aware, this technique can alter paths slightly.

Go to view and select 'Pixel Preview

Designers: outputting graphics for build

Designers will be responsible for prepping layered image files before sending sites to build. Any images, elements or effects that will not be produced using CSS need to be prepped for build as separate files.

1. Firstly, output your logo (if a vector graphic) as an SVG file in Illustrator. Copy the logo into a new web document (set up as a web file, see page 2 of this document) and "Save As" as an SVG file type. This file type will keep the logo graphic sharp.

Designers: outputting graphics for build

2. Photographs: to preserve image quality it is best to keep all images in Illustrator. Collate images of the same size into one layered document, for example, if you have a series of slides for a slideshow, these will all be in the same document. The developer will then output image files from the files you create.

Note for developers: photographs should be output as JPEGs and vector graphics as GIFs

3. Vector graphics: again, to preserve quality it is best to keep all vector graphics in Illustrator. Collate elements of the same size into one layered document. Again, the developer will then output image files from the files you create.

Best practices for prepping files for build

1. Do not use opacities for text boxes
(for example, 100% black with 30% opacity on the text box itself; instead you should use 30% black through your colour palette with the text box at 100% opacity) This makes it easier for developers to pipette the correct text colour.

2. File naming and organisation
Make sure all files (design files and image files) are clearly and logically labelled. Collate build assets into folders named after the pages upon which they appear.

3. Using the Bootstrap scaffolding
Make sure all elements sit within the Bootstrap framework. Remember, this will involve keeping all content within the 940px pixel width; this will allow for a 10px gutter when the website resizes to landscape tablet size.

4. Ensure all images are embedded
Ensure all images are embedded into the document to ensure this is viewed correctly by the developer.

5. Font usage and supplying fonts
Ensure all fonts are web-safe and supply any fonts needed to view the document to your developer.

6. Hover states
Create a series of layers within your document dedicated to hover states (colour-coding these may help differentiate them from your main artwork layers). Ensure these are clearly labelled.

7. Ensure all pages have their own artboards
Before sending an Illustrator document for build, ensure each web page has its own artboard, as opposed to being on separate layers. If your Illustrator document contains a lot of pages, try splitting these into separate documents to reduce load time.

8. Multiplied graphics
Graphics which use a multiply effect will need to be accompanied by their backgrounds when being prepped for build. For example, if a object is multiplied over an orange background, the prepped image file will need to contain the orange background and the overlaid object. This will ensure the effect outputs correctly. Consistency in prepping sites for build makes for an quicker and easier build.