Graphic Design Notes

 Uncategorized  Comments Off on Graphic Design Notes
Mar 202013

Notes on Sprite

Width (exacly to size of first image)
Height (exacly to size of first image)
background-position: 0 -180px; (x, y)

background-poisiont 0 -360px; (x, y)

Read Stephanie Rewis article on BG images.

box-sizing: border-box (if you add padding then it’s not calculalted as part of the total width

Negative margins – sometimes absoloute positioning might be better.

ul text-align:center

li display:inline

a display:inlin-block

 Posted by at 2:32 pm

The Grid System

 Uncategorized  Comments Off on The Grid System
Feb 202013

The Grid


Design is relationships. Design is a relationship between form and content.” These are the now famous words of Paul Rand. (Kroeger 2008)

This is as simple as it gets.  The definition of design and the journey through its history shows that establishing and ordering that relationship has been core to the developmental strides taken in the generic field of design.  In the drive for continuous improvement, one of the manifestations of our pre-occupation with order has been the breakthrough and subsequent gradual improvement of the grid system. 


Grids originated with graphic design and are very popular in print medium.  They have only become widely used online in the past few years.  They have however exploded in popularity and can now be found as a component of many websites.

Website design frameworks producing HTML and CSS had existed for a while before newer frameworks popularised the use of grid-based layouts.  Some examples of grid system frameworks are:

  • 960 grid system
  • Grid system generator
  • Semantic
  • Flexible CSS Grid
  • Modular Grid Pattern

What is a Grid?

“A design grid is a hidden system of guidelines, borders and columns into which elements are placed and to which they are aligned.  It is a simple and surprisingly flexible system for providing a framework for the material being presented within a brochure, booklet, ad (singly or as part of a campaign) or throughout a website.” (Krause, 2004)

The grid is the most vivid manifestation of the will to order in graphic design. (Boulton, 2005)


Types of Grids


There are several types of grids from which a designer can choose from.  The simplest of  them is the the rule of thirds. It’s a method used in photograph also. It involves dividing a page into thirds with two equally spaced vertical and/or horizontal lines so that important compositional elements can be placed along these lines or intersections.

Goldern ratio is another popular method used (approximately 1.618)  for proportioning.  The goldern ratio has been used for centuries by architects, artists and book designers for its aesthetically pleasing qualities and has been studied by mathematicians for its presence throughout the universe..

My personal favorite method is to divide a page into several equal sized columns, which is often used in newspapers and magazines.  These types of publications also commonly use a baseline grid, which is a set of horizontal lines on a page that the baseline of all type sits on.

Anatomy of a Grid

Grids act as guides for the placement of elements in a design. No matter how simple or complex, grids share some common parts, each fulfilling a specific function. Not every one of these parts needs to be present in every grid. (Samara, 2007)

When a grid is being discussed especially online, the focus is mostly on columns and to a lesser extent baselines.  The diagram and definition below gives a foundation for the common language of grids and makes it clear that there is more to grids than columns and baselines.




Format in simplest form a format is the browser window even as page is page is format to a book or magazine i.e. the area which design sits. It defines the live area of a design where type, images, and other media are present.

Margins are the white spaces and seen as the negative space between the edge of the format and the outer edge of the content.  In a composition, the overall tension or lack of it is determined by the proportion of the margin.  So the bigger the margin, the lesser the tension created.

Larger margins create more white spaces and help focus attention on the positive space of the design.  Larger margins also help the eye find a place to rest and can be a good area to place subordinate information.

Flowlines could be seen as horizontal lines that break the space into horizontal bands.  They can be used to help guide the eye across the page and can be used to impose starting and stopping points for text and images to be aligned.

Modules are individual units of space created from inserting rows and columns.  They are the basic building blocks of grids.  When repeated, they create columns and rows.

Spatial zones are fields of adjacent modules.  They are groups of modules that cross multiple rows and columns.

Columns are the vertical division of space on a page.  There could be any number of columns in a grid.  More columns lead to more flexibility, but can also make the grid difficult to work with.  Column widths can be equal or can vary across a grid.

Rows are the horizontal equivalent of columns.  Online, itis harder to plan for rows as the height of the format is often inconsistent and dynamic.

Gutters are the spaces that separate rows and columns or two facing pages.  Typically, we think of gutters as the spaces between columns, but they are also the spaces between rows.


The Advantages and Disadvantages of Using Grid Systems in Web Design

More and more designers these days are using grids (e.g. 960px) in their web designs.  While grids originated with graphic design and are very popular in print mediums, they have only become widely used online in the past few years.  However, they have exploded in popularity and can now be found as a component of many, many web sites.

Grids are used to structure a page layout.  They function as a framework on which to place all of the site’s different components.  A grid is literally a framework of pixels running horizontally and vertically, just like the horizontal and vertical lines on the grids we all used to plot points along the X and Y axis in high school geometry.

This allows elements to be aligned horizontally and vertically, which creates columns that keep things organized.  A well-used grid can help a site to feel more orderly and reduce visual chaos.

Using a grid has several advantages, both while designing the site and when looking at the finished product.   A well-used grid can help a designer visualize the proportions that will look best on the site and to achieve a balance with the white space in the margins of each element.  It helps the designer highlight the most important elements without overcrowding the site.

A grid can also provide stability, making it easier to build the site. Since the grid gives a guideline for how things should be aligned and laid out, the site can be pulled together much more quickly than if each individual element had to be placed and aligned by hand. Plus, if elements need to be switched around, this can be done quickly and painlessly due to the structure and organization that a grid provides.

Clean, modern websites can be created using a grid layout; this is a popular trend in web design today. Aesthetically, designing along a grid can be very pleasing, which is why many popular blogs and sites have turned to a gridded look.

One of the biggest benefits of grid-based web design can be seen in its power to direct the user to specific content you want them to interact with.  For example, it can make it so simple such as the site title, logo and even the brand image itself stand out. The grid layout favours this mode making sure the most important content can be seen without scrolling. Combined with the vertical and horizontal axes that come into play, keeping content above the fold allows the grid to deliver the user-friendly experience visitors demand.

Also, many sites incorporate third-party advertisements to generate the money needed for hosting and other purposes. The grid-based system offers a solution to problems that may occur with Google regarding SEO. So when planning in advance, web designers can lay out an architecture that perfectly accommodates the sections and boxes advertisements will be displayed in.  More importantly, this approach can support advertisements in a way that gives them the necessary visibility without overshadowing natural content.  Sites could get in trouble with Google if a site is highlighting sponsored content more than it is organic content.

However, there are some things to keep in mind when working with grids, as they are not ideal for every site. Some people argue that using a grid as a design framework can stifle creativity, as it provides a ready-made organizational structure. For some, particularly those designing sites that need a little more abstraction, a grid can feel too stifled or too contained.

Sites with little content may also want to stay away from grids, as aesthetically speaking a grid framework does require a fair amount of content to work. Without enough content to fill out the grid, it doesn’t make sense to attempt to use one.

While a grid can speed up the design process in many cases, this is not true for all. A grid helps speed up design by providing an organizational framework, but a site which already has an organizational system in place or which has only a small amount of uncomplicated content does not necessarily need a grid to aid in organization. 


Responsive Web Design

Grid designs can work wonders for sites that are meant to be viewed on a wide variety of devices. A grid can help produce a site that looks and functions as good on a tablet or smartphone as it does on a desktop or laptop computer. The system these layouts use allows a single set of programming code to be used across a multitude of devices, which makes it an ideal tool for developers as well. Using a single set of code not only makes the site easier to build for designers, but also easier to manage for a webmaster.


User Experience Implications

Human mind always attempts to find a pattern and system of logic in everything, including visual design.  Consistency is a key factor that helps a designer achieve this with its users. Since a grid is a consistent system for element placements, “sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page (or site), while developers can update the layout in a well thought-out, consistent way.” (Friedman, 2007)

Closely related to this and loosely based on the Gestalt Principle of Closure, the user can better relate with well-planned white spaces since the invisible but definite grid framework is planted in the user’s sub consciousness.  Also, people have a priori understanding of how things work or at least an opinion of how it should work and many times, the best designs take these preconceptions into consideration and a well formed grid system is largely based upon this. With a grid that is well formed and implemented, users will easily perceive importance due to positional contrast and visual hierarchy.


The grid creates a systematic and consistent rule for placing objects. It creates a visual rhythm. It makes it easier and more pleasant for the eye to scan the objects on the page. Page designs that do not use a grid often tend to look ‘messy’ or ‘unprofessional’.

At the unit level of cells (e.g. 20×20 pixels) with Audi example above where a strict underlying grid is used for all elements on the page, in print design such grids are called ‘modular’ grids.

At the column level (e.g. 4 columns) and the Abn Amro example below where a grid is used for defining the overall layout in terms of columns and margins.  In print design, such grids are called ‘column’ grids.




In this example with the Abn-Amro shop, it can be seen that different types of grid are being used. Not a strict modular grid, but a grid defining some columns, margins and horizontal evenly spaced guides.

Simple station homepage


960px grid with ~16px base line height. 3-column header containing brand banner and at the center the slogan “creates a powerful video site”.

Below is a section split into 4 columns of which 3 have content (mini-banners) and the outer 2 columns are empty.

Finally the Design & web engineering, our philosophy and sustainable concept appear logically in the flow of the visual hierarchy created by the grid.

Company menu


Appears to be a 960px grid with 16unit.  This page mainly has 2 columns from the head through to the body. The footer has 4 columns. 



All grids are functional but not all grids will function properly for every project.  Part of the duty of the designer is to determine which grid will work for each project and how best to implement it.

While it is not the ideal choice for all sites, particularly those that are very simple or very abstract, a grid can be a highly useful tool in designing many sites. Its inherent organizational properties and aesthetic guidelines have helped many designers to streamline their sites and simplify their design process. Using a grid system may not be for everyone, but for many people, a grid system may be the way to go.



“Making and Breaking the Grid” by Timothy Samara.
John O’Nolan – Fully Understanding Contrast in Design (2010)
Jim Krause – Design Basics Index (2004)  David and Charles
Timothy Samara – Design Elements: A Graphic Style Manual; Understanding the Rules and Knowing When to Break Them (2007) Rockport Publishers, Inc.
Vitaly Friedman – Designing With Grid-Based Approach (2007)
 Posted by at 8:04 am

My Thesis Project Initial Idea

 My Blog  Comments Off on My Thesis Project Initial Idea
Jan 072013

Project Title:
Teachers Assistant
An interactive site that enables educators to find schemes of work, lesson plans and resources for a specific unit and allow them to add more to improve the quality. (137/140 Characters).
Elevator Pitch:
This is a site that through Collaborative sharing and focus on best practice teachers can share and access any exam board unit and resources and documentation needed for class. This site will be designed to allow the generation of lesson plans instantly through the click of a button, which runs a query to access the information from a scheme of work that has been entered on to the system. Members to the site will be able to select from a range of sector areas, members will also be able to create on screen schemes of work and upload resources to specific weeks topics. (103/140 Words).
Target Group:
The Problem:
The education sector is one that currently is experiencing dramatic changes throughout all levels, from pre-school to university. These changes continue to keep educators on their toe’s in that they are required to have at their disposal resources and knowledge that in turn will be made available to the learners to allow them to understand themselves and for them to meet unit learning aims and objectives along with other assessment requirements. These materials are becoming harder to find, even when using the Internet and libraries. Which ultimately results in the teachers using planning time to create and manufacture resources to enable this learning.
However as mentioned earlier the changes in education is creating more and more paperwork, meetings, and more importantly taking time away from the educators to create these resources. Additional to these changes created by government policy changes are the “shelf Life” of qualifications, these are determined my OFQUAL (The Office of Qualifications and Examinations Regulation). The standard life of a set qualification is approximately 4 years as an average.
This problem leads the educators to create these materials in their own time, in the evenings and weekends at home. The problem here is people can get protective of these home made resources and are less likely to share them, even amongst colleagues and office friends.
Adding Value:
It is intended by the creation of this site that educators are enabled to create enhanced SOW’s and resources by simply building upon the ones made available on the site, and though doing this the time factor of creating and sourcing material will be reduced allowing for the educators to deliver Outstanding grade lessons based on the OFSTED (The Office for Standards in Education, Children’s Services and Skills) common inspection framework (CIF) Guidelines.
It is intended that this site create a small revenue stream to enable coverage of costs associated to its running and upkeep. The site could look to a free trial subscription that allows access to restricted units and associated resources, and paid subscriptions that offers a user specific sectors, i.e ICT, Health and Social Care or a full access subscription that allows all access pass.
I would like to incorporate anyone that uses the system to be able to create a custom layout of the information stored in the database, this would enable the user to create a theme that is consistent to that of the organisation that they may work for.
Unique Selling Point (USP):
From initial research made there appears to be no site that offers a service like the proposed project stated here. This Site will enable the creation, submission of Schemes of Work (SOW’s) that are detailed and include resources for a specific unit, within a given qualification.
Legal Considerations:
Further research is required around the Intellectual Property (IP) of any works submitted and also the copywriting of any materials that are part of the submissions made.
Non Cognate Websites: – This is a large scale resource sharing, teacher related site, the site offers information regarding the available jobs in the sector additional to the teacher forums for discussions, however this site doesn’t link to specific qualifications and the resources are general. – This is a site that offers resources for keystage’s 3- 5 specific to ICT. This site offers material that can be used as supplementary material to main resources, again there are no links to specific qualification units.

Notes on Typography from somewhere!

 Uncategorized  Comments Off on Notes on Typography from somewhere!
Jan 032013

H1 30% larger
H2 25% larger

P{ margin-left 1.5em
X height – distance between baselines & mean line
• Badani & Futura
• Perpetua & Gill Sans
• Metan San & Meta Serif
• Baskervill & Futurea

 Posted by at 12:16 pm

Design Insights # 1 notes – Responsive Design

 Uncategorized  Comments Off on Design Insights # 1 notes – Responsive Design
Jan 032013

Adaptive -> Changes

Fluid -> Stretches
Resolution & Pixel density need to be considered.

Before starting think about content.

Different devices = different content needs


Tablet users mostly in browsing mode

Designing for multiple screens

  • Desktop
  • Mobile
  • Tablet
  • Internet ready TV
  • Home entertainment system
  • Handhelod games consoles
  •  Adaptive design is very labout intensive and a bit less future prrof
  • Fluid is cheaper and more future proof

Which one to use can depend on the content.


When designing for mobile first design for the smallest and weakest – Javascript & CSs

Progressive enhancement

Check out the mobile first website


Fluid design

Desktop version  – search on top rights

Small version – no search on top rights


LukeW | RESS: Responsive Design + Server Side Components


Project flow:

Agile development, scrum style using 2 week bursts works best for responsive design

  • Design part by part
  • Split into user stories/product backlog

Prince2 – waterfall method


Prototyping saves time & effort, mockup mobile early, real content. Design in the browser/



SASS & Compass – toolset to generate CSS

JavaScript components – may vary depending on device.

  • Interactions- no hover on touch screen
  • Programme for touch start and touch end events


Responsive images

  • Max-width technique
  • Stretch BG images
  • No script technique


Asset production

  • Fonts & be careful of @font-face rendering
  • Look @ fonts on all devices before starting

WikiMobile – nav menu

Equal height columns are a bad idea


No pagination on mobile if possible. Load more buttons.

2% have javascript turned off




Chrome & Firefox portable

Blog posts on head London website



Start with girds and Nav first

Grids in frameworks can be rigid


Bootswatch – customise bootstrap

Skeletion CSS framwork


Mark Pilgrim


Ruby Installed on .???

HTML5 rocks resource list

Create your own boilerplate

No HTML5 on websites at present is safest

WebSockets – continuous connections

Ethan Marcotte

Luke Wrob

 Posted by at 11:44 am

My Web Thesis Project

 Uncategorized  Comments Off on My Web Thesis Project
Nov 282012

My idea is developing a website for a client  

Florescence Foods Limited (FFL)

FFL is aim at sourcing and providing the various foods that meet the health needs of consumers. FFL have launch of their first nutritious, succulent and unique Pearl Royal Coconut Water. (The site I will be developing will be talking more about Pearl Royal at this stage and its sale) FFL do have a URL holding page of but would like an internet presence i.e. full website developed that show case most especially their first product and their Products / Services The Product Pearl Royal Coconut Water has a facebook presence and twitter (Facebook: Pearl Royal Coconut Water UK. Twitter: @PearlRoyalCoco ) I will be developing a site that will have the twitter feeds coming through it and a possibility of blog (if someone they can commit to updating regularly ), otherwise twitter and regular update of the site for promotions will be the only way to make the site dynamic and way to improve its google rating. I am not 100% sure whether the site will be 100% CMS or a mixture of my design and a CMS backend.

The homepage will have Promotions, links such as; About us, Contact Us , Distributors, where to buy and Benefit of healthy living or Coconut water

Note: I have spoken to my contact Dr Ejim about the timeline I will be working with in order to confirm that its okay with them before we start. I am also putting together a contractual agreement between myself and FFL regarding the timeline and provision of contents and information.

Not sure: FFL do have a third party company at the moment ( that are selling their product online. I am not as yet 100% clear whether FFL will want an E-commerce website whereby they could sell their product themselves of they are happy with AQUA-AMORE to continue with the provision of that service.

 Posted by at 1:16 am

Open Street Maps – What are they and why use them?

 Uncategorized  Comments Off on Open Street Maps – What are they and why use them?
Nov 062012

Open Street Map

Below I’ll try to explain Open Street Map and why it’s important to have various open sources for data such as maps! This post is mainly made of up excerpts from

On the Open Street Map Wiki page OSM is defined as “the project that creates and provides free geographic data and mapping to anyone who wants it. Most maps you think of as free actually have legal or technical restrictions on their use.”

Essentially this means that OSM is Wikipedia for maps where any user can add and edit maps plus the data is freely available for anyone to use (commercial or non-commercial).

 How it works for mappers:

A mapper creates an account with The using the Edit button then gets presented with two options:

  • Edit with Potlatch 2 –an in browser flash based editor (easiest to use for new users)
  • Edit with Remote control – a java based desktop editor (bigger learning curve and slightly more technical)

Screenshot of Potlatch 2: Flash based Map Editor. You literally trace the Arial imagery onto the map.


There are a variety of forms of gathering data for OSM(more details here):

  1. GPS – This is currently the most common way of gathering data for OSM, and often preferred or even essential for collecting the initial geometry of roads, paths and other ways.
  2. Local knowledge – Perhaps the best source of data is when you simply happen to know the area very well, and thus for example the names of the roads, shops etc. If the basic road layout is already present, you often don’t need any technical devices and can start straight away.
  3. Tracing maps using Aerial imagery (imagery mainly provided by Bing Maps under agreement)
  4. Photography or drawings
  5. Data may already be collected that requires people to convert it into a map. See local and global mapping projects.
  6. Seeing mistakes in a map and fixing them. There are a number of Quality Assurance tools which can be used to find problem areas.

Who cares?

An abridged version of the FAQ page on the OSM Wiki is below.

Why don’t you just use Google Maps/whoever for your data?

Because that data is copyrighted and owned by multiple organisations like the Ordnance Survey. Google/whoever just licenses it. If we were to use it, we’d have to pay for it. There’s also the potential that Google could introduce adverts etc in exchange for using their maps.

Who owns OpenStreetMap?

You do. The data and software is owned by you, the contributors.

Compare OSM and Google Maps side by side.

Who Uses OSM?

The growing list of names now includes Foursquare, Wikipedia and Apple (though there’s some debate over just how much OpenStreetMap data Apple uses in its glitchy maps, as it also lists TomTom as a provider). Craigslist also chose to use OSM for its own new built-in maps views, but never used Google to begin with.

In summary

As a user of maps, I hadn’t really given it much thought before now but now that I have been learning about the differences in the technologies I think it’s important and great to have an open source map data alternative which is freely available to people and  commercial programmes alike.

 Posted by at 10:36 am


 Everything Else...  Comments Off on GuitarSpec
Sep 192012

GuitarSpec is up and running, register now for full access to the site and help build the database by adding guitars and videos.

Ampersand 2012

 Everything Else...  Comments Off on Ampersand 2012
Jun 172012

My notes from some of the speakers at last Friday’s Ampersand conference in Brighton.

Yves Peters Detail in Web Typography

Choosing a Font

  • Narrow your search by requirements
  • Consider aesthetic preferences last
  • Consider:
    1. Formal aspects
    2. Historical context
    3. Cultural references

Functional Criteria

The OpenType format provides:

  • Unicode character encoding for support of multiple scripts
  • Cross platform support
  • Advanced placement features (e.g. kerning)
  • Advanced replacement features (e.g. ligatures)

Font dimensions:

  • X height
  • Cap height
  • Ascender
  • Descender
  • Small-cap height

Numeral types:

Typesetting Numbers

© J. Bear

Fake small caps:

  1. Decrease cap size
  2. Increase weight
  3. Increase tracking

Make correct use of spacing entities:

  • non-breaking space  
  • thin space  
  • en space  
  • em space  
  • punctuation space  
  • figure space  

Veronika Burian & Jose Scaglione Typographic Matchmaking

Font Selection

  1. Morphology/funciton
    • Title or text?
    • Continuous or fragmented reading?
  2. Technical Aspects
    • Reproduction method
    • Media
    • Screen optimisation
  3. Aesthetics
    • Appearance vs. content
    • Volume and visibility
    • Relationships between fonts
  4. Economics
    • Price
    • Amount of licenses
    • Efficiency

Typographic Matchmaking

  • Start by choosing one typephase or family
  • You don’t have to use branding fonts in other contexts, find other ways to incorporate branding
  • Compare fonts by setting to the same x-height (optical size)
  • Contrasting sans-serif with serif with similar properties to maintain balance
  • Organic (handwritten, calligraphic) vs. mechanic (restrained, formal)

“Focusing on contrast makes combining fonts easier”

  • Make use of hierarchy and dominant/submissive pairings
  • ‘Super families’ are font sets containing matched versions (sans-serif, serif, mono-space etc.)
  • It’s harder to combine two sans-serif fonts, which need strong contrast to be differentiated

Laurence Penney Hacking the Stack

  • CSS font fallback works at character level, allowing hierarchical sub-setting
  • For example, old style numbers taken from one font and all other characters from a different font
  • Subset files must only contain the characters to be replaced
  • font-family: 'subset 1', 'subset 2', 'default', 'fall-backs';
  • Make custom fonts for special characters/icons e.g. arrows
  • Doesn’t require extra mark-up, maintaining separation of content and presentation

Jake Archibald In Your @font-face

Browser Support

  • IE – .eot
  • Other browsers – .woff
  • Older browsers – .ttf
  • Older IOS – .svg

Optimising Font Files

  • Remove unwanted glyphs (font squirrel)
  • Gzip TrueType fonts
  • Speed up subset loading with ‘unicode-range’ rule


  • IE loads the content first and then updates the fonts
  • Webkit waits for the font files before displaying the dependent content
  • Firefox allows 3 seconds before loading a fallback font
  • IE8 shows nothing until all files have loaded (move @font-face styles to the top of the head to fix this)
  • WebFont Loader provides control over the loading behavior for all platforms
  • Serve at least .eot and .ttf
  • Avoid downloading unnecessary files
  • Show content first
  • Make files as small as possible

Elliot Jay Stocks Enhancing the Future

Typography plugins by Trent Walton:

  • Lettering.js – automates character level style control
  • FitText.js – scalable text for responsive headlines

Developing CSS Features

Enable/disable ligatures and kerning:

text-rendering: optimizeLegibility | optimizeSpeed | geometricPrecision 
| auto | inherit;

Select subsets/style sets:

/* use small-cap alternate glyphs */
.smallcaps { font-feature-settings: "smcp" on; }

/* convert both upper and lowercase to small caps */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* enable historical forms */
.hist { font-feature-settings: "hist"; }

/* disable common ligatures, usually on by default */
.noligs { font-feature-settings: "liga" 0; }

/* enable tabular (monospaced) figures */
td.tabular { font-feature-settings: "tnum"; }

/* enable automatic fractions */
.fractions { font-feature-settings: "frac"; }

/* use the second available swash character */
.swash { font-feature-settings: "swsh" 2; }

/* enable stylistic set 7 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";


  • Consider the typephase – does it contain the features?
  • Consider the file – is it OpenType?
  • Consider the browser – which features are supported?
  • Consider the user – will it break?
  • Test OpenType in the browser with Type Cast


 Uncategorized  Comments Off on Spritepad
Jun 152012

If like me you find “sprites” a bit of mystery then you need to check out the free online sprite creation tool at, simply drag and drop the images onto the SpritePad and you can see the CSS being dynamically generated as you move the images around.

When you’re happy with the result it includes a download option to download a zip version of the sprite and resultant CSS, then it’s up to you modify the sprite and CSS to suit whatever you want.

This is an example I played with earlier, it really did take the 5 mins they suggest to generate the sprites etc – easy peasy (and I’m really crap with sprites and images in general).

Now if you want hover style sprites, say for navigation etc, then the only real constraint is that they should all be similar dimensions because you’re controlling the image by repositioning it. Now again using spritepad this is easy to achieve because you can use the inbuilt grid lines to map your images to the same dimensions – there is also an auto align option but you need the premium account for that (and thats not free!).

Finally, if you’re asking yourself why this is useful think about:

– load delays on mouseover image replacement (initial unwanted flash/delay as new image is loaded)
– image sizes (a single combined sprite is generally smaller than the sum of its parts*)

* in the example the insect image (individual) weight was 92kb, or 70kb as a single sprite not a massive saving but every little helps

 Posted by at 11:20 am