Advertise here via BSA

Creative Fuel is a periodic collection of design and creativity awesomeness found around the web. Find out about new apps and services, the best freebies, and other significant news from the design community!

Design Freebies: Music Vectors, Login Form & CSS3 Buttons

Building a music app? We’ve got free vectors for common features such as shuffle and repeat from 365psd. Also from 365psd is a modern, minimalist login form. Finally, Smashing Magazine has released a heap of buttons for 72 different social and web services — all in CSS3, including the little icons.

Check them all out:

CSS Trick: Triangles with Shadows

Everyone knows you can draw triangles with CSS3, among many other things (such as the icons on those buttons above). But you can’t then apply a shadow to the triangle. Chris Coyier shows us how to use a whole bunch of obscure Unicode characters as vectors you can apply shadows to in your web designs.

Typography: Creating Novel Pro

I Love Typography has posted the story of the Novel Pro typeface family’s development, written by its creator, Christoph Dunst. It’s a reasonably long page, but a good read.

Boulton: We need a critique culture

Reputable web design Mark Boulton talks about how a culture of critique in art school and the workplace has helped him grow as a designer, and how the web design industry lacks this — partially due to its reliance on distributed teams and remote working. Boulton proposes a way we can build more of a critique culture. Well worth a read, plenty of thought and discussion.

Weathered brick wall photo by Shutterstock.

Quick Tips: How to Speed Up CSS Rendering

Onextrapixel presents a basic guide on speeding up your CSS rendering time and writing more efficient CSS in general, by designer Faraz Karimian. Well worth a look — if you’re building fairly complex designs, these tips will really be helpful, but it is good to make them habits before you need them.

The Font Wars: A Story on Rivalry Between Type Foundries

Simon Loxley has written a fascinating history of IP theft and rivalry between type foundries over the years. Check it out at Smashing Magazine.

Advertise here via BSA

Last week, we looked at 50 black and white logos and talked about the need to design logos in black and white first so that they can be reproduced in the broadest array of media. This week, we’re looking at the flip side: exuberantly colorful logos. You might not want a logo as bright as one of these, but adding some color to your finished black and white version can help a logo pop out in a design or piece of stationery, and can be useful when surrounded by other brands. Take a look at these 50 colorful logos and tell us what you think: would your personal logo be in black and white for stark impact or use color to draw the eye?

Team Voodoo

Flit

FunGumz

Demiu

Adriatic

perth Website

celebuphants

Candy Tree

Stemford

Pixel cake

vodovo

Aquapark

Pastel Fly

eco resources

Juice

The Chaai

Octo’s Garden

Retro Monitor

Techno Dream

Hlavathy Zsofia

International Management & Development

Chameleon Minds

Barich

Show Splash

TCC

sun fox

Brand Events

inkboutique

Drwatopia

Blumen fur die Lieben

flowled

Wildkid

Zemelyshka

Aurora

Koloro

Pet& You

Mountain Studio

Pendeca

Where to tomorrow

freshgui

Sweet Toof bakery

alcePixel

Yezhevika

oarta

Tropic JUngle

Hutville

RAC2012

coloraa

Talksaboutlove

Auras

Looking for a logo?

Find some of the best stock logo designs at BrandCrowd, or find colorful logo design jobs at DesignCrowd.

Advertise here via BSA

It’s campaign time in the US, and we all know what that means: we’re in for a circus more entertaining than Cirque du Soleil and more ridiculous than Bozo the Clown. You might even think all your news channels are redirecting to Comedy Central.

One of the best examples of late is the so-called Dog-gate, in which pundits tried to sway the debate on who should run the power with the largest economy and military in the world based on Mitt Romney’s treatment of the family dog in the 80s, revolving around an incident involving a dog who couldn’t control his bowel while surfing on the car roof. Not to mention the Republican rebuttal over Obama’s admission that he’d eaten dog as a six-year-old in Indonesia.

Since we’re always looking for ways to give designers money and we love a good laugh, we decided this was cause for a competition. We want you to come up with your own humorous “Presidential Running Pairs” — whether its Romney and his dog Seamus or one of your own invention — and knock up some funny logos for them.

How to Play

It’s simple: design a logo for one of the presidential candidates and their humorous running mate and submit it. You can do this as many times as you want over the course of the contest. We’re using the DesignCrowd contest platform to run this, so you’ll need to create a designer account there and submit your logo to the contest.

Click here for the DesignCrowd contest page.

We’ll share the logos submitted with our readers and may use impressive submissions to promote the contest, but rest assured that this is a contest for fun only and these logo designs will not be used for any commercial purpose and will remain the intellectual property of the designer.

The Prize

We could offer you an Xbox or a Wacom tablet or something fun and nifty like that — but we know you probably just want a new chair or to pay that overdue phone bill. So, we’re offering good old cash to the designer of the best logo, as voted on by the FUEL staff. The first place prize is $300.

For the $200 second place prize, designers will need to post a link to their logo on the Fuel Your Creativity Facebook page. The prize will go to the designer who garners the most likes. Make sure to get your friends and family voting for you!

The winner will receive their prize money via DesignCrowd when the winner and runners-up are announced.

Dog’s face image via Shutterstock.

Advertise here via BSA

There are many different image file formats — PNG and JPEG and each are good for their own specific uses, but there’s a few things that make the GIF (Graphics Interchanged Format) different. GIFs tend to take up less room than similar images in other formats. But perhaps what GIFs are known for — and when used poorly, despised for — is their ability to show animations while retaining their tiny file sizes.

Despite the hate that is often heaped upon GIFs a little too broadly, there are plenty of instances where an efficiently sized animation could come in handy, and you should know how to create one. In this tutorial, we’ll create and export your very own GIF animation using Photoshop CS5.

Part One: Preparing for Animation

1. Firstly we need to actually create our images. Imagine a GIF as a keyframe animation and each frame is a different image — now we need to create each individual image that we’re going to put together to form an animation.

2. Open up Photoshop and create a new document, ensuring it has a colored background and isn’t transparent (traditional GIFs don’t support transparency). For this tutorial I’ll be using a document that has a white background and is 600 x 400 pixels, and I’ve called it 001Frame.

3. Because the purpose of this tutorial is to simply get you started with creating GIFs, we won’t be making some sort of extremely complex animation masterpiece — I’ll keep it simple while teaching you what you need to know to create more complex animations. For now we’ll just move a square across our canvas, while making it bigger and then smaller.

4. Grab the rectangle tool (or hit ‘U’), draw a rectangle on your canvas and give it a color. If you hold down Shift and draw the rectangle, Photoshop will constrain the proportions of the rectangle and make it a square.

5. Now, duplicate the square’s layer and call it Shape 2 (make sure Shape 1’s layer is always at the top).

6. Change the position of the square so that it aligns horizontally with the first square and enlarge it slightly. Change its color if you want. Continue duplicating and changing your squares until the entire width of your canvas is covered.

7. Once you’ve lined your squares up you need to give each layer a white background so that only one shape will appear in each frame. So, for Shape 1, you’ll want a white background over all of the other shapes. Select the rectangle tool again and draw a white rectangle to hide the other shapes.

8. Once you’ve created a shape to cover the other shapes, you need to convert both the shape and its background to a smart object and then rasterize them. To do this select both the shape and its corresponding background and right-click them. Click ‘Convert to Smart Object’ to combine both layers. Now you can right-click the object and select ‘Rasterize Layer’. Do this for every pair of shapes.

9. Now, you have a sequence of shapes on your canvas and you’ve prepared each of them to be animated. Actually, just creating these frames was probably more complex than actually animating it!

Part Two: Animating

1. With all of your prepared, rasterized shapes, it’s now time to actually animate them. Firstly go to ‘Window – Animation’ and click on the button in the bottom left of this new palette to switch to a timeline animation.

2. Now, click on the small icon in the top right of the palette and click ‘Make Frames from Layers’ and ensure that for each frame in the timeline, the background layer is visible.

3. For each layer on the timeline, you’ll be able to see a duration of time. Change this to whatever you feel it necessary — for this tutorial, I’ll use 0.05 seconds.

4. Now, we’ll make the animation loop. Select the drop-down menu underneath the first layer in the timeline and select ‘Forever’ — this will make the animation loop forever. Be warned that the liberal use of this setting is a big part of what gave GIFs a bad name!

5. You can now preview your animation by pressing the play button at the bottom of the animation palette. If everything has been done correctly, it should play a fluid animation — although you may have to tweak the order of your frames to get them appearing in the right order.

Part Three: Exporting

1. So far, we have our animation created within Photoshop and we’ve tweaked the duration and the order of the frames. Now we want to export it and share it! Unlike traditional Photoshop images and graphics, you need to export a GIF differently.

2. To export, go to ‘File – Save for Web & Devices…’ and you’ll be presented with a dialogue that’ll display various options.

3. By default, the GIF preset settings are sufficient and work but if you’ve changed something in the past, make sure they correspond with the values and options below:

Settings

4. Once you’re ready to go, click Save, give your animation a name and export the file to the destination of your choice.

5. Now, you have saved your GIF, go ahead and open it up in a web browser or select it and press the space key to quickly preview it. Congratulations! You’ve successfully created your very own GIF image! This tutorial has served to teach you how to use Photoshop’s basic animation capabilities, how to configure the timeline, how to animate layers and how to export your graphic so you can use it online and on your computer!

Final Outcome

Some browsers may play this GIF back without any frame delay — if this has the speed of a particularly annoying strobelight for you, try downloading the image and viewing it outside of the browser.

Download the source files

Advertise here via BSA

One of the most commonly given pieces of advice on the topic of logo design is that you should always start the project in black and white.

There are a number of reasons for this. For one, it keeps you from using color as a crutch and getting the lines and shapes perfect because there is nothing present to distract from them. Secondly, it means that in the myriad situations where your logo will be reproduced in black and white, it’ll look good because it was initially designed for that scenario.

Designers can then add color to their logos, whether that’s coloring the illustration, or applying the brand colors to the mark.

In this showcase, we look at 50 black and white logos that haven’t been colored. Next week, we’ll look at 50 exuberantly colorful logos, and see whether you, the reader, think one style or the other creates a mark with more impact and memorability — or if it just depends on the project and the mark itself.

Menitiz

Runner Press

Black Frog Industries

Bulldozer

Nexya

Moove

Logo Milk

Dinoviking

City Logo

chameleon

vineria

Bijoux

Eightie

Urbanoiz

Museum Of Japanese Balance

Insanity

Mobius egg logo

First Aid Studio

Ninja wine

Old New Republic

Banditos

Cennik

Occupy

Skyrocket

Batwomen

Siskin

Ark Woodworks

speaker

Restaurant guide Chef

hole in the Wall

Lightegg

anthill

Bullock

Designfirst

Furry Logo

epic comments

HE

blacksplash

Trust

Native

NR

Moving Pictures

Fotograf

Wrench Racer

Anne Flower

Feodor Rubert

Afflante

Eleven

Badcouture

White Rabbit

Looking for a logo?

Find some of the best stock logo designs at BrandCrowd, or find black & white logo design jobs at DesignCrowd.

Advertise here via BSA

Creative Fuel is a periodic collection of design and creativity awesomeness found around the web. Find out about new apps and services, the best freebies, and other significant news from the design community!

Design Goodies: Basic Social Media Icons & Transparent Flip Clock

First up, we have this great set of social media icons from 365psd and Fine Goods Market that by and large covers all the bases you could want for social buttons on the modern web. There are a range of variants — circle, rounded square, square, symbol and monochrome — and two size options. These cost $5.

This edition’s freebie from 365psd is a great transparent flip clock. If you need to put a countdown to an event or launch on your site, this freebie will make it super easy.

SpellTower: The Word Game with Beautiful Typography

SpellTower has been around for a while — but you might not have heard of it until recently, when creator Zach Gage started a sale campaign to take on Rovio and Zynga in the App Store charts. SpellTower never quite displaced them, but it did get a new wave of press and buzz in the process.

More to the point, if you’re a fan of word games but want to play something that feels like it pays more attention to type than, say, Words With Friends, you definitely should give SpellTower a shot on the iPad or iPhone. It’s gorgeous, and so is its website.

Illustration Inspiration: Steve Argyle’s Star Wars Portraits

At Fuel, we love great illustrations and we love Star Wars. The one thing we love even more? Great Star Wars illustrations! Check out these awesome illustrations by Steve Argyle over on Psdtuts+.

Critical Documents for Freelance Designers

What sort of documents do you need on hand to run a freelance designer? If your answer was none, you’re exposing yourself and your business to a boatload of risk legally, and a bit of frustration when you need to put something on a letterhead in a hurry. According to Steven Snell, there are seven critical documents, including contracts, stationery and more. This is a must-read for all freelance designers, and freelancers in general.

Contract and coffee photo from Shutterstock.

LayerVault

LayerVault is the holy grail of web apps for designers. With version control, unlimited storage, a toolbox of web-based design tools and features for easy team collaboration and a simple sharing tool that allows you to quickly show a client or fellow designer a file or even a single revision.

Though there’s a 30 day trial, there’s no free edition suited for amateurs, so this may only be attractive to serious freelancers or design teams in a business, but it still looks like a fantastic tool to try.

Just My Type

Having trouble coming up with a font pairing you like with the webfonts available to you? Dan Eden’s Just My Type features a collection of great pairings with fonts available from Typekit. Eden has included several options using fonts available on Typekit’s free plan, with most using fonts only available on the paid tiers, so this tool should be handy for just about everyone.

Advertise here via BSA

Textures are a wonderful tool to use for all kinds of design. Not only can textures make something look more interesting, they also add a sense of material realism that people can connect to. There are very few materials in the “real world” that do not have some kind of texture to them.

A lot of us know how to find great textures and throw them into Photoshop and set the layer blending mode to overlay.

But sometimes, this doesn’t give the desired result. In this particular instance, the color in the texture is causing the color in the main composition to look a little off from what I had intended it to look like. The texture itself isn’t having as much of an effect as I’d like for it to on the edges of the composition, but I don’t want it to affect the middle as much either. Also, I’d like it to be a bit more grainy.

All of these things can be achieved right inside Photoshop. To fix the color issue, the first thing we need to do is desaturate the texture. (Shortcut: Cmd/Ctrl + Shift + U)

This removes all hue properties, and leaves only luminance (grayscale) properties.


Now, we want the image to have more of an effect on the edges of the main composition. What we want to do is increase the contrast of the texture in its original form, but also keep another less contrasted version. We will get to how to make the edges more affected after we bring the texture over onto our main composition.

First, we want to duplicate our layer (Shortcut to duplicate layer: Cmd/Ctrl + J) twice, and delete our background layer. We can name these two new layers “contrasted” and “flat”. Then we will apply Curves to our “contrasted” layer. Make sure this layer is on top, or else you will not see the effects of Curves. (Shortcut for Curves: Cmd/Ctrl+M)

The amount of contrast you use will depend on your project, but I usually like to keep quite a bit of mid-tones in textures I use. (See the curve created for an idea of how to increase contrast with Curves.)

We now have our original desaturated texture and our higher contrast texture. we can bring these layers over to our main composition. Select both layers by holding Shift or Cmd/Ctrl and clicking. Now drag from the layers palette of the texture composition into the main document composition.

One of the first things we want to do at this point is make both of our texture layers smart objects. This basically will allow us to scale them without doing irreversible damage to the resolution.

Next, we want to set both layers to overlay for the time being, and turn off the “flat” layer. We can immediately see the difference that adding contrast has made. But again, we are looking for the texture to be a bit more grainy, so we are going to scale down the “contrast” layer so that more detail can be seen. Transform the layer, and zoom out until you see the edges of the texture.

This could mean zooming out quite far, depending on how high resolution your texture is. Holding Opt/Alt + Shift, you can scale the texture layer towards the middle. You then can zoom in and take a look at how the texture is affecting the composition before you accept the transformation. Once you are satisfied with the look of the texture, press Enter to accept the transformation.

We will now add a layer mask in order to remove some of the texture from the center of the composition. Unlink the layer from the mask by clicking the chain between the mask and layer. (This will allow us to move the texture beneath the mask if we decide we want to scale it again, etc).

Take a basic brush with a fairly low hardness between 10-20%, and set the foreground color to black. Make sure that the mask is selected, and paint in the middle of the composition to remove parts of the texture. If you remove more than you intended, simply change the foreground color to white and paint over that portion again to restore it. This stage is very subjective, and can’t really be covered step-by-step; the main idea here is that you can use the mask to create changes, but that also you can undo those changes if you need to.



Once you get the contrast texture the way you like it, turn off the layer for now. Turn on the “flat” layer. If it doesn’t seem grainy enough, scale it in the same manner as the contrast layer was scaled. This will be the texture we apply to the inner portion of the composition, so that it doesn’t look too “cold” in comparison to the higher contrast edges.

Now duplicate the layer mask from the contrast layer by Opt/Alt-Clicking and dragging it. With the layer mask selected, invert it. (Shortcut: Cmd/Ctrl+I)
Now turn on all layers.


The “flat” texture towards the middle is a bit too strong for what we are going for; change the opacity of the layer from 100% to 30-50%. Do the same for the “contrast” layer if it is too strong. This is based on taste as well.

Adjust the masks and opacities until your desired affect is achieved. It is better in most cases to use textures in a subtle manner rather than as strong as possible. In this case, I ended up bringing the opacity of both texture layers down even further, and adjusting the masks slightly. The final product again is a matter of taste; this article’s purpose is to show you the flexibility that photoshop offers with regard to textures; now, instead of simply dropping a grunge texture onto a file, you can refine your use of textures.

Other tips:

• Only use textures if it makes sense to use them. If the interface doesn’t call for grunge elements, don’t use them.
• Expand your texture library to include color-based textures, fabric and paper, liquid, wood, metal, grunge, lens blur, lights, and many of thousands of other textures by researching for free texture sites online. The texture used in today’s examples is part of Andrew Kramer’s Riot Gear, which you can find here. Other great places to get textures include Lost and Taken, Bittbox, and CG Textures.
• Don’t be afraid to create your own textures! Sometimes, you can’t find the best one to suit your particular project. Pull out that digital camera, or borrow your buddy’s, or use a scanner.

Advertise here via BSA

We live in a world where technology is all around us. How many of us spend one day without checking email, taking calls and sending text messages? The great progress in technology scientists have made in the past few decades has been unprecedented, and has given way to multiple new industries and affected just about every existing industry.

In this piece, we look at 50 logos that exemplify this high tech world and the companies producing that technology.

Infinite Power Technology

ahost

Mobiversal

iPhone Repair

Dingo Apps

Inferno Solutions

Dubai Internet City

Rocket

Link Up

Neanet

Cloover

Moby Clip

MetroMobile

Kitapps

Optico

TV Patrol

Koorem

Imara

Coolchatta

Kangocase

Highwire

Pocket Mailer

FlightSensor

Coding Machines

Roopor

Moaction

neuro-network

Killerss

Smorss

Nippytel

Storemore

Snd.fm

Datastream

Mobilear

Websovet

Chart App

Radity

Urbanoiz

Webinteractive

Prismabox

Brancom

Ecorn

Speedynotes

FishBox

Steampunk Terminal

SafeMouse

Ninja IT

Worm Video

Mixapps

iTV

Looking for freelance design work?

Find technology logo design contests and logo design jobs at DesignCrowd.

Advertise here via BSA

Photo: Presence by maistora.

Rewind to ten years ago.

In 2002, the iPod had just hit the market the previous year. Netflix hadn’t had their first profitable year yet. It was still 2 years until Facebook, MySpace, Flickr, GMail, or Orkut were officially introduced. The next year came YouTube, and the following year came Twitter. Wordpress wasn’t born until 2003. jQuery was still 4 years from being announced. Blackberry wasn’t released in the US until the next year.

Windows XP was only a year old, and at the beginning of 2002, IE5 still held about 50% of the browser market. What would later become Firefox was released; Safari still didn’t exist.

There are plenty of other interesting and fairly surprising facts about how much the world has changed in ten years. Without going into detail, think 20 years back. You know, when cordless phones in your house were a big deal.

What an incredible leap forward! And yet, we can see these types of advancements throughout history. In less than 70 years, humans went from not being able to fly whatsoever, to flying to the moon — and walking on it.

The creative technologists are the ones who could see it coming.

The truth of the matter is, we now can barely imagine a world without social media. We can’t imagine searching a library for a quote. It seems crazy to think that any major corporation wouldn’t be found on Google. But let’s think about how these ideas sounded ten years ago.

“Within seconds, you and almost a billion others will be connected to your entire social sphere. You’ll have unlimited space to share photos. Oh, and it will be free.”

“You will be able to look down at a phone (that is touchscreen, by the way) and know exactly where you are. Places nearby will be digitally indexed and at your fingertips, and you’ll be able to connect to the entire internet in seconds.”

“Mobile, handheld HD Video and picture sharing will be commonplace. Video phones will begin to take over the market. Anyone will be able to publish content to the web with little to no knowledge of web technology.”

“Your music, photos, videos, contacts, documents, and anything else you want will be available at any time by a persistent server grid that is potentially hundreds or thousands of miles away from you called ‘the cloud’.”

These statements would sound lofty if you think about what didn’t exist in 2002, in the same way that “going to the moon” likely sounded impossible to the Wright brothers. But indeed, all of these things came true. The creative mind can imagine these things, however, without constraining to existing technology or even projections or timeline parabolas explaining the course technology might take. Imagining a progression of technology is nearly impossible to do, as technology is largely based on discovery and experimentation; discovery and experimentation are close relatives to creative thinking.

So what should we imagine today? It’s almost certain that what we think can happen will be far surpassed. Will the internet become traversable by consciousness? Will governments divorce spatial boundaries and instead create “The State of Facebook”? Will Facebook and Twitter be gone? Or will they overgrow? Will ubiquitous computing become an abundant reality? Will robotics advance into a state of semi-autonomy?

I’m not suggesting we get lost in thought about a robotic army or try to figure out what is going to happen next in the grand scheme of the Internet.

But what we do need to do, as the designers of the future and creative innovators, is allow our minds to open up to possibilities that we once may have thought were inconceivable, impossibly unprofitable, or just plain bad ideas. Truly removing the boundaries we place on our thoughts might open us up to the risk of a bad idea — but it’s also the only way we can really empower our creativity and surpass technological boundaries with vision.

Advertise here via BSA

Most people don’t often stop to think about the meaning of a logo, generally just taking them at face value and letting those meanings do their work subconsciously. Every now and then, usually after enough repetitions, it becomes obvious: there’s an arrow in the FedEx logo, or the compass pointing north west in the Northwest Airlines logo. Designers think about this kind of thing all the time, both when creating logos and looking at the work of other designers. Here are 30 logos that work because they symbolically describe what is being said in the name.

Vertias Wave

HillRoad Service

OpenWater

Spark Design Group

Alchemic Marketing Consultants

Falcon Eye

Orange Productions

Standout

Beefree

Wakeyou

Yoga Infinity

Albino Rhino

Tee

Designfresh

Buzzsprout

Catch 5

Limelock

Audiotennis

Turtle Island Spas

Petfoto

Drip

Spellchecker

CodeFish

Battery

Smaszdesign

Mindberry

Firetree Grille

Bounce Bounce Inc.

Beatlove

Peeled

None of these require a Turing machine to decode, but some are more obtuse than others. Veritas Wave is quite obviously represented by a V-like triangle with a wave effect, while Catch 5 uses a hand to represent catching something, but also uses the hand to represent the number 5 with the fingers. Tell us about your favorite symbolically descriptive logos in the comments, whether they’re more cryptic than these or enjoyably obvious.

Looking for freelance design work?

Find logo design contests and logo design jobs at DesignCrowd.

Advertise here via BSA

The fields of front-end web development and web design are becoming more entwined with one another as interface design becomes more interactively demanding. With new devices and interfaces that rely heavily on interaction married to aesthetic, design for the web is certainly no longer limited to things like active and inactive button states and grid-based design. It is instead a full range of interaction that makes web design so engagingly active.

And yet, more often than not, designers still work in an environment like Photoshop, where they hand off static PSD’s to their respective front-end developers.

There has definitely been a large shift in the way websites are made. Previously, making a design “interactive” might have meant fleshing out different states of elements in Fireworks, or maybe working with a design in Flash. Those days are behind us. We have come into a new age where the client browser is more powerful than ever. CSS can do a lot of what used to be done in Photoshop, and the possibilities for interactivity with JavaScript are growing at an explosive rate.

With this change comes a change in responsibility and skill sets for everyone involved. This tutorial gives practical tips on how to design for this new landscape.

0. Set The Right Bars

This is a preliminary point before jumping into Photoshop. “Setting the bar” means defining specific boundaries for your project. Some of the “bars” that have to be defined are:

• Does this site need to look exactly the same in every browser?
• Do we need to support IE7 and below?
• Responsive design changes based on screen size or resolution; mobile optimized sites usually detect what browser/device you are using and redirect to a site built specifically for that device. Do we need either of these solutions?

These “bars” are on top of and supported by the brainstorming you’d do for any kind of media creation, such as defining and understanding your target audience. For instance, if you’re targeting young creatives, you’d likely not have to worry about supporting IE7. However, IE7 is still used on a large number of corporate networked computers, so if you’re designing a corporate office tool, consider supporting IE7.

0.5. Understand the Medium

To become a great web interaction designer, you MUST understand the end platform to a certain degree. In other words, you need to know what the different technologies of front-end development are, and what they are capable of doing. Note that you don’t have to master these technologies, but it is important that you understand general constraints of the technology for which you are designing. I won’t detail everything you need to know here (because it’s not a trivial amount of knowledge), but you need to know about the abilities and important limitations of HTML, CSS, and JavaScript. Usually limitations are based on the device/platform you are targeting. For instance, you can’t upload files in the browser directly from an iPhone, and you can’t reliably access a webcam without using Flash.

Okay, now that we have those two prerequisites out of the way, let’s move into the practical application.

1. Document Your Design

For the rest of the tutorial, I am going to be using an admittedly contrived example of a web design, “Thingamajig”.

One of the most important things you can do is document your design. Most often, this happens in an external document. While an external document may suit a lot of the needs for the design (it offers a linear “guideline” format), a more effective way for front-end developers to see notes is right on the design, oriented to the object or interaction area you are referring to. In the example, you can see important notes for the design in an easily accessible “lightbox” overlay on top of all other layers.

As a designer, it is smart to include font names, colors, and as many interaction notes as possible. If you have responsive design rules, explain them. If an element is the same across every page, make that note clear. The more information you can provide to the developer spatially, the easier and quicker the process will go for them.

2. Organize, Organize, Repeat.

Some of the most tedious work a front end developer will have to do is figuring out where each element in your PSD is located. Of course, part of the way you can help is by naming your layers (which you should do!); but another incredibly effective way is to organize your layers in a way that maps to the HTML layout of the elements the developer will be creating. You can see in the example a few important things.

• Color code each folder by it’s content type. This will make it easier to get a quick overview of what folders are related. Right click on the folder layer, and choose Group Properties from the contextual menu; you can name the folder and choose the color in the next prompt.
• All “NOTES” are on one layer, at the top of the design. This will allow the developer to easily turn them ALL on and off.
• Content has it’s own folder. It’s children layers are also arranged from top to bottom based on the site design; the icons are at the top of the site, then the header (which has navigation and logo elements, and a background). Next is the article, and finally the footer.
• The Site BG is the very first thing most developers try to find. Making it completely clear where the background elements are is the first step to organizing the site.

3. Don’t get lazy

It is easy to get caught up designing and breaking rules that shouldn’t be broken. YOUR job is to work in Photoshop, manipulating images and pixels; don’t leave any of that work for the developer to do! Follow a few rules to keep from having to do incessant email ping-pong about the color of an icon or the size of a gradient.

• Eliminate ALL blending modes by either flattening the relevant layers or finding a solution that doesn’t use blending modes at all.
• Note a gradient’s start and end colors in your design. If the height of the gradient isn’t obvious, note that as well.
• ALWAYS use a grid and snap elements to it. This will keep your design sane, and your developer happy.
• DO NOT rasterize your text.
• ALWAYS include any noted fonts you used, or links to the relevant download page.

4. Lighten the Load

Part of a front-end developer’s job is to create pages that load fast. Perhaps the most important part of that task is creating pages with as few images as possible (while retaining good design and aesthetic qualities). Using fonts that are web-embeddable via @font-face and icon fonts will help with this process tremendously. Designing elements that don’t rely on shadows, rounded corners, or gradients for key interactive cues will also allow the designer to “gracefully degrade” these elements to their less-attractive, but still functional, equivalents. If you must use image elements, consider their size and detail.

The developer will have to save the images for web (a process of compression); the smaller and less detailed the image, the smaller the file-size.
NOTE: This rule is most breakable when it comes to branding elements. If your logo isn’t reproducible by CSS/typographic rules, images are absolutely necessary. This goes for all elements that are crucial to the brand and identity design.

Keep Your Files Clean

If you’re like most designers, you might try 10 things before inspiration hits. This usually means either a lot of undoing, or, if you’re smart, a lot of layers for comparison between different iterations of an idea. That’s great! However, unless versions 1-10 are going to make it into the final design, delete them! Only leave elements that will be used in the final design. There’s no reason your developer needs to see them.

Beyond this, it is probably a smart idea to utilize folders for EACH page view that you are designing. Better yet, utilize different PSD files altogether. Granted, the final folder you will send to your developer may end up being larger than desired; but the time the developer saves by seeing separate, organized, clean files for each view will likely be far greater than the time spent uploading and downloading the extra files.

Conclusion

Designers work in closer collaboration with front-end developers every day. This tutorial should be seen as a reason to develop a system that cuts out the difficult faults in communication, while propagating best practices and forward-thinking web development.

Advertise here via BSA

Traditionally, to make a button or banner change when you hover over it, developers and designers have loaded two separate images — not the most efficient method. The most obvious drawback is that the image would be loaded only when the user hovers their mouse over the image and therefore they don’t experience a fluid, smooth hover effect, which is bad usability.

It also requires you to have two different files that need to be loaded, which means more files to manage, more HTTP requests to process, and more bloat on your site. This can quickly get out of hand if you have a lot of hover-over images on your site.

There must be a better way to approach this! Well, luckily there is a more efficient way, and that’s what we’ll learn in this tutorial.

Instead of having two separate images stored in two different files, you can combine both images within one image — a sprite — and place them next to each other on the canvas; this would mean that instead of loading the image dynamically, when the user hovers, both the static, first, image would be loaded as well as the hover, second, image. To do this we simply combine both the hover image and the normal image and then use some CSS to create a div (or class if you need a hyperlink, which we do in this tutorial), give the background image a width half the size of the actual image file, and then use CSS to make the background image shift to the left when the user hovers over it.

Part One: Preparing Your Image

Firstly, you need to prepare your image so that it will display correctly when you hover over it and shift the image to left — the key is to make the image completely symmetrical. For this tutorial, I will be using Apple’s “Available on the App Store” badge and having the image display the price when the user hovers over it.

1. Open your original, static image in Photoshop (you can follow along easily in Fireworks if you prefer).

2. Go to the menu and open Image – Canvas Size (or press Option + Command + C) and then double the width on your canvas — so in my case it would go from 200px to 400px. However, I prefer to add around 6 extra pixels (or any even number of pixels) as this allows space between both images and makes it look tidier. So, it would go from 200px to about 406px.

3. Select the layer that your image is placed on and then move it to the leftmost part of your canvas.

4. Duplicate the layer that contains your image and move the duplicated image to the rightmost part of your canvas and you should have two identical copies of your image side by side with the optional gap in the middle.

5. Now, you need to apply the style and changes to your secondary image that will display when the user hovers over it – so, for instance, double click the secondary image’s layer to bring up the Layer Style window.

6. You can add a color overlay to your image to give it a tint when the user hovers over it, so navigate to color overlay in the left sidebar of the window and check the box next to it.

7. Choose a color, in my case it’s black and give it a reasonable tint – I usually go for 80% opacity. This means that there’s enough tint to tell that it has changed but also allows the user to see the underlying image perfectly fine.

8. Once you’ve got a nice color going and applied the overlay, press Enter or OK.

9. Now, you have two images, one that will be displayed normally (the image on the left) and one that will be displayed when the user hovers over the original image (the one on the right). Now, you can add something to go on top of the hover image. Text is usually a good option.

10. Create a new layer above all the other layers and select the Text tool (or press T) and select an area above your hover image and start typing.

11. Now, add some additional formatting like a fancy font, change the size or maybe the color.

12. Save your image with an appropriate name (for this tutorial, it’s app-store-badge.png) in your desired location as a PNG file.

Part Two: Applying HTML and CSS

In this section, we add the actual HTML and CSS that will make the image work and move when the user’s mouse hovers over it.

1. Open up your text editor, for this tutorial I will be using Chocolat — my favorite text editor despite the fact it’s still in beta — and create a HTML and CSS file in the same directory (the same directory that contains your image).

2. In your HTML file, create the basic structure of a HTML document (the HTML5 structure is below):

<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>CSS and HTML Hover Image</title>
</head>
<body>
<a class="hover-class" href="http://go.affogato.co/"> </a>
</body>

3. In this file, I’ve created an a tag in the body that will display the image as a link as well as perform just as if it were a div — it’s up to you as to whether or not you would like it to be a link or not and I’ve also linked the CSS file (main.css) within the head tag.

4. Now, if we switch from the HTML document to a CSS file, what we’re going to do is create the class and add the style to it. So, in your CSS file, add a new class as you can see, it is defined as .hover-class, and add the following code:

.hover-class {
height: 69px;
width: 200px;
display: block;
border: none;
background: url("app-store-badge.png") no-repeat;
}

5. Within the class, specify the height of the image and width of the first, original image because this is all we want to see at this moment – specify your image and ensure that there’s no border (to prevent Internet Explorer applying a border around the image) and that the display is set to block (this means there’s a small amount of white space above and below as well as preventing other HTML elements sitting next to it).

6. So, if you open up your HTML document, you’ll find that your original image is displayed however nothing happens when you hover over it — what’s up with that?

7. We need one final piece of CSS code to give the class something to do when a mouse is detected over it. We need to move the location of the background image to the right so the whole image shifts over and hence, displays the rest of your image. In your CSS file, add the following lines to make the background image shift revealing the hover image when it’s activated:

.hover-class:hover {
background-position: right;
}

8. Providing you’ve done everything correctly and aligned both images correctly, then when your mouse hovers over the image in your browser, it should change and move the position of the background image revealing what you wanted it to.

Recall when we placed both images within the Photoshop document and aligned them symmetrically? This is where many people go wrong — if both images are not symmetrical, they will appear to actually move to the left or right when you hover over them, which doesn’t look professional and is something you should look out for.

Essentially, the purpose of this is to make a website more efficient and user-friendly as the images are loaded beforehand with fewer HTTP requests, causing the effect to work more smoothly and the page to load faster.

Click here to download the source files.

Advertise here via BSA

Nature has proven to be one of the greatest inspiration sources of all times for artists. Logos inspired by “Mother Nature” bring that rustic, organic, wholesome feeling to brands, allowing them to appear less corporate and more trustworthy. Alternatively, the foods in the logo can be drawn to inspire more of a feeling of appetite and hunger. Here are 50 fruit and vegetable logos for your inspiration.

Duke Obesity Prevention Program

GrapeCloud

O-range Speaker

Pineapple Brigade

Apple Juice

Squeeze

Frukt Kuriren

Malina

Fresh

Cocokiwi

Magic Apricot

The Sweet Peach

Applehead

Marcus Farm

Berrysys

Chiponas

Crazy Banana

Fresh me now

Orange Clothes

Fruitybox

Juice Time

Plum

cherrytv

FruitBerry

Watermelon

Bananbo

Luvocado

Tomato Strategy

Let’s Cook Little Chefs

Vegan Cafe Choices

Onions

Carrot One

Magic Beans

Harveston Farms

Mushrooms of the World

Chilliout

Lady Olive

Sunny Side Up

Surreel

Jacobs & Sons Carrots

The Perfect Pickle

Pickled Pink Cafe

Senor Pepe’s

Chill

Fork and Salad

Three Olives

Word Bean

Bite Spokane

Boone County Farmers Market

Pumpkineye

Looking for freelance design work?

Find logo design contests and logo design jobs at DesignCrowd.

Advertise here via BSA

There are many ways to approach navigation on your website and they all have their pros and cons. We have the top horizontal navigation bar, which can limit the number of links you can have before you have to resort to sub menus which, in my opinion, aren’t the best — but if you’re only looking to keep a couple of items in your navigation bar, this could be the one for you.

Another approach is the vertical sidebar menu, but a drawback of this approach is that users can become overwhelmed when sub menus start popping out from all over the place. Finally, there’s the tab bar navigation system – the problem with this approach is that it takes a lot more time to design but if you design it well, boy is it good.

In this tutorial, I will be showing you how to create a horizontal navigation bar that sticks to the top of the screen using CSS and HTML. Now, why would you want it to stick to the top? Well, by having the bar stick to the top, this means that the user does not have to scroll to the top when they want to change page. For this tutorial, we’ll be using CSS and HTML and applying CSS3 effects such as drop shadows and background opacity.

Step 1

Open up your text editor, in this tutorial I will be using Chocolat — a great text editor, despite the fact it’s still in beta — and create a directory that contains a CSS file (main.css) and a HTML file (index.html).

Step 2

Within the HTML file, add the basic structure of a HTML document (the basic HTML5 structure is here) and ensure that the file links to your CSS file.

Step 3

Now, within your CSS file, we’re going to create a div that will contain the navigation bar and make it float, I’ll go through it step by step so you know what’s going on. Add the following to your CSS file:

#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}

#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: grey;
} 

The first three lines define the navigation bar container to be fixed, meaning it does not move. The second line defines the position, at the top of the screen; if you were to change this value the navigation bar would change position but because we want it right at the top, 0 is the value we want.

Next, we define the width of the navigation bar at 100%. This means that the bar will span the entire width of the screen and webpage, you can change the size to something like 800px but I think it looks a lot better if it spans the entire width of the webpage. Next, we define the height (35px) – pretty self explanatory but feel free to change and experiment with the values.

We define where we want the text to appear and align itself, in our document it’s in the center but feel free to change this. If you do, make sure you apply padding to make sure the text isn’t right next to the left or right of the webpage. Next, we use padding to essentially position the text so that it will appear in the middle of the navigation bar.

Now, we get to interesting, fancy CSS3 stuff. The next three lines define that the navigation bar will have a shadow, the first two 0pxs define any inset we want on the shadow, for a navigation bar I wouldn’t suggest this, the 8px defines the blur of the shadow — I’ve chosen 8px because it doesn’t add too much of a blur whilst remaining noticeable. The final 0px is the amount of spread. You could think of this as a stroke applied before the shadow blurs, looks good if used correctly, looks terrible if it’s not and finally we have the hex value for the color of the shadow — I’ve used black (#000000) but you can use something like white or yellow to create a glow, depends on the background of your website really.

Now, the last two lines of the CSS define the background of the navigation bar and for a fixed navigation bar it looks good to have the bar semi-transparent and this is what this little CSS3 code does. The first three values specify the RGB values and for this I have created black (the only reason I’ve used black on this webpage is because the background is white and black is a nice contrasting color but feel free to change any of these values as you go along). The final value (0.8) is the alpha and this is what makes the background transparent. Alpha (or transparency) ranges from 0.1 (most transparent) to 1.0 (least transparent, or opaque). I have used 0.8 because the user will definitely be able to tell that it’s transparent whilst also being able to notice the text within the actual navigation bar.

The next two declarations essentially give the text that will be in the navigation bar some style and the #navigation a:hover defines what will happen when the user hovers over the text, in this case it will change from white to grey.

Step 4

Now, all of that is out of the way, we need to add some HTML to our document that will actually make use of this CSS. So, switch back to your HTML document and add the followong class and text to it:

Home
Portfolio
Our Apps
Support
Press
About

Here, we’re making use of the navigation div that we created earlier and also adding some a tags that are links to other pages, feel free to change the ‘#’ signs to URLs.

Step 5

Open your HTML file in your browser and you’ll see that something isn’t quite right, there’s a space on the left hand side between the start of the navigation bar and the edge of the website. How could this be? We defined the width as 100%. Well, for some reason unknown to me, there’s automatically padding added to HTML documents by your browser and you must define otherwise in your CSS file.

Step 6

Switch back to your CSS file and add the follow code at the top:

body {
padding: 0;
margin: 0;
}

This will remove the automatically added padding to your document.

Step 7

Now, you can optionally add some text and information to your HTML document to test your new navigation bar. I’ve added some content (and given it some style which you can see if you view the source files) as well as added an image. Now open up the HTML document in your browser and you’ll be able to view the navigation bar and it will perform correctly.

The point of this tutorial was to show you how to get up and running with a navigation bar that stays at the top of a webpage. You can apply this not only to navigation bars but also to buttons that ask for feedback or take users to social network pages. This tutorial also demonstrates some interesting CSS3 principals and core HTML practices.

Click here to download the source files.

Advertise here via BSA

Crests and shields are a popular choice for logo designs — they’ve been around for longer than anyone cares to think about and impart a sense of tradition and gravitas. A crest offers a royal, memorable and strong appearance with great impact for the customers and potential clients of a company, if well-executed by the creators. If you are in search of a logo for your company and want a more classic approach to your venture’s identity, I strongly recommend looking into crests. I’ve gathered a collection of 50 crest and shield themed logos, some in the traditional style and others with a modern twist. Enjoy!

Türkçe Dünyasi

Perfekta Promenader Logo

Dragon Soccer

Green USA

Austin Farmers Market

Mardane

Creative Way

DJ Café

Klasyk

Inferno Baseball

De Ole Diek Kieker

Elkins Dental

Gray Bull

Amperbranch

Indulgence

Scott’s Hot Rods

Army Vision

Texas Taco

No Candy Creations

Pelzerís of Philadelphia Pretzels

Ping Pong Scientists

Golden Maids

Vintage Vessels

Real Men Real Heroes

The Singing Easterman

Express

Mono

Nozin’s Watermelon

Supreme Watches

Cutest Paw

The Retro Life

United

Inflora

Tibbiz

Helmethimb

No Regrets

Welwer

Wheatlys

Wisecircus

Foxboro Beer

Orange

Jaguar Pale Ale

Paesaggio Toscano

Bakery Cafe

Coffee Rose

The Veggie King

Family Classic Cars

Delicious Station

Maybug

Handymade

Looking for freelance design work?

Find crest logo design contests and logo design jobs at DesignCrowd.