Stimulating depth in your 2D illustrations or design gives them life, attracts viewer’s interest.

There are a lot of techniques in giving depth to your designs. We will discuss some of them here.

overlap Objects

Remind yourself, what you learned before, not applying now. Overlapping objects means layering objects. This technique is used to focus elements or to create depth.

Lets see an example of card shuffle. Here you get the better idea. Most left card is upper than others.

Think this and apply.

Change-Object-Sizes

When you are shooting a nice lake with your camera. What should make it better? What will make depth in your captured image? Think

Objects more close with eyes are more bigger. Now capturing with leaves in front, lake in middle and mountain in back will create depth.

Apply same technique in your design. Change objects sizes to create more sense. Consider the idea in this picture.

Line Thickness Matters

This is relatively same concept as ‘Change-Object-Sizes’ and basically relates to sketching and drawing. But when come to graphic design, you can apply the technique here as well. The lines will be more thick when more close to eyes and more thin when more far to eyes. Analyze this image.

Look closely the lines at roof and pillars are more thick than of other, depicting the sense ‘close to eyes’.

Depth of field

Place your finger at a distance of 5cm away from your eyes and second one at a distance of 10cm away from your eyes. Now focus on first one, you see second blurred, and focusing on second blurs first one.

Depth of field is to point at which a photographer focused and other objects around that blurred. This is the function of eye and you can use this technique of depth of field in your designs. See the image above for more closer look.

Depth of color

Color is the another effective tool in creating the depth in designs. Saturated colors are more easy on eyes and capture the attraction of viewer. Sharpen color should be in front of designs, while darken in back. See this image to visualize

Perspective

It is the technique to depict volume and spatial relationship on a flat surface. We first have to understand it than apply to our designs. As this is an effective way to convey depth in artworks. See the Image below.

As lines head to a distance they merge at a vanishing point. Notice that all the lines of road, grass and shades are meeting at same vanishing point.

Vanishing point may be more than one, depending on scenario. See another example below which describes two vanishing point. You can analyze it and apply the concept in your designs.

Vanishing point tutorial doesn’t ends here. There is a lot more detail. Please research and learn more if you want more in-depth information regarding that. It is only the surface introduction.

Drop Shadow

Another effective way to give life to your design, but when used properly, and the key is ‘use shadows very lightly that user doesn’t recognize it easily’ there are a lot of use of this technique in most modern web designing and logo designing.

To illustrate what to do and what not to do, See this example.

See how subtle the shadows are used here. Same key is to use gradient.

Another example:

This was an introduction of some many techniques every designer and artist should know about, wanna seeking more help please google your thoughts.

About the Author
Sheikh Naveed, honour of TheDesignHouse. A Karachi based graphics/web designer and blog editor.

Logo designing, web designing, photo editing/enhancement are some of his hobbies.

he writes blog, micro blog and tutorials for inspiration and to help others to grow and learn new techniques of how professionals kill in graphic design field.

wanna seeking some help??? contact us at naveedamar@yahoo.com

_____________________________________________________________

Subscribe via RSS or Follow us on Twitter

Select good type, italicize it, change size and color…….. wow that’s look nice.

This is the rhythm we come in to typography. Most of the people and creatives think that good typography knowledge ends here.
These are initial steps only.

We have to think more properties of typography when going to design some awesome artwork.

These properties allows us to control typography in more details. You can apply it to different media, different design. Here we are going to show you how to apply these properties in web design.

Measure

It is the length of line of a type. It should not more narrow or more wide, because wide measure will disrupts user in finding next line, while narrow measure in only suitable with 1-2 paragraph.

Measure should be 40-80 characters. An optimal measure contains 65 characters only.

A good way to measure is to use Robert Bringhurst’s method, which applies by multiplying 30 into font size. Like, if font size is 12 then 12×30 is 360px line width.

CSS:

p {font-size:12px; max-width:360px;}

Leading

Leading is the line height between two lines. It is used to improve readability and look. Many factors affect when come to choose leading, like font size, font family, word spacing, measure, font type.

A good rule of thumb is to use leading 2-5pt more than the actual font size. e.g. if font size is 12px leading should be 15px approx.
but it may change with respect to different criteria given above.

CSS:
p { font-size:12px; line-height:15px;}

Vertical Rhythm

It is the alignment of ‘object’ of type with grid baseline. This improves readability

CSS:
body {font-size:12px; line-height:15px}
p {margin-bottom:15px;}

Emphasis

It is the good practice to italicize when to come with emphasize. But there other options as well. Bold, caps, small caps, color, font size etc.

But adhere with one. Don’t use 2-3 styles simultaneously like bold, italic and caps.

CSS:
em {font-style:italic;}

Scale

Use scales in your design, it will create a hierarchy and improves readability. Either use standards or make your own

CSS:
h1 {font-size:72px;}
h2 {font-size:60px;}
h3 {font-size:48px;}
h4 {font-size:36px;}
h5 {font-size:25px;}
h6 {font-size:12px;}

Clean Rags

When align a paragraph left or right justified. Be sure to control rags i.e. uneven sides manually because css can’t control it. You should have to make manual line breaks.

Java script can help using hyphenation techniques to control rags. you can find them phpHyphenator and Hyphenator as well as online generators.

Further Resources

Seeking more help? there is a list of related information resources.

Five Simple Steps to Better Typography
Mark Boulton

Incremental Leading
Mark Boulton

Compose to a Vertical Rhythm
Richard Rutter; 24 Ways

Setting Type on the Web to a Baseline Grid
Wilson Minor; A List Apart

Setting Web Type to a Baseline Grid
Craig Grannell; Opera

The Elements of Typographic Style Applied to the Web
Robert Bringhurst

How to Size Text in CSS
Richard Rutter; A List Apart

Baseline Rhythm Calculator
Geoffrey Grosenbach

Detail In Typography
Jost Hochuli

The Elements of Typographic Style
Robert Bringhurst

Thinking with Type
Ellen Lupton

Grid Systems in Graphic Design
Josef Müller-Brockmann

About the Author
Sheikh Naveed, honour of TheDesignHouse. A Karachi based graphics/web designer and blog editor.

Logo designing, web designing, photo editing/enhancement are some of his hobbies.

he writes blog, micro blog and tutorials for inspiration and to help others to grow and learn new techniques of how professionals kill in graphic design field.

wanna seeking some help??? contact us at naveedamar@yahoo.com

Have you ever think about these ideas and never reached the goal.

1. I will make my website
2. I will start my business
3. I will write tutorial
4. I will write my blog

This happens with most of us. we think an idea, start working on it, when some time passes, we abandon.

It is because, our tendency to generate new ideas is so fast that, when we start working on one, second one with more interest come in mind. and we left previous.

Yes it is the situation, but how can you come over this problem.
There are some tips to be noted.

Use Time Blocking Techniques

Without realizing it, most of us spend, most of our time in reacting other thoughts. we are proactive not in getting our ideas happen, but in responding others. Why someone else decides ‘how you spend your next 12 minutes’.

It is the case, while working we receive mail, text messages, phone call, sms, twitter, facebook and other social network’s updates, and we use our whole energy in responding these ‘outsourced actions’ either relevant or not.

‘how can I deal with problem’
Use ‘Time blocking technique’. When you are working on any project requiring focus and attention, close your cell phone, IMs, even browser after download relevant material and all incoming distractions.
Choose an environment where nobody disturbs you or takes your attention.

Learn to survive Project Plateau

There is not any best process of generating ideas, creatives choose what best suits them. But when applying that idea, main problem arises is ‘sticking with it’. The amount of excitement and energy used at the time of idea generating is very high, and it increases as we initially make them happen. But after some time our excitement decreases and our energy serves in handling new projects, these all things combine make a headache. At that time we generate a new idea and abandon the previous one.

Our life is a compound of these abounded or uncompleted projects we have left before.

‘What should I do now’
Make a daily time frame and deadline in approaching your goal. Respect yourself and your idea. it is not redundant, you just have the problem, ‘how to apply it’.
See other ways ‘how you can improve your idea’ during application. Discuss these tips and problems with others, make a change in your life now.

About the Author
Sheikh Naveed, honour of TheDesignHouse. A Karachi based graphics/web designer and blog editor.

Logo designing, web designing, photo editing/enhancement are some of his hobbies.

he writes blog, micro blog and tutorials for inspiration and to help others to grow and learn new techniques of how professionals kill in graphic design field.

wanna seeking some help??? contact us at naveedamar@yahoo.com

_______________________

computer, software, free time don’t make you designer. A designer should have critical thinking, knowledge of design principles, grid system, typography and much more.

Think Critically.

Always answer ‘what, who, when, why, where and how’ critically in your designs. This will make you designer not decorates. and will curve your skills more than a child having photoshop and free time.

Understanding the principles of designs.

Knowledge makes you the leader. Understanding of designs principles is backbone for doing outstanding job. This will separate designer with non-designer. Balance, rhythm, proportion, unity, dominance ALL principles have their own impact on message to be conveyed by design.

Principles of designs resources:
The Principles of Design

Knowledge of design and art history.

It is another add-on for designer in creation of new designs and reference in ‘what has been done before’. Broad knowledge expands vision and creativity.

Resources:
History of Graphic Design

Good understanding of typography

sound knowledge of typography can destroy or burst your idea, layout or design. Classes of typography and ‘what to use where’ knowledge is necessary.

Resources:
A 20 Minute Intro to Typography Basics

Grid system

What are different kinds of grid system and how to use them. This knowledge will polish you in representing the information in mannered way, and will simply makes you better layout designer.

Grid system resources:
Grid system
Making and Breaking the Grid: A Graphic Design Layout Workshop

Sketching and drawing

Googling and doodling is the key step in creating new artwork. No doubt, it is time-consuming process, due to which it is overlooked. But it is always a good idea of mind mapping or sketching with pencil and paper.

Communicating the design.

Communication skills or more specifically, dealing with client is most important factor when design comes to business. What outcome client wants for their time and payment, and how your design is conveying its message, is important for designers.

Communication resources:
13 Tips for Effective Communication with Clients

Sound understanding of color theory

what is color theory, how to use colors and harmonies, in different culture in different designs. designer should know all these theories.

Color theory resources:
Color Theory: Color Wheel
Color: Meaning, Symbolism and Psychology

Willingness to grow

Passion to learn and teach more and more is backbone in design industry. Designers MUST have willingness to learn more on daily basis. You should assign some time for learn and know new technologies, software and innovation.

About the Author
Sheikh Naveed, honour of TheDesignHouse. A Karachi based graphics/web designer and blog editor.

Logo designing, web designing, photo editing/enhancement are some of his hobbies.

he writes blog, micro blog and tutorials for inspiration and to help others to grow and learn new techniques of how professionals kill in graphic design field.

wanna seeking some help??? contact us at naveedamar@yahoo.com

High Dynamic Range (HDR) Tutorial using 1 JPG states “how to convert simple images into awesome and inspiring one”. Specially beginners will find this tutorial very useful in passion of increasing their HDR skills (HDR using Adobe Photoshop and Photomatix)

Finalized High Dynamic Range (HDR) using tutorial given below…

you will need Adobe Photoshop, Photomatix and this image

1. open this image in Adobe Photoshop
2. decrease image size (683 x 1024)

3. change exposure and save
Image > Adjustment > Exposure > Presets > Minus 2.0

4. Close without save.
5. Change exposure and save
Image > Adjustment > Exposure > Presets > Plus 2.0

6. Open Photomatix, click “Generate HDR Image” Button, Browse and open all these images (original, exposure with Minus 2.0, exposure with Plus 2.0)



7. Specify “E.V. Spacing: 2″……, IF this dialog box appears… then press OK
8. Click “Reduce Noice” in “Generate HDR – Options”… then press OK

9. As processed image appears, click “Tone Mapping”

10. In Photomatix under “Detail Enhancer” Tab, Always remember don’t touch more than these 3 options ….1. Strength, 2. Light Smoothing, 3. Microcontrast
Set other option e.g., color saturation, luminosity, Tone setting etc. in Adobe Photoshop or Adobe Camera Raw or Adobe Lightroom etc.
Because Adobe Photoshop is best to deal with these, on the other hand Photomatix is best to generate HDR Image from multi exposure images.
I used here, Stregth > 100, Light Smoothing > Very Hight, Microcontrast > 0

11. Click “Process”
12. File > Save As > Save as tiff
13. Open Adobe Bride, Browse to ‘saved tiff’, right click on ‘saved tiff’, Open in Camer Raw….

14. Here in Adobe Camera Raw, you will only change in ‘Basic’ Tab , exposure > +0.50, Black > 7, Brightness > +20, Clarity > +80, Vibrance > +20, Saturation > +10

15. and your High Dynamic Range (HDR) is ready.

Juice……

]]>