Graphic Design for the Web

Here are some really good resources for you; let your eyes have a feast at some of the most prominent tutorial websites - if you find any better ones, just let me know!

Adobe PhotoShop

Computer ArtsComputer Arts

Digital ArtsDigital Arts Online

Good TutorialsGood Tutorials

TutorializedTutorialized

Adobe Illustrator

N Design StudioNDesign Studio

NoupeNoupe

Smashing MagazineSmashing Magazine

TutorializedTutorialized

Design Inspiration

AbuzeedoAbuzeedo

David AireyDavid Airey

Design is KinkyDesign is Kinky

DevkickDevkick

Reality DreamshipReality Dreamship

Smashing MagazineSmashing Magazine

Books

Fundamentals of Creative DesignCreative Design

 

 

Graphic DesignTypography Accessibility & Usability XHTML & CSS Web 2 Web Integration

Welcome to the world of graphic design for the web! Here you will find a wealth of resources on the creation of such graphics. Some of the material is my own, such as supporting PDF files which you can download, and some links point (on the right) to other resources which I think follow best practice and offer suitable theory and practical workshops on how you might go about designing your graphics.

There is absolutely a heap of websites out there which provide good examples of graphic design for the web and for print. I've provided some useful links for what I consider to be the bestest ones! Another really good resource which I subscribe to is 'PhotoShop Essentials" - not exactly a cheap read, coming in at around 6 quid a month, but if you are serious about becoming a whole lot better with your designs then I suggest you make a subscription :o)

Anyway, on with the designs my friends...


 

 

cheeky designs

Take a moment to look at this image, do you recognise it? - you should! click on it to see the full-size image:

Bubblegum Designs

This is the main image which I created and then cropped parts of for the navigation buttons!
Ta-dah!

So, where do you start? Well there are probably a lot of things to consider; some you may already be considering and some you may not have yet thought of. Here are some of the things I might be thinking, which you maybe too..

  • What application/s do I need to design my graphics?
  • What file types should I design in?
  • What colours are appropriate to design something funky and modern?
  • What constitutes a suitable image for the web?
  • The first thing I would suggest is reading this PDF file of mine which introduces you to some of the theory surrounding web graphics (there is some information on print-based media which might help offset things). Take a look at the Electronic Images PDF file below as a starter for 10.

    Images and Graphics

    Here's another one I designed:

    Cubes

    Obviously web design is constantly evolving and never static. Therefore a piece of design which may be 'in vogue' this season may not be next season - as Oscar Wilde said

    “A fashion is merely a form of ugliness so unbearable that we are compelled to alter it every six months.”

    So, do you want to start designing some graphics? Well, I've put together a list of really useful resources for you to take a look at; they are listed by application on the right-hand side of the screen. You will need to be aware of which version of said application you are using as these tutorials cover a wide range.

     

    top

     

    abstract art

    Collage using abstract art

     

    One of my real passions is abstract art, anything by Kandinsky is a must! So just for fun I created these 6 small images in less that an hour.

    These all rely heavily on the filters menu within Photoshop and use the following:

    Render > Clouds
    Pixelate > Mezzotint
    Blur > Radial Blur
    Distort > Twirl
    Distort > Wave
    Distort > ZigZag

    There is a lot that can be achieved using these filters - don't be afraid to experiment with them; you can achieve some striking designs in very little time!

     

     

    into the void

     

    Another one I completed used the Lens Flare filter in Photoshop. I quite like the 'darkness' of this one and the feeling of being lost in the void.

     

     

     

     

     

     

     

     

     

     

     

     

     

     


    abstract squiggles

     

    This one is in total contrast and to me feels very playful; it almost reminds me of when you see oil in a puddle and that filmy look you get.

     

     

     

     

     

     

     

     

     

     

     

     



    top

     

    web 2.0 stylistics

    Now If you really want to think about current graphic design for the web then you might want to take a look at Web 2.0 Design Aesthetics . So what is currently influencing current web design trends at the moment? Well love it or loathe it there is definitely a host of current styles around which can probably be placed under the Web 2.0 banner. This really good website discusses a host of the design aesthetics which we are currently seeing. Please read - mind and come back here though!

    One interesting section from the book by Jason Beaird (The Principles of Beautiful Web Design) details the current trends with Web 2.0 websites. Originally when I began this MA I wanted to explore this current design trend which we have seen (and continue to do so) over latter years. 

    The Web 2.0 design trends seem to be still very much in existence - although I'm not disregarding some of these design practices I do believe that we are perhaps becoming too much of the same. Indeed a recent article by Stuart Brown which is entitled 'Web Design Clichés of 2006' points out many aspects of this current trend.

      • gradients 
      • odd names and misplaced do.ts 
      • diagonal backgrounds 
      • big fonts 
      • white backgrounds 
      • wet floor effects 
      • pixel fonts 
      • tags and folksonomy 


    Gen's Web 2.0 colour palette

     

    There are other trends which also seem to be around at the moment - the star flash to highlight new content and the symmetrical or centralised layout. These really can be seen all over the web at the moment.

    Here's an image I created using the Web 2.0 main colour palette. This was just a bit of fun really and a bit tongue-in-cheek ha ha :o)

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    top

     

     

    swirls

    orange swirls


    It is very common to see swirls used in current graphic design for the web. Here is an example of one I created a while back.

    The tutorial link below shows a more complicated design which uses Adobe Illustrator. If you really want to rock the house why not try out this magnificent tutorial by Abuzeedo - his designs are simply wicked, a true master at what he does.

     

     

     

     

     

     

     

    top

     

    digital imagery

    mind the gap

     

    Here is a simple, yet effective design where I took a simple image of the stairs and manipulated it using Adobe Photoshop; if you really want to see the full tutorial for 'Mind the Gap' go to my main website.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    Crossed Wires

     

    This image is of the back of a computer. The original photo is duplicated and then a small square is applied using the Rectangular Marquee tool. A layer mask is then applied and an Outer Glow effect put on. This layer is duplicated around 35 times, using the Move tool to resposition. Transformations are made on some of the squares to change their size.

    Once the the layers have been made they are then all flattened onto one. A subtle drop shadow effect is then applied. Finally the blending mode of the photograph is changed to Hard Mix. And that is that!

     

     

     

     

     

     

     

     

     

     

    Hard Mix Tricks

     

     

    The original landscape image was extremely underexposed. Adjustments were made to the Auto Levels in PhotoShop. The layer is then duplicated and another Hard Mix blending mode applied.

    This was extremely quick to do and only took a matter of seconds. A simple piece of text finishes off the design.

     

     

     

     

     

     

     

     

     

     

     

     

    top

     

    The Golden Rule

    The Golden Grid


    If you’ve any interest in graphic design then chances are you will already have heard of the golden ratio – if you haven’t then please read on...

    There’s no getting away from it – it’s a peculiar number alright! Some people argue that it is the most aesthetically pleasing of all proportions although others reckon that it’s just been ingrained into our psyches over centuries of misuse. So what’s it all about?


    This basically means that if you take a golden rectangle  whose side lengths are in the golden ratio, (one-to-phi), that is, approximately 1:1.618 – so how the hell do we find out what this mystical number actually is?


    Unfortunately if you are using Photoshop there is no facility to have a golden ratio grid. I spent ages fiddling about with guides and grids but to no avail – then I found this nifty little download
    http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1045114

     

    It’s a Photoshop script which adds a layer (or two layers) to any Photoshop document. The new layer consists of grid (golden ratio or rule of thirds) and frame. After creating grid, you can move, rotate and scale it, in search of best composition. Thanks to the author Radek Przybył for this.

    Anyway, hopefully that has given you some useful tips on better layout and positioning within your graphics designs.

    top

     

    Blocks and Grids

    Purple design using bars

    I like using simple block colours in some of my design pieces. It could be argued that by using some simple and easy lines you can create a nice piece of design quite quickly - the one on the left only took me around 10 minutes to make.

    By just using a simple block rectangle and aligning them in sequence can give quite a stark image. This one also conforms to the golden ratio or rule which I discussed previously.

    Once you have decided on your colour palette it can be quite quick in the process. One very useful resource I've come across is the website ColorLovers - this gives you an overview of colour swatches which contributors have provided them with. It's a really nifty little website and has sparked many a creative moment when I'm designing either a website or a basic graphic.

    Why don't you go and take a sneaky peeky - but be sure and come back here when you are done.

     

     

    cubist


    Another simple design which I created can be seen below; here I just took a photo of the tiles in my kitchen and then manipulated it in Adobe Photoshop. If you really want to see the full tutorial for 'Cubist' go to my main website.

     

     

     

     

     

     

     

     

     

    What is it?


    This one here took literally 5 minutes to create. I was just messing around with some filters in Photoshop and applied the swirl using a simple black and white colour-scheme. As I did this I began to wonder what it could represent. Just for a bit of fun I added the text to the right - again using the black and white.

    From here I actually incorporated it into a webpage and added a 'submit' button to add a little quirkiness to it. Of course I didn't really host it live on the web!

    This was actually one of my earlier pieces when I began my MA but I still like it to this day; predominantly because it just uses two colours.

    Simplicity in design can be a marvelous thing - you don't have to make things complicated to make them good. When the flow happens - you will know about it!

     

     

     

     

     

     

     

    Using Adobe Illustrator

    Cogs

     

    Recently I've been starting to use Adobe Illustrator for more of my design pieces. Originally the idea for this website was a totally different topic and I wanted to use cogs as the main navigation tool. I subsequently dropped the idea but I still kept the designs made.

    I used an array of different sizes and shapes and then added different pieces of colour to try and enhance the designs.

    Which one do you prefer and why?

    Just consider how the use, or non-use, of colour can make such a mahoosive difference!

     

     

     

     

     

     

     

     

    Squares n Layers

     

    This image is also made in Illustrator. This is achieved by actually inserting random Circular objects; these are replicated, then repositioned at random and then re-coloured. From there they are manipulated into 3D and then spaced out further. Overall this graphic took approximately 40 minutes to generate. Really quick and easy once you get the positioning sorted!

     

     

     

     

     

     

     

     

     

     

     

     

    Black and Pink Circles

     

    This image was again contructed using Adobe Illustrator - it simply uses the Ellipse tool and a heavy stroke property - in this case set to 20pt. All I have done here is duplicate the original circle and either resize it, or re-colour it. This only took a matter of minutes to generate.

     

     

     

     

     

     

     

     

    Tribal

     

    And finally here is another example of what can be achieved using Illustrator. I absolutely love tribal artwork and this image was made by simply using the Ellipse tool, distorting it and making a brush from it. Then I used the Spiral tool and repositioned it. I repeated this step several times and joined all of the individual parts up to make the one shown opposite. Simple - or as the Meerkats say - seeeemples!.

     

     

     

    top