How many tutorials can there be on this topic? I don’t know. The more the better I say! Hopefully I can help you understand how positioning works and what it’s affected by, and iron out some of those kinks
Let’s get one thing straight: positioning is vital in web design. When you have odd issues between browsers where elements vanish, don’t show or are a few pixels out of alignment, it’s normally because you are guilty of using margin and padding for positioning your elements. This is wrong because margin and padding were not designed to do that. (of course, if each browser was compliant with web standards there probably would not be an issue).
Positioning exists to allow exact placement of elements within your markup, simple as that. This tutorial aims to help you wrap your head around CSS positioning, which will become one of your most valuable assets in design. (more…)
Tags: absolute, css, fixed, positioning, relative, static, Tutorial
Posted in Tutorial | No Comments »
Every browser has a defualt way of rendering HTML.
For example – if you were to create a new file and pop a little HTML in you would see it sets a unordered list with bullets, and indents it, that it also sets font size to header tags (h1-h6) it defines all the standard stuff. The browser gets all this from a built in standard run of the mill CSS file which it uses to render your code. (more…)
Tags: css, reset, tips
Posted in Tutorial | 1 Comment »
I just thought I would take a quick moment to explain the awesome next() feature of jQuery.
I recently used it for a site I was coding for the wonderful @divinefusion, I will link when its live.
(more…)
Tags: jQuery, next, selection
Posted in Tutorial | No Comments »
So my good twitter friend @tomsturge had an idea that when people came onto his site from a certain place that they would get a small welcome message.
His idea was to have his link with a specific # at the end, in his case #twitter, that when people entered his site via that URL it would trigger a small welcome box.
He asked me for some help as of how to do this with jQuery, although I am by no means a jQuery master, after a bit of thought it all came together.
The tutorial probably wont be the best and most efficient way to create something, but I wanted to show you how easy jQuery can be to get into.
(more…)
Tags: jQuery, Tutorial
Posted in Tutorial | 3 Comments »
EDIT: Tutshelf have been down for a while now – so I have moved the tut back onto this site – you can find it here.
I thought I should post about a tutorial I made for Tutshelf and the amazing response I got from the community! I had so many great comments about it on the post itself, and then technical problems stole them all away…
But the stats speak for themselves! With over 1000 unique hits in a month on a brand new tutorial site, I’m just stoked at how successful its been!
The tutorial is a deeper look at CSS Positioning, hopefully helping people who struggle with it, as I did, finally understand! 
If you would like to read more you can visit the tutorial here:
http://tutshelf.com/the-art-of-css-positioning/
Tags: css, Tutorial
Posted in Tutorial | No Comments »
I have done my first guest tutorial for new tutorial site www.tutshelf.com. This tutorial covers CSS Positioning and explains the 4 different positions available and how they work. It goes into detailed explanation of Absolute positioning and hopefully will help you understand a little better, if you don’t already.
If you enjoy my tutorial and you would like to see my writing style again (I doubt it lol), give me a topic, and I will see what I can do.
Enjoy!
Tags: css, positioning, Tutorial
Posted in Tutorial, news | No Comments »
CSS Block Elements
There has been an increasing amount of DIV’s being used these days, I know I used to be one of those who used them a little too often too. But why do we use DIV’s so much? A DIV element is a brilliant way of piecing together your site, helping you realise your layout dreams. So why am I speaking like a mad man? Why am I claiming DIV’s are used too much?
Because they are!
(more…)
Tags: css, elements, html, Tutorial
Posted in Tutorial | 2 Comments »
One big thing have noticed in the design world is the lack of knowledge in regards to vinyl. What do I mean? Well for example, almost every van you see on the roads is “sign written”. The way that 90% of companies achieve this is via a vinyl that is cut on a plotter (a printer with a knife).
The main problem I have encountered is designers bringing in their beloved designs to a sign maker and being asked if they are ready to be cut. Obviously the reply is “yes”, all the design work is done, its beautiful, the client loves it! On closer inspection however it normally becomes clear that a large amount of fiddling is required.
So the purpose of the next few paragraphs of my first educational blog piece will be to enlighten you in the art of preparing your beautiful artwork for the cutter!
First thing is first, lets get an idea of the media. Personally I use a brand of vinyl called Oracal, a quick description would be a roll 610mm to 1370mm wide of very thin coloured vinyl material. Its sticky on one side, and comes obviously in Matt or Gloss. There are also a wide variety of vinyl’s that are suitable for different jobs, wrapping vinyl’s, printing vinyl’s, endurance vinyl’s, exhibition vinyl’s and so on.
So when preparing your design for cut, you need to know the limitations of your local vinyl cutting sign maker. Most of the big companies will be able to cut up to 1370mm with no worries, for this they normally have a large format printer/plotter. Smaller companies would probably only be able to cut up to about 800mm, although cutting size isn’t too much of a problem as large designs can be cut in pieces and put together when fitted. It’s always good to know what size they can cut at, but slicing your design to fit into the cutter width isn’t really the issue, as cutting programs like Flexi cut can do that for you.
The real issues start happening when artwork isn’t “finished” properly. For this we need to have a look at how a plotter works. A plotter is a printer that has normally a pen and follows a precise path, you normally would find a plotter in an architect or engineers office connected to a CAD machine, (controlled by a grumpy looking guy wearing an iPod… dare you cross him…). Vinyl plotters are much the same, but you replace the pen with a knife. A vinyl plotter will follow a vector path and only a vector path – so break out illustrator!
So your plotter is going to “cut” your design out of the vinyl along a path, what’s so complicated about that I hear you cry? Time for some visual aids…
Now you probably can’t spot any difference between these to logo designs… But let’s have a look at them once we view paths (ctrl + y in illustrator)
As you can see the left image is quite different to the right, yes the right image is cut ready. Let’s highlight some of the issues…
Looking at some of those issues, let’s start with the font. Fonts as everyone knows can cause issues between design studios, if you are sharing a project a lot of the time you would have to share fonts. When you are creating a design to be cut you need to change the font into shapes by outlining it (Ctrl + Shift + O in Illustrator). Also the path between the two words is a stroke, a single line of vector joy, this needs to be outlined to make it into a shape, otherwise there will just be a slice in the vinyl where the path was. On a side note, outlining the path enables it to be scaled to any size and stay in proportion with the rest of the design. Other issues are that there is a clipping mask around the smaller circle to give it a cut away shape; you can’t use clipping masks for designs that need to be cut. Instead you have to use the vector tools, I will show the tool bar from illustrator, you probably will have seen it before…
Explaining each option is like trying to write a tutorial on div positioning, hence why I am avoiding it…
So once you have played around with these and are able to make the first image look like the second, you are thinking in vinyl! Each and every path is a cutting line, each path will be cut by the plotter. This is why it’s important to clean them all up.
When you have cleaned up the design, also checking that there are no scraps of vectors lying around the art board, you are ready to save! To make it as compatible as possible saving in a legacy format is always best. The format of choice is .EPS, this is universally recognised, and saving as an Illustrator 10 EPS means it has a 99% chance of being successfully opened
If you are stuck in an older version of Illustrator, you might have to go to export to make the save to an Illustrator 10 EPS, CS2 and above users can save through the normal save as… option.
I hope this has been some help, please ask questions if I have not covered or explained something enough and I will change and update the document respectively.
Links:
Oracal – Colour Palettes
Tags: cutting, Tutorial, vector, vinyl
Posted in Tutorial | 3 Comments »
