Browsing articles from "October, 2011"

Oct 21, 2011

Mojo

60 Fresh Free Fonts You’d Consider Using In Your Projects

If you are tired of your regular fonts or simply want to see what is new in the design world, this is an article that you will find very satisfying cause it features 60 of the best new free fonts, 60 fonts from which I’m sure you’ll use a few for your projects. Use them wisely and check the license before you download and use them.

Cabin

Bohema

Mangosteen

BUUG

Legion Slab Typeface

Conviction

Dunn Typeface

Lora

Dash

Sheep Sans

BOND IS DEAD

Aquarion

Merge

Wisdom Script

Otama e.p.

Teléfono

Ubuntu Mono

Mensch

Bender

Vevey

Satellite

Greyscale Basic

Claire Hand Light

Quattrocento

Piron

Altitude

Excellens

Quaver Sans/Serif

Sansus Webissimo

VHIA

Weston

UNIK2

Knochen

AleksandraC

Glasket

Soul Ninja

Muncie

Slice

Egypt22

Collator

Morning Glory

Exmouth

FoglihtenNo01

Rawengulk

Indubitably

Lobster Two

Limelight

Organic Elements

OSP DIN

RBNo2

Afta Serif

Lifestyle M54

Absinthe

Muli

Fox Type

Jokal

Ostrich Sans

Nunito

Rokkitt

Go to Source

Design, Web

Oct 21, 2011

Mojo

No Comments

Asymmetrical balance in web design

When I first covered the idea of symmetrical design patterns here on Webdesigner Depot I had no intention of digging into the notion of asymmetrical design.

However, the more I thought about it, the more I felt compelled to cover the topic to contrast some of the ideas revolving around symmetrical design patterns.

In asymmetrical design we find designs that contain elements that do not create a mirror image. Most often, these asymmetrical designs are in fact balanced, but just not through perfectly similar halves.

This sort of design is actually far easier to come by, considering most content doesn’t lend itself to perfect symmetry.

Let’s consider a variety of sites that put this design approach to work and perhaps discover some ideas that can impact your own design work.

Introduction to the use of asymmetry

Bully Entertainment

As an introduction to the notion of asymmetrical design this dramatic design provides a rather nice starting point. While there is really no reason this design couldn’t be reconfigured to produce a perfect symmetry, it just wouldn’t work nearly as well. The large, richly illustrated designs offset the text of the home page beautifully. Their size ensures they are extremely visible and they are the main visual driving force of the design. This natural balance between a single large element and a more densely packed alternative is a very common approach.

Jorge Rigabert

This layout presents a fairly standard web layout. A small side column that contains key navigation, paired with a much larger column for the sites content. This is perhaps one of a handful of standard layouts that are used daily by designers. I believe much of the design process in this case happens semi automatically. Consider the sidebar in this case which asymmetrically balances the content column. The sidebar has a darker color, which helps it to offset the lighter content channel. Without the darker background the sidebar would likely get lost and not stand out nearly as well.

Images to balance text

Another fairly standard approach to web design that ends up being an asymmetrical design element is the pairing of text with images. As you will see in the samples below, each has a large image. This image is paired in some way with a block of text. This combination is extremely common.

The trick is fairly obvious, just ensure the two complement each other in some way. Given that these two elements will usually create a loop for the eyes, it is important that they somehow work together. The most obvious approach is to have the image literally illustrate or show what the text is talking about. Another common tactic is to have the image extend the idea presented in the text.

Here are some samples to consider.

Cake Sweet Cake

This design is most certainly well balanced, but it makes use of several asymmetrical elements to achieve this. Notice the large image of a cake combined with the text. The imagery is fairly obvious, but fundamentally important. In this case the cake not only informs us that this is a cake shop, but what particular style they might offer. Combine this with the clarifying text associated with it and you have a pretty darn clear sales pitch. This is all not to even mention the incredibly tasty design this site is wrapped in.

More Soda

This example also makes use of asymmetrical design elements based on a large image combined with a block of text. In this case, the connection is not nearly as clear. There is no obvious sales element involved. Instead the image becomes more decorative and creates an overall sense of style for the site. In my opinion it is slightly less functional, but it is really hard to say without knowing exactly how effective the site is. It would seem that a visual like this has a singular goal of enticing you to dig in a bit more to see what they are all about. A sort of teaser, if you will.

Adaptive Web Design

As you have probably already figured out, this pattern is about as common as the color blue. I would dare to speculate that nearly every site ends up putting a visual tool like this to work at some point. I think this common place nature makes it a topic well worth discussing. Often times I find the most inspiration and fresh ideas from reconsidering things I do over and over without thought.

This simple site promotes a book. And of course the main element as you land on it is a large image of the book. Combine this with the large block of text and you have a well balanced area that contains all of the critical elements. Most importantly, it is finished off with an eye catching call to action. The continuity of this area is simple and spot on. The eyes easily flow through it and consume the critical information. It’s not confusing, or complicated, or clever or tricky. The approach is simple and clear.

Foreground and background elements

One fresh approach to asymmetrical design is to make use of background elements that asymmetrically balance foreground ones. This type of approach creates an interesting dynamic where the background serves more of a functional role as part of the content, and yet, is still a part of the backdrop of the site. Most often this is done through simple overlaps that create the illusion of depth. Here are some samples to consider.

Peter McLeavey Gallery

This gallery’s web sites is a perfect demonstration of this idea. Here the background element serves many roles. First, to the point of this section it creates an asymmetrical balance with the large gray circle in the foreground. This visual combination creates two areas that cause the eyes to bounce back and forth. This, in my opinion, is a good thing.

The element on the left contains the main branding and links to the site’s content, While the background element informs you of the context of the site. You’re looking at a gallery site, and this becomes abundantly obvious within a few seconds of landing on the site. I love that such an informative element as the background can also play a major role in the design and overall style of the site. Especially when it echoes so perfectly with the context of the product the site offers. Such a simple approach, but very effective.

Aleksandar Grkinic

This simple about.me page also embraces this simple idea where a background element balances out a foreground one asymmetrically. In this case though, the background is not entirely clear. And this is what I really love about it. The illusion of depth is totally there, and without any sort of overlap, it is actually hard to decide what the background actually is. I suppose we could argue that the person jumping is not in the background at all. Regardless, the asymmetrical balance is clear. And without the beautiful combination of different elements the page would not exist. The design is, in many ways, purely based on the concept of asymmetrical balance. Often times it seems that extremely simple designs can look extraordinary with beautiful contrasts such as this.

Robert Dabi

In this case, the background plays an interesting role in the design, but doesn’t produce the asymmetrical elements we have seen thus far. In my opinion, the large visual is clearly a foreground element of the design. What I love though, is how it subtly blurs this line with something as simple as the shadow below the image. This effectively merges it with the background and creates a beautiful dynamic. Obviously, the large image is asymmetrically balanced with the copy next to it. Step through the pages of the site and you will pleasantly find that the background changes and merges with the visuals in very interesting ways. A stunning design that feels fresh, clean, and super smooth. Seems like a darn good presentation for a portfolio site to me.

Ten more designs

Below I have provided ten additional designs that make use of asymmetrical elements. As I have already mentioned I could place a lot of web sites into this category. So, for the purposes of this article I have carefully selected designs which I feel make use of the approach in slightly atypical and creative ways. Consider each design in light of this topic and I hope you will gain some new ideas to inspire your next design.

Greenluv

Andersson Wise

Forecast

13 Wives

Raffles Institution

Urban Svensson

Carousel

Purlize

Buses at the Brewery

Humaan

Conclusion

Balance is a fundamental part of the design process, and the use of asymmetrical elements is equally basic. I always love digging back into the basics of design as I find that I always understand it in a new way that has an impact on the work I do. There are countless ways to approach things and breaking our patterns can often lead to fresh and new designs that rejuvenate our passion for our jobs.

[ Go to Source ]

Design, Photoshop, Tutorials, Utilitys for Design

Oct 21, 2011

Mojo

No Comments

New PS Tuts Released In The Last Three Months

40 brand new Photoshop tutorials have been gathered here, in this article, to help you improve your skills and techniques. The PS tuts offer on the market has changed dramatically in the last years. If when I started this site I could feature 20 new tuts on a weekly basis, 20 interesting and useful new tuts, nowadays I can manage to filter and get only 40 tuts for a period of three months. It’s pretty bad that top notch designers don’t create tutorials as often as they did before but we’ll have to be satisfied that at least a few tutorials appear, a few good ones, that is.

Captain America Shield in Photoshop

So in this tutorial I will show you how to create the Captain America shield using Photoshop. The whole process is quite simple and won’t take you more than 45 minutes.

Design a Delicious, Shining Circle Play (Web) Button in Photoshop

In this tutorial, I will show you the steps I took to create this interesting Shining Orb Circle Play (Web) Button in Photoshop . This is an beginner level tutorial and steps are quite easy to follow.

Create a glowing superhero

Here Kervin Brisseaux shows how he turned a basic illustration into a retro-futuristic artwork in Photoshop. You’ll use the Marquee and Pen tools to create various forms, and generate atmosphere with glow effects made using Adjustment layers and Layer Styles. You’ll also use motion blur for a dynamic feel.

Design a Freestyle Text Effect with Pen Tool and Liquify Filter in Photoshop

In this tutorial, I will show you the steps I took to Design a Freestyle Text Effect with Pen Tool and Liquify Filter in Photoshop. This is a beginner level tutorial so should be quite easy to complete.

3D Skyscraper Text Effect in Photoshop CS5

This tutorial will explain how to create a nice 3D skyscraper text effect in Photoshop CS5, and will cover a couple of basic 3D concepts in the Photoshop 3D environment.

How to Apply Light, Shading, and Shadow to Round Objects

Today’s tutorial Part 9: How to Apply Light, Shading, and Shadow to Round Objects will continue to talk about shading and working with light and shadow. This time we will take a close look at round objects. We will learn how to define core shadows on cylinders, cones and spheres and we will practice how to create realistic cast shadows.

Create a Moody Landscape Photo Manipulation in Photoshop

Learn how to create a dark and dreamy photo manipulation by blending images seamlessly and applying a color effect using several adjustment layers. You’ll also learn how to use textures, apply lighting effects, and more.

Photo retouching tips and tricks

Create a Mac Style Home Icon in Photoshop

Commonly, a designer draws with Illustrator, but this time let’s create a mac style home icon with Photoshop. The techniques used will be about making shape and playing with layer style. It’s not difficult to make this sweet icon. I hope you will get inspiration after following this tutorial.

Create revolutionary cosmic art

In this tutorial, Adam Ismail shows you how to create a fabulous astronomy-themed composition using elements taken from public-domain NASA images.

By skilfully exploiting a variety of methods – such as creating depth with layering and opacity, as well as deft use of the Twirl, Spherize and Liquify filters – Adam shows that it’s easier to get the desired result than you might think. Along the way he also outlines how to make a custom ‘star brush’, using a method you can adapt to create other custom brushes.

Create a Nature Text Effect Poster in Photoshop

In this tutorial we are going to learn how to make a poster inspired by WWF creative posters. With a couple of images, we will create a beautiful realistic typography with natural theme. We will learn how to blend these images together to make them become a nice one. This tutorial is full of tricks and tips to manage layers and your images.

Creating Dynamic Video Game Cover Art in Adobe Photoshop

In this tutorial we’re going to explore how to recreate an awesome video cover art with just a couple of photos and a single Photoshop brush set. The intent of this tutorial is to show you how what looks like a complex design can really be very simple when deconstructed.

Find success with type and CG

This tutorial is about using simple random shapes to create a stunning composition which revolves around typography. You will build elements in Illustrator, Photoshop and a 3D application – in this case Cinema 4D, though similar software can be used too – and then combine them with type and effects back in Photoshop.

Create a Werewolf Warrior Wielding a Flaming Sword in Photoshop

Learn how to create a fantasy-inspired photo-manipulation of two warriors: a werewolf wielding a burning sword and a human with a regular longsword. You will learn how to turn a human into a werewolf, create a flaming sword using a few brush strokes, and how to use adjustment layers to alter the color of the image.

Create a Dramatic Western Style Movie Poster in Photoshop

Movie posters are always a lot of fun to design, and there are a number of things you have to take into consideration – The graphic, the typography, overall mood, and so much more. In this tutorial, we’ll have a look at making this awesome Western movie poster, and hopefully learn a whole load of Photoshop techniques along the way!

How to use texture effects to create beautiful compositions in Photoshop CS5

This tutorial is an example of how a few simple techniques can be used to create basics photo illustration using multiple layers, masking, the Pen tool, some basic lighting and one simple texture.

How to Create a Cold Snowy Winter Scene in Photoshop

As we’re approaching the end of the hottest summer and worst drought in recorded history here in Texas, I decided a nice cold winter scene tutorial was in order. In this tutorial I’m going to walk you through my process and the techniques I used to create this nice cold winter portrait.

Create Animal Textured Typography

In this tutorial we are going to create fun, realistic, animal textured, 3D typography in Photoshop using CS5′s Repousse tool.

Create an Eerie Portrait Photo Manipulation with Photoshop

In this tutorial we are going to create a fantasy scene where a witchy women will be holding a sacred log in her hands. With this tutorial we are going to cover interesting topics like working with textures and blending modes, lighting, advanced image cutting techniques, and typography.

Create Awesome Particle Flame Text Effect in Photoshop

In this tutorial, I will show you the steps I took to Create Awesome Particle Flame Text Effect in Photoshop. This is an intermediate level tutorial so some steps can be tricky

Create Cool Typography Using Paths in Photoshop

How To Create Dirty Dancer Composition in Photoshop

In our new tutorial you will learn hot to create dirty dancer composition in Photoshop. For this tutorial you need basic Photoshop knowledgeable, as we will work with basic Photoshop tools, like burn tool, brushes, filters and others. As you can see from the preview, with the basic knowledge and a little effort, we will be able to create a stunning effect.

How to Create Dramatic Sci-Fi Photo Manipulation in Photoshop

In this tutorial you’ll learn how to use different blending modes to professionally blend images, you’ll see different ways of adding lights and shadows and discover the way how you can add realistic fire to your pictures.

NOS Speed Gauge From Scratch

Today using Photoshop(cs4) we are going to create a wonder piece of work which is called speed gauge. there are many tutorials around with the same subject but in this tutorial, I have tried to create more realistic effects with simple steps and less effort.

Create an Electrifying Music Poster with Geometrical Elements in Photoshop CS5 Extended

Learn how to create abstract 3D shapes, stunning star flares, and more! This Photoshop tutorial will show you how to create a high-res poster in detailed steps from start to finish. You’ll need Photoshop CS5 Extended to follow this tutorial.

Learn How To Create Colored Eagle Manipulation in Photoshop

In this tutorial you will learn how to create colorful effect in Photoshop. We will use few stock images and shapes. We will go through the process how to add to an object light effects using basic Adobe Photoshop tools. Photoshop techniques that you’ll learn in this tutorial, you can use in creation of advertising posters or creating your own stylish photo effect.

Create a Detailed User Interface for an iPad Application

In this tutorial we will show you how to design a detailed user interface for an audio-themed iPad application. We will design this application using a retina display resolution and will make use of Photoshop’s shape layers and layer styles.

Create a Clock Up Wallpaper in Photoshop

Using 3D text effect as main design element wasn’t something new. I’m pretty certain that most of us has been seen 3D text in many place like magazine, poster or in the internet. Years ago, we need 3d application and some skills to create believable 3d text. But since Adobe released Photoshop CS5 in 2010, we really can depend on it to create cool 3d text. Feeling anxious about this topic? If you really want to learn, keep on reading to find out how we’re going to make it.

Create Epic Surreal Volcanic Wasteland Matte Painting in Photoshop

In this tutorial, I will show you how you can Design a Surreal Volcanic Wasteland Matte Painting in Photoshop. This is an intermediate level Photoshop tutorial so some steps can be a little tricky

How to Use Light and Shadow to Create a Dramatic Photo Effect with Photoshop

In this tutorial you’ll learn how you can change light scene in your photography or photo manipulation to get dramatic atmosphere. I’ll also show you how you can use Channels to easily change sky, how you can use different filters to create dreamy effect and give you several tips on color adjustments.

Create a Detailed Camera Icon in Photoshop

Icons can be a lot of fun to create. Simple icons are relatively easy to create but more realistic icons can be quite challenging. In today’s tutorial we will demonstrate how to create a detailed Fuji X100 camera icon in Photoshop.

Flaming Car in Photoshop by Lincoln Soares

How to Create an Out of This World, Medieval-Fantasy Themed Photo Manipulation

In this tutorial, we are going to learn how to create an out of this world, medieval-fantasy themed photo-manipulation. Using a few images, and brushes, we’re going to make a seamless image of a stormy night filled with dragons bathing a medieval ship in flames. We’re going to learn how to create a storm, how to create realistic looking fire, how to create realistic waves from a ship and how to give it a fantastic color using Photoshop adjustment layers.

How to Make a Car Advertisement Poster Design

In this graphic design tutorial, we’ll cover the essential advertising workflow. By following along with this Photoshop ad tutorial, you’ll see how to take just a simple stock image and build a pixel perfect artwork around it, while also communicating valuable information about the brand to viewers.

How to Create a Sony Xperia Ad in Photoshop

Create A Dream in a Bottle Photo Montage

In this tutorial we are going to create a Fantasy Bottle World Photo Manipulation in Photoshop CS5. You will learn how to create a beautiful collage of images to design a World in a Bottle photo montage.

Create a Scene with Popup Photos in Photoshop

In tutorial we will transform some regular pictures into cool 3D photos and we will integrate them in a veridical scene. If you followed some of my previous tutorials you know that I am a big fan of channel masking techniques so we will use them in this tutorial too.

Amazing Water & Light Splash Effect in Photoshop

Create an Abstract Golden Circle with Smoke Brushset in Photoshop

In this tutorial, I will show you how you can Create an Abstract Golden Circle with Smoke Brushset in Photoshop. This is a beginner level tutorial and should be quite easy to follow.