Web Designer - Defining the internet through beautiful design » Illustrator

Create interactive animations from a Twitter feed

Steve Jenkins — Tue, 07 Feb 2012 17:10:08 +0000

Twitter is a great tool for getting the pulse of the world, and is becoming more and more pervasive as mainstream media starts to include tweets in audience participation. The majority of users access and use Twitter through the http://twitter.com website, but thanks to the public API, we can now take the data from Twitter and do something a little different with it.
This tutorial is inspired by the excellent Tori’s Eye site, found at http://toriseye.quodis.com/#webdesigner. This is a visualisation of a Twitter stream that places some stylised birds into a landscape, flying across the screen to deliver tweets. It uses the Twitter JSON API to grab tweets from the Twitter timeline and a smattering of JavaScript to present them in an engaging manner.
In our version we’ll simplify how this is done, but we’ll be using the same basic principles to create an animation along similar lines to Tori’s Eye. Once you’ve completed this workshop you should have the understanding and tools at your disposal to create your own visualisation in new and exciting ways. Perhaps you’ll feel compelled to let us know what you come up with by Tweeting us (naturally) via @WebDesignerMag.

tools | tech | trends: Adobe Illustrator, Dreamweaver, jQuery, HTML, CSS & Twitter
expert: Sam Hampton-Smith
tutorial files: download here

01. Design a mockup
We start off by taking direct inspiration from the Tori’s Eye visualisation and designing a replica inside Illustrator. Our file can be found on the disc, but to get the textures we’ve used you’ll need to visit www.sxc.hu and search for paper and rusty metal stock. Note that we’ve separated out the background and the birds onto different layers for easier export later.

02. Output to PNG
Once we’re happy with the overall visual look, we need to export the graphics in a format suitable for use in the final HTML design. The background can be a straight JPEG as it doesn’t need any transparency. The birds, however, must be in PNG format. You need to isolate one bird and export it – this will become the master bird graphic.

03. Other elements
In Tori’s Eye the trees are separated into a layer above the birds, so that the birds can fly behind them. We’ve chosen not to mimic this for ease of understanding, but we did separate out the trees onto their own transparent PNG layer just in case we want to replicate the layers later down the line. You can find all our graphics on this month’s CD.

04. Create the HTML structure
We’ve got our graphics sorted, so now let’s create the basic HTML structure. Add the step code to a new page in your web editor. We’ll create some basic CSS rules, and to keep it simple we’ll retain all our style and script code in this one file. If you want a quick step up, we’ve included the basic HTML page on the disc – just open up ‘start.html’.

Twitter Animation

05. Add some CSS
Apply this CSS; the full code is on the disc.

body {
font-family:   arial, helv, sans- serif;
font-size:   66%;
background:   #f9f9f9;
padding:   20px;
}
#container {
position:   relative;
width:           1024px;
height:       700px;
margin:       auto;
background: transparent url(styles/background.jpg) no-repeat top left;

06. Grab jQuery
Visit http://jquery.com and download the latest version of the library. jQuery makes it easy for us to interact with different elements on the page and create animations. To this end, we’ll install it at the top of our page, and set up a function beneath ready to hold all of the code to make our visualisation work.

07. Connect to Twitter
Twitter has an API that’s publicly accessible. If you’re creating a full application, you may want to sign up for a specific developer API key, but for our purposes we’re just going to use the public version. We can call this using jQuery’s JSON method. Note that we’re passing in a search term that will return matching tweets – change this to suit you. Full code is on the CD.

var url = “http://search.twitter.com/ search.json?q=iphone&rpp=15&callback=?”;
var tweets = $(‘

’). appendTo(“#tweetscontainer”);

$.getJSON(url, function(data){

// Do something with the data returned

08. Parsing JSON
The data is returned from Twitter as a JSON object. JSON is a straightforward way to wrap data as a set of keys and values in an array. All we need to do is to iterate through the returned array and generate HTML. code from the values for each set of data. Add the code below to do this; full code is on the cover disc.

$.getJSON(url, function(data){
$.each(data.results, function(i,item){
tweets.append(‘

Create content for the HTML5 canvas tag

Mark Billen — Tue, 14 Jun 2011 15:41:36 +0000

Put your graphics straight into canvas in HTML5 with Illustrator

Following the jaw-dropping demonstration of Adobe Edge Prototype, a Flash style environment for creating interactive canvas content at the Adobe MAX conference (2010), you’ve probably been itching to get your hands on it. Until this is released as beta we’re all stuck with hand coding… well, maybe not. Illustrator has had some plug-ins written for it from Adobe and third parties that give some amazing functionality right now, allowing you to create interactive animations for the canvas tag.
In this tutorial we are going to download and install one of the plug-ins that allows us very simply to set up animation and interactivity in canvas. One of the issues of exporting to canvas is that all the information is stored in the drawing commands, made up of moveTo, lineTo etc. When it comes to moving content this becomes slow as the processor has to continually draw all of this each frame. So for complex shapes, we are going to export those as PNG images, to make the animation smoother. While on the subject of animation, it’s reasonably smooth in WebKit browsers like Chrome and Safari, but very stuttery in Firefox, so as yet it’s not going to see off Flash for some time!

tools|tech|trends: Illustrator CS5, Dreamweaver, HTML5
This tutorial originally appeared in Web Designer issue 179 (13/01/11), authored by Mark Shufflebottom. You can download the project files by clicking here

1) Get a copy of AI > Canvas

Open the page http://visitmix.com/labs/ai2canvas/ in your web browser and download the plug-in for your operating system. When the ZIP file has downloaded and extracted, you will have an Illustrator plug-in file. Open the Illustrator application folder on your server and drop the plug-in into the plug-ins folder.

2) Start Illustrator

Open Illustrator and create a new document, choose ‘web’ for the profile and change the pixel settings to 1024 x 768. Click OK. From the disc open the file ‘logo.ai’ from the ‘start’ folder. Select all and copy the image. Close the logo and paste the logo in your new document.

3) Export to canvas

Add some text as shown in the screenshot above to complete the logo. Once you’ve done that go to File>Save, saving the file as ‘canvas.ai’. Now choose File>Export and export as ‘

Design an iPhone-style vector icon

Mark Billen — Tue, 05 Apr 2011 09:26:04 +0000

With mobile apps literally dominating our screens, it’s vital to create icons that are irresistible to look at and touch. The style is usually graphic, vector-based and colourful. The audience leans towards a youthful, tech-savvy demographic and therefore retains a fresh flair with an upbeat colour palette. Inspired by desserts, the icon in this tutorial is intended for a cheeky, playful app. The smooth gradients make it pleasing on the eye and the simple shapes are instantly recognisable, which is possibly the most essential factor in an app. Think about it: out of all the thousands (maybe millions) of icons you come across, which ones are more likely to catch your eye? Of course, ones that stand out. And when it’s that plentiful and miniature in size, it had better be simple enough as to be memorable in the glimpse of an eye – or rather, a flick of a finger.

This tutorial originally appeared in Web Designer issue 176, authored by Wendy Ding. Tutorial files can be downloaded here

1) Simplicity is king

Since icons are merely bite-sized designs, there can’t be too much clutter and it’s crucial to keep things tidy and clean. Once seen at actual size, only the boldest shapes will be recognisable so keep it crisp, free of extra elements and use a good dose of contrast in the colours.

2) Work with layers

The beauty of Illustrator is that every vector shape is editable. Keep each group of related items on the same layer like background, object, title and so on, and name it accordingly. This way, all it takes is one swift click on the right side of the Layer panel to select everything on that layer.

3) Square: round corners

Hit M to select the Rectangular Marquee tool and click on the Artboard. In the pop-up window, enter 4in for width and height. With the square still selected, choose Effect>Stylize>Round Corners at 0.5in. Notice that the effect is recorded in the Appearance panel and is editable by double-clicking on that Appearance layer.

Create a social blog design with Photoshop and Illustrator

Mark Billen — Mon, 02 Aug 2010 12:16:00 +0000

The inspiration behind this tutorial comes from the chatty frenzy and on-going activity in ‘social land’ that’s so prevalent today (think MSN, text messages and Twitter). A mixture of plant-like drawings and geometric shapes suggest a festive mood, while the speech bubbles reinforce the theme of conversation. The colour palette evokes a sense of zaniness like the antsy feeling from reading a juicy story or hearing the breaking news from a trusted friend. Bright pink, red and moss green add to the craze, while a navy blue background sets a more stable tone so things don’t get too crazy.
The first part of the tutorial is created in Illustrator and the second in Photoshop. Although the final working file is a .psd, both the .ai and .psd files are created in a way so that each layer contains one element and is named according to its content. Some of the resources we’ll use along the way are from www.mayang.com/textures and www.cgtextures.com.

The article was originally authored by Wendy Ding and printed within Web Designer issue 168. You may download the companion project assets by clicking here

01 Background begins

In Illustrator, create a new document at 8.5-inches by ten inches. Use the Rectangle tool to create a rectangle in the same size in a navy blue colour – this will be the background. Add a new layer above and create a thinner rectangle in beige – this will be the ‘paper’ that holds the main content.

02 Bubbles in the head

On a new layer, draw a speech bubble with the Pen tool and hit Alt/Option+Drag for numerous duplicates. Resize and rotate each one so none are identical. Right-click>Transform>Reflect to flip horizontally or vertically. Apply colours in red, burgundy, pink and mauve. Make sure they overlap to create a sense of overcrowding.

03 Bubble patterns

Turn the grid on with Ctrl/Cmnd+“. Zoom in very close. Next, create a square spanning across four grids with the Rectangle tool. Click Shift while dragging to make it completely square. Create a circle using the Ellipse tool on the centre points of the first and fourth quadrants inside the square.

04 Colour the circles

Decorate each circle with different colours and apply no fill and no stroke to the square. Select everything and drag it into the Swatches panel to make it a pattern swatch. Click on a bubble and in Window>Appearances, add a new fill and select the pattern swatch. This remains editable in the Appearances panel.

Web templates with hand-drawn, sketchy graphics

Mark Billen — Mon, 10 May 2010 16:33:27 +0000

Hand-drawn art and design is gaining popularity and industry demand. Let’s see how this aesthetic can enhance your designs

The marriage of traditional and digital graphics is a fun and ever-evolving experiment. On one hand, hand-drawn sketches have an intrinsically poignant and unique quality, making it irreplaceable. On the other, digital software is great at mimicking hand-created effects, bringing a whole new look to the traditional approach. This tutorial will show you how to design a template that seamlessly blends the best of both worlds.
The end result is a flowing aesthetic that begs the user to figure out which parts are hand-drawn and which computer-generated. As you try it out, you’ll soon discover this process is not only amazingly fun and useful, but the possibilities are endless. An ordinary sketch or doodle has the potential to become a functional element in a website, while computer-generated graphics add further visual prowess to improve the overall look.

(This tutorial originally appeared in Web Designer issue 156, authored by Wendy Ding)

01 Inspiration

A great starting point for this tutorial is the sketchbook. Every creative person should carry one and sketch ideas whenever they come to you. Abstract flowing lines, fun colours, odd juxtapositions and unexpected patterns are all worth noting down as creative reference. We will be using them to implement a similar treatment and styles into our sketchy web template.

02 Colour palette

The magic of a sketch or doodle is its uncontained quality because it is a visceral expression of emotions and thoughts on paper. The colour palette should subsequently reflect that immediacy, and for this purpose solid graphic colours work well. As a second and complementary element, quiet pastel hues are great for adding softness.

03 Rough sketch

Using natural sketching techniques, instinctively begin rough sketching some concepts across the paper and formulate up with a base drawing. The idea is to get a feel for the elements needed in the finished product: flowing decorative shapes and lines that form together to make a header. For now, we’ll use a regular blue ink pen for a quick brainstorm.

Bring 80′s-inspired styles to your web templates

Mark Billen — Wed, 09 Dec 2009 10:03:30 +0000

The Eighties are making a comeback not only in fashion but also in web design. Here’s how to add some recognisable graphical touches

The Eighties is a special time for today’s Gen-Y’ers. It’s synonymous with our childhood when sunglasses, Rubik’s Cubes, cassette tapes and neon colours were all the rage. It was about exuding an unprecedented loud personality in all fronts: big hair, big clothes, and even bigger shoulder pads.
In terms of design aesthetics, computer graphics had started to become more popular. Everything was over the top and often clashed because of the bold colours, playful compositions, zany patterns or a combination of all of them. Some designs were so visually strong that it was overwhelming to look at. Nevertheless, this is what gave the Eighties its daring edge, which makes it one of the most memorable eras.
With this in mind, let’s explore how to dress up a web template in the style of this unique look. A collage, hands-on approach using bold colours, hand-drawn text, sketchy doodles and the signature spunky attitude all come into play. Totally rad, right dudes?

Tutorial files available here.

01 Design concept

This exciting concept for an Eighties-style design is a whirlwind of playful iconic graphics that can all be associated
with that time. It embodies a combination of computer and hand-created images with some vibrant splashes of colour to invoke an energetic quirk. The open structure of the page invites the viewer to step in as if they were entering a time machine.

02 Design space

There are three columns here from left to right: navigation, main content, and eye-candy graphics. The backdrop for the actual content is toned down compared to the heavier graphics to create balance and visual comfort. Although the menu text is rendered in a sketchy manner, it’s clean and clutter-free and this helps add to the focus.

03 Iconic images

We chose four of our favourite images from the Eighties: a Rubik’s Cube, cassette player, fashionable girl and a sneaker. Sketch these by hand with a pen or marker on white paper. Scan the drawings into Photoshop under File>Import. Double-click on the image layer and hit Enter to exit the default locked background mode.

04 Close Cropping

Then you will need to save the document as a .psd file. Next, delete the background so only the object remains (this is Close Cropping). This can be done with the Magic Wand tool and Polygonal Lasso tool. Clean up afterward with the Eraser tool if needed to make sure all your edges are sharp and the image looks clean and crisp.

Site storyboarding and design

Steve Jenkins — Mon, 07 Sep 2009 11:44:03 +0000

TAKE A STRUCTURED APPROACH TO DESIGNING YOUR WEBSITES AND YOU WILL END UP WITH A DESIGN THAT FITS THE SITE OBJECTIVES PERFECTLY AS WELL AS LOOKING ABSOLUTELY STUNNING TO YOU AND YOUR CLIENT

CREATING A DESIGN for a website that successfully represents the subject matter or business in question is more than chance. When we embark on a new web design
project it’s always very tempting to jump straight into creating visual mockups, defining navigation placement and colour schemes. This can work occasionally, and definitely adds a freshness to the final design, but as an approach it’s full of risks.
As a professional web designer it’s better to take a structured, measured approach where you build a design solution after examining business objectives, user requirements and defining the informational layout; that is, how the information
contained within the website will hang together.
There are many different ways to approach a design project. In this short tutorial we will look at just one way to improve your workflow, reduce risks to meeting business goals and end up with a meaningful design that meets users’ needs. You can adapt this approach to suit your own personal needs – the key lesson to take away here is that having a firm structure in place doesn’t actually restrict the creative process but rather gives it a solid grounding.

Author: Sam Hampton-Smith | Originally appeared in Issue 156

01 Gather information
The first stage of any design project is to find out who you’re designing for. This is simple enough if you’re working on a personal project, but if you’re employed to work for a client you need to ask some crucial questions at the beginning of the process. Establish what the purpose of the site is, who it’s going to be aimed at, what the constraints are (specific colour schemes, fonts and images that are required as part
of any existing branding) and so on. In our case, we’re going to be creating a design for a medium sized engineering consultancy business. Understanding your client and their business is crucial as this will have a huge impact on the design considerations.

02 Define your objectives
Having determined who the website is going to represent, we need to establish what and who it’s for. In most cases your client will want their site to perform a particular function: increase sales, communicate with customers, build relationships or explain a concept. These are the core business objectives that drive the decision to develop a site. Once you’ve defined the objectives, you’ll have a good idea of who the users of the site are going to be. You’ll also be able to set some success criteria; define how you will measure success or failure of the website. For our business the client wants to broaden their customer base, educate existing clients to other services offered and introduce a new sustainable energy service.

03 Create user personas

At all points of the design process it’s useful to refer back to the business objectives, and also the target users. You should ask yourself what the user reaction will be to any design element you introduce. To help measure and objectively record this crucial information, create a series of user personas. A user persona is a caricature of a typical user within the target audience. Develop a separate persona for each major element of the target audience. Give each a name and some broad characteristics such as age, sex, wealth, education and attitudes. Base these attributes on what your client can tell you about their customers (but avoid recreating a real person). Have a look at our personas which you’ll find on the cover disc. If it helps to visualise your users, Google Image search for suitable mugshots for each persona.

04 Create a site map
Now we know what we’re creating, for whom, and what the objectives are. This collection of information allows us to start creating the informational layout for the website: how the content and site information is arranged semantically. A common approach to handling this part of the design process is to create a site map. This is a visual representation of the pages or sections that comprise the site overall. Draw this on a piece of paper and think carefully about the relative importance of pieces of information. Refer to the objectives and user personas to ensure that the key information is readily accessible. In our case, the client wants to push their renewable energy services, so our primary navigation will contain a link to further information about this.

05 Make a mood board

Here’s where the fun begins. It can be tempting to jump straight into a web design project at this stage, but the value of the information gathered and developed in the first four steps will really show a benefit when you start laying down ideas. The idea is to gather together as much inspirational material as possible. Collect this in any way that suits you: a mood board with cuttings from magazines and brochures, a digital clipboard with web snippets and screen grabs, or a big box that you can stuff T-shirts, sandwich wrappers and vinyl records into. Save and record anything that can provide inspiration to your project. If you’re unsure what a mood board might look like, do a Google image search for ‘mood board’ to get some ideas. See the boxout for useful tools to help you create your mood board.

06 Sketches and storyboards
Now it’s time to take your mood board and sitemap, user personas and objectives, and create a series of thumbnail sketches to represent a design solution that encompasses all of these elements within a single layout. Each design decision you make will be related back to the information established and developed in the previous stages. We’re using the company font, Cafeta, to create accent headings and navigation elements, helping to support the branding. The branding suggests the Twenties to us, so we’re aiming for a stylised industrial look which also helps to re-enforce the business message and competencies. Notice that we’ve set aside three large areas for key service messages; as our user personas are busy decision makers we’re going to try to get the most important information across to them quickly and effectively. We’ve still got room for an aesthetically pleasing layout though! Every designer is different; there is no right and wrong answer to the design process, so do what feels right for your project.

07 Reflect

This is arguably the most important phase of the design process overall. You must take time to step back and reflect on the work you’ve done, the design solutions you’re proposing, and what that means in terms of usability and the business objectives. Consider how the users represented by your personas will react to the website; will it appeal? Will they like it? Will it meet their needs quickly and without fuss? Is the design appropriate to the business and its objectives? If you can answer positively on all counts you’ve got a workable design. It’s also worthwhile getting second opinions at this stage; ask some willing volunteers to give you honest feedback on your design approach, and take on board any criticisms without taking these personally – feedback, good or bad, is a useful tool to help you refine your design.

08 Create design approach
Once you’re happy with your thumbnails, you need to develop these into a first digital mockup. Everyone has their own favourite way of approaching this, so use whichever tools you’re most comfortable with whether it’s Photoshop, Fireworks, Paint Shop Pro or Illustrator. We’ve used Illustrator and Fireworks here to refine our thumbnails into a design that fits a 1024 screen width (common for corporate businesses). Choose supporting images carefully, and refer to your mood board to get the right combination of image association and colour. Stick to a defined colour palette throughout the design. Don’t spend too much time on the fine details yet; we need to test that the design works before developing the final product. The photographic images used within our example site design are licensed to Stock.xchng (http://sxc.hu).

09 Prototype your design

Ideally you’ll have a couple of different pages laid out roughly. There are numerous ways to test your design works effectively. Paper prototyping allows you to quickly spot any issues with navigation or information. Print out each page layout and sit down with a volunteer. Ask your helper to perform a series of tasks using your design (for example “locate the contact information for this business”). Get your colleague to point to the button they want to press, then show them the page that will appear when that action is taken. If the user can’t find the information you’ve asked them to, you need to look again at your design. Another approach is to use a tool such as Fireworks which allows you to create functional mockups of the website based on interactive images. Save each page design as a flat image then import them into Fireworks. Add image maps to link between pages where the navigation sits within the design. Repeat the same process as for paper prototyping, but sit your helper in front of the computer to conduct the testing.

10 Attention to detail
Once you’ve established that your design works, it’s time to go back and develop the fine details. Add your “wow-factor” elements here; embedded Movie Clips, careful typography and consistency checks. You still need to refer back to the user personas and business objectives, but by now the design should be very well defined so there’s less risk of going off-message. We’ve added some useful brand-supporting elements here such as ghosted versions of the logo, as well as a caption area for the primary accent image.

11 Refine into final template, then test again

Once the design is signed off by the client (or you’re happy with the completed design where you’re the client), work up the design into HTML in the same way you normally would. We look at some of the techniques involved in realising our design in the tutorial found on page 50. When the design is translated and you have your HTML, don’t forget to test it once more to make sure everything still works. This design approach might seem overkill for some projects, but your clients will thank you for it when their new website meets the specific needs of their users and supports their business objectives as well as looking great.

Recreate tabloid style headers

Steve Jenkins — Thu, 27 Aug 2009 10:29:20 +0000

INCORPORATE RETRO PUBLISHING AESTHETICS INTO YOUR SITE WITH THREE HEADER EXAMPLES OF HOW TO ACHIEVE THIS FASHIONABLE EFFECT

THE ACT OF news reading has largely moved from paper to screen, thanks to the internet. This doesn’t mean that newspapers are dead, its familiar aesthetics can simply take new life in modern-day newspapers: blogs and websites. Bold titles, catchy sub-headers, taglines and graphic styles yield
effective design and add a distinguished sensibility to any site. The result is an innovative interpretation of a tested and familiar visual communication.
Let’s take a look at how this is achieved with three different influences: a financial newspaper, a retro broadsheet, and trashy tabloid magazine. When designing web headers, the most crucial aspect to be aware of is spacing since there is only a limited amount of area to work with. Make the most of it by
keeping everything neatly aligned, clean and legible. Each style offers a uniquely different flavour but all will conjure up the fun of sitting back in your favourite chair and reading the paper.

Author: Wendy Ding | Tutorial originally appeared in Issue 157
Download Tutorial Files

01 First banner

The financial-style design here is like the tailoring in a fine suit, which adds simple sophistication. The title is timeless and bold while other elements echo the same voice, only slightly quieter. The clear and crisp white text on a dark background is an elegant and classic look that highlights the maturity of the website and gives it a clean, crisp feel.

02 Backgrounds

The space around the title is bigger and pure black while the rest are dark greys; this draws the eye and creates a hierarchy. The surrounding backgrounds also have minor
variations: the top bar has a diagonally striped pattern while the bottom is a faint black to grey gradient. These small details add subtle visual interest to the header and give it some extra flair.

03 Starburst

Make an oval shape in Illustrator with the Ellipse tool to use as a guide, then draw zig-zagging lines
around the top half with the Pen tool. Set the colour to #E2D6A3 with no fill and add some sheen with
Effect>Stylize>Inner Glow. Make the settings Normal blend in #9E9C5E, Opacity 75%, Blur 0.15 in and check the Edge box.

04 Dashed lines

In Illustrator, first create a line with the Pen tool in #B4EDED at 1pt stroke width. Then, under the Strokes panel, check the Dashed Line box and set it to 3pt dashed and 5pt gap. These lines will separate the headers but do so very subtly, adding a layer of depth to the site’s header and keeping within the overall intended theme.

05 Second banner

This banner will have a more retro theme. First, scan a multi-columned newspaper section. Then, in
Photoshop, select Image>Adjustments>Gradient Map and make sure Preview is checked. In the dialogue box, click on the gradient to bring up another window. Click on the first Color Stop and make it #685112 for the text, and the second #FFF7DA for the beige background.

06 Expand the image

To fill the whole page, you’ll need to duplicate the newspaper layer in the Layers panel and shift the
position so the two images stack one on top of another. With the Eraser tool, erase along the edges so that the text matches roughly. Merge the two layers when you are finished and you’re background image is coming along nicely.

07 Aging effect

To age the newspaper, use the Dodge and Burn tools to lighten and darken certain areas. Use a low Exposure like 5% and make the disparities random, as the aging effect should look natural. The end result should look like an old newspaper page. When finished, save the image as a JPEG.

08 Corner band

A dark band adds a nice contrast to the newspaper texture. In Illustrator, place the newspaper JPEG by selecting File>Place. On a new layer, draw a corner band with the Pen tool in a dark brown fill at #63452D with no fill. Then, add two thin lines close to the edges in #CCBD8D at 1pt stroke width.

09 Gradient

First you’ll have to drag out a thin horizontal rectangle using the Rectangle tool. Then you need to select the shape and in the Gradients panel, select Radial gradient and set the colours at #CCBD8D and #AD9A74. Then, with the Gradient tool drag inside the shape to apply the gradient.

10 Third banner: tabloid theme

The key to creating a tabloid look is using bright colours and big sans serif fonts that shout at the viewer with commanding force. Use clashing and lively colours like pink, yellow and white since the content is usually frivolous or trivial but nonetheless entertaining. More importantly, it needs to suggest a scandalous appeal.

11 Circle graphic

The type in tabloid design is mostly square and structural, so a round shape gives a nice visual break.
In Illustrator, create a circle with the Ellipse tool in blue at #3E75CE. Then, in the Appearance panel, add two new strokes from the corner menu and make the top one white at 3pt stroke width, and the bottom in a lighter blue at #52A5E8 in 10pt width.

12 Visual hierarchy

With high-intensity colour and letters, it is crucial to keep the design clean and fitted. Otherwise, everything will be too cluttered and messy. Make the title the primary focal point by increasing its size and set it in capital letters. Leave room at the top for a feature line, space at the left for a catchphrase or tagline, and be mindful of the colours’ effect on legibility.

13 Drop shadow

Normally, drop shadows are frowned upon because it can cheapen the look of a design. However, it is quite fitting for a tabloid theme and can be used here. In Illustrator, create the title text in the font Impact at 127pt size with a white fill and 2pt black stroke. With the text selected, click Effect>Stylize>Drop Shadow to bring up the dialogue box. Set the blending mode to normal in black at 85% with a blur of 0.08 inches.

Design a trendy blog header with a retro styling

Mark Billen — Sun, 31 May 2009 09:30:42 +0000

Handmade-looking graphics add a personal touch to a project and inspire a sense of nostalgia. Wendy Ding examines how this can be done for a web banner in Illustrator and Photoshop

With the boom of blogs and social networking sites, the web is getting more and more personal. New websites are sprouting every day, and while it is handy to simply pick a template from the plethora of pre-existing ones, the aesthetics can easily become generic as the site loses its own personality. Too much repetition can lead to an overhaul of similar-looking websites and a diminished sense of individuality, thus adding to the “I swear I’ve already seen a site just like this!” factor.
Naturally, every company, business owner and individual is different from one another, and their websites may be used for different functions, such as an online store, a virtual kiosk for the company or a personal blog. Ideally, their websites should aim to project an accurate and engaging reflection without sacrificing too much individuality. This tutorial will demonstrate how to add a dash of personality that simultaneously highlights the function of the website.

01 Target audience

We’ve created a banner for a cute and girly dessert shop for young and fun-loving females like myself. In order to maximise appeal, we picked visuals that will attract them (and myself in fact): heart shapes, pastel colours, fashionable patterns in a bright and cheery tone. The right look is essential in drawing in the right crowd.

02 Choosing visual elements

A great exercise in choosing the right elements is to look at the selected images and see if it implies the correct idea. We chose four elements that best embodied the notion of dessert: icing, picnic tablecloth, hearts and cupcakes, because I couldn’t help but feel my mouth water every time I thought of them!

03 Colour palette

Make sure that you use colour wisely, as it sets the overall mood of a website. While it is subjective to individual taste, some rules will always apply: black is bold and serious, white is light and airy, blue is cool and tranquil, and so on. We’ll go for a pink and red palette to emphasise femininity, playfulness and fun.

04 Title text

Here we’ve chosen a fancy handwritten font to accentuate its delicateness. I also wanted it to emulate smooth chocolate and wrote it on a curved line. Create a curved line with the Pen tool, select the Type tool and click on the line to type. To change the placement, hover over it with the Direct Select tool and then drag.

Produce eCommerce sites with genuine style

Mark Billen — Thu, 26 Mar 2009 14:52:07 +0000

SHOPPING FOR A NEW WARDROBE ONLINE IS NOW ALL THE RAGE. LEARN HOW TO DESIGN A SITE THAT’S BOTH FASHIONABLE AND FUNCTIONAL!

This tutorial will show you how to design an eCommerce fashion site. Eye-catching and trendy graphics are great for drawing attention to a website, but ease of navigation will always reign supreme as the user should be able to swiftly browse and see the products no matter what. We created a mock layout in order to show how to combine fashion and function to make this happen. Remember the importance of clarity and hierarchy; what you initially want to draw the user in with (an image, tag line or both?), what products are available and what section of the website the user is currently on. We illustrated six dresses for the clothing section and built the website around it, as the products should always be the primary feature. The rest is all about tailoring (if you’ll pardon the pun) and choosing the right colours, patterns and the right amount of detail to maximise the overall appeal – just like a real outfit!

01 Initial idea

Step 1

First, figure out the target audience for the site and what theme would best appeal to them visually. Then establish a solid theme or look for the project. For this youthful, fun fashion site, we chose a nature and dream-inspired theme. Explore and brainstorm for the appropriate imagery

02 Rough sketches

Step 2

Now you have a theme, you need to come up with some visual elements. The sketches at this point are loose and uninhibited – anything goes! Next we refined the better of the batch and developed them into a more finalised stage. We lightly shaded it with pencil for a rough guide

03 Layout

Step 3

A good layout makes the website more user-friendly and understandable. It should be built on the nature of the site: what is the main function? Make a list of the main components of the site and divide them into a banner, menu, main section, shopping-cart section and footer.

04 Layers

Step 4

Organisation is absolutely critical in vector projects. Whenever you’re dealing with multitudes of elements, put related elements on separate layers and label them with a short and effective description. This also helps to think logically about the stacking order of the artwork.

05 Tracing refined sketches

Step 5

The sketches are scanned and placed in a template layer in Illustrator at 50 per cent Opacity. Trace with the Pen tool to turn the sketches into vector shapes. Initially, use a black stroke with no fill so the sketch is visible underneath. Colour is added later when the shapes are developed.

06 Hierarchy

Step 6

A solid hierarchy increases the overall design flow. A banner establishes the mood, the product section is next and then the shopping-cart section since it is an online store. The screenshot above shows how the eye should travel from one to three.

07 Colours

Step 7

It is important to choose colours that suit the nature/dream theme, so we went with gradients of teals and pale greens. Exploring with colours is the best way to create an image that you’re most satisfied with. Above are screenshots of some other options experimented with.

08 Shapes

Step 8

Illustrator’s most powerful tool is the Pen tool, and it can lead to a ton of fun and endless experimentation once you master its Bezier Curves. Keeping in tune with the theme, create various nature-inspired organic shapes, like flowers and palm leaves that embody dream-like qualities.