Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 09 2012


June 13 2011


A Graphic Design Primer, Part 1: The Elements of a Design

Advertisement in A Graphic Design Primer, Part 1: The Elements of a Design
 in A Graphic Design Primer, Part 1: The Elements of a Design  in A Graphic Design Primer, Part 1: The Elements of a Design  in A Graphic Design Primer, Part 1: The Elements of a Design

There are many elements that make up any visual design, whether it’s good or not. Becoming familiar with the parts of a design is necessary before you can start to apply the principles of good design to your own work, in the same way that a doctor needs to have an understanding of anatomy before he can learn to heal a patient.

There are seven basic elements of any design. Some are easier to grasp than others, but all are important. Once you can identify the elements of a design, whether it’s your own or someone else’s, you can learn how the principles of good design are best applied.


Lines are generally present throughout a design. They can be thick or thin, straight or curved, solid or dashed or dotted. Lines can be any color and any style. Straight lines are often used as delineations between sections of a design, or they may be used to direct a viewer’s vision in one direction or another.

The width of a line has a direct effect on its visual impact. Thick lines are bold and strong; they draw attention to themselves. Thin lines tend to do the opposite. Color also effects the impact of a line, with brighter and darker colors drawing more attention than lighter and paler colors. The style of a line also has an effect: dotted or dashed lines are less imposing than solid lines.

Curved lines often give a more dynamic or fluid look to a design. They indicate movement and energy. They’re also more common in designs with an organic nature, as they’re more likely to be seen in nature. Straight lines are more formal and structured, and indicative of “civilized” culture.



RePrint uses a number of curved lines to direct the eye of the visitor.

Reprint in A Graphic Design Primer, Part 1: The Elements of a Design


VideoDSLR uses straight lines of varying widths to delineate content sections.

Videodslr in A Graphic Design Primer, Part 1: The Elements of a Design


Justdot is another example of a site that uses a lot of curved and dashed lines to indicate movement and energy.

Justdot in A Graphic Design Primer, Part 1: The Elements of a Design


Forms are three-dimensional objects within a design, like a sphere or cube. You can have forms that are actually three-dimensional in your designs (like with product packaging), or forms that are actually two-dimensional but are displayed in a way as to imply that they’re three-dimensional (like a line-drawing of a cube).

Forms are common in actual three-dimensional graphic design, of course, but are also seen in web and print design. Website designs that use 3D techniques are making use of forms. Another common place to see forms is in logo designs where a sphere or cube is present.


Print Mor NYC

Print Mor NYC uses a 3D effect behind their main content.

Printmornyc in A Graphic Design Primer, Part 1: The Elements of a Design

Arlo Vance

Another example of a 3D effect in website design.

Arlovance in A Graphic Design Primer, Part 1: The Elements of a Design


Shapes are two-dimensional. Circles, squares, rectangles, triangles, and any other kind of polygon or abstract shape are included. Most designs include a variety of shapes, though deliberate use of specific shapes can give a design a certain mood or feeling.

For example, circles are often associated with movement, and also with organic and natural things. Squares are more often seen with orderly, structured designs. The color, style, and texture of a shape can make a huge difference in how it is perceived.


Method Design Lab

Method Design Lab uses ovals and other rounded shapes throughout their design.

Methoddesignlab in A Graphic Design Primer, Part 1: The Elements of a Design

Passion About Design

Circles are used throughout the design.

Passionaboutdesign in A Graphic Design Primer, Part 1: The Elements of a Design


The Cappen site uses triangles throughout their site.

Cappen in A Graphic Design Primer, Part 1: The Elements of a Design


Textures are an important part of just about any design. Even designs that, on the surface, don’t seem to use textures actually are (“smooth” and “flat” are textures, too). Textures can add to the feeling and mood of a design, or they can take away.

The most commonly seen textures, apart from flat or smooth, are things like paper, stone, concrete, brick, fabric, and natural elements. Textures can be subtle or pronounced, used liberally or sparingly, depending on the individual design. But texture is an important aspect of design, that can have a surprising effect on how a design comes across.


The Heads of State

The Heads of State site uses a few subtle textures.

Theheadsofstate in A Graphic Design Primer, Part 1: The Elements of a Design


Doublenaut uses a more pronounced texture in their background.

Doublenaut in A Graphic Design Primer, Part 1: The Elements of a Design

Cuban Council

The Cuban Council website uses textures on virtually every element of their design.

Cubancouncil in A Graphic Design Primer, Part 1: The Elements of a Design


Color is often the most obvious thing about a design. We’re taught colors from an early age, and even go so far as to identify some things with color descriptors (“my green jacket” or “my red shoes”). Color is also capable of creating strong reactions among people, who consciously and subconsciously apply certain meanings or emotions to different colors (this is also influenced by culture, as many colors mean different things in different cultures).

Color theory is an important aspect of design, and something designers should at least have casual knowledge of. You should know the difference between a shade (when black is added to a pure color), tint (when white is added to a pure color) and tone (when gray is added to a pure color). You should also know terms like chroma, value, and hue. But more importantly, you should know how all these things work together to create a mood or feel in a design.

For a more complete overview of color theory, check out our archived series, Color Theory for Designers.


Go Live Button

The very bright colors used on the Go Live Button website have a definite impact on the perception of the visitor.

Golivebutton in A Graphic Design Primer, Part 1: The Elements of a Design

Camp David

The more muted colors here give a completely different feeling than the site above.

Campdavidfilm in A Graphic Design Primer, Part 1: The Elements of a Design

Old Putney Row to the Pole

The Old Putney Row to the Pole site uses darker but still muted colors, which gives yet another impression.

Rowtothepole in A Graphic Design Primer, Part 1: The Elements of a Design


Value is closely related to color, but it’s more general. It’s how light or dark a specific design is. Again, this relates directly to the mood a piece gives. Darker designs convey a different feeling than lighter designs, even with all other design elements being equal. This is one reason you’ll often see designers releasing both light and dark versions of their themes.

Not every piece has a clear-cut value. With very colorful pieces, you might not really be able to tell how high or low the value is. One trick is to convert the design to grayscale, to get a better sense of how light or dark it is. You can also look at the histogram of an image to get an idea of where the value is more heavily concentrated.


This After That

This After That is an example of a site with a relatively light value.

Thisafterthat in A Graphic Design Primer, Part 1: The Elements of a Design

The Lounge

The Lounge has a relatively dark value.

Thelounge in A Graphic Design Primer, Part 1: The Elements of a Design


There are two kinds of space in design: positive space and negative space. Positive space is that which is occupied by design elements. Negative space (also called “white space”) is the area that’s left over. The relationship between positive and negative space has a strong influence on how the design is perceived. Lots of negative space can give a piece a light, open feeling. A lack of negative space can leave a design feeling cluttered and too busy, especially if the designer is careless.

Negative space can create its own shapes and forms, which impact the design. Understanding the effect of negative space and how to use it to your advantage in a design is one of the most important techniques a designer can learn, and can make the difference between a good design and a great design.


80/20 Studio

80/20 Studio has a lot of negative space in their design.

8020studio in A Graphic Design Primer, Part 1: The Elements of a Design

Dazed Digital

Dazed Digital, on the other hand, has very little white space in their design.

Dazeddigital in A Graphic Design Primer, Part 1: The Elements of a Design

Poster Roast

Another example of a site without a whole lot of negative space.

Posterroast in A Graphic Design Primer, Part 1: The Elements of a Design

Up Next…

In the next installment, I’ll be covering the principles that make up a good design, and how to apply them to the elements we covered here.

Further Resources


Sponsored post
Reposted bySchrammelhammelMrCoffeinmybetterworldkonikonikonikonikoniambassadorofdumbgroeschtlNaitliszpikkumyygittimmoejeschgeKameeel

July 29 2010


40 Dazzling Photoshop Abstract and Lighting Effects Tutorials

Preview-abstract-lighting-effects-tutorialsWell done abstract and lighting effects can enhance your artworks exceedingly and this is very popular trend now in photo manipulations, backgrounds, website headers – definitely useful tutorials to be aware of .

You can add them to premade photos, or create whole new scenes from scratch. Photoshop gives you those abilities and allows you to express in all ways. In this post you’ll find 40 best tutorials around web to master abstract and lighting effects.

1. Super Slick Dusky Lighting Effects in Photoshop

In this tutorial you are going to put together a sunset image mixing some vector shapes and dusky lighting effects to produce a slick image that will make a nice album cover for a chillout mix.


2. Space Lighting Effects in 10 Steps

In this Photoshop tutorial you will be shown how to create a space scene with some nice lighting effects in 10 easy steps.


3. Advanced Glow Effects

In this tutorial, you’re going to create some really sharp-looking glow effects using a combination of layer styles, the Pen Tool and Color Blending. The end effect is quite stunning and you’ll pick up some tips effecting the tutorial.


4. A Cool Lighting Effect In Photoshop

In this tutorial, you will learn how to create that effect you was able to see on the screen at the Macworld San Francisco. It’s basically some lighting effects with blurs and blend modes, but the effect is awesome.


5. Windows Vista Aurora Effect Photoshop Tutorial

In this tutorial, you’re going to see how to create the Windows Vista wallpaper effect yourself. This Vista lighting effect, sometimes referred to as the Aurora effect, can really transform an ordinary wallpaper to something extraordinary.


6. Awesome Digital Bokeh Effect in Photoshop

This tutorial will show you how to create a digital bokeh effect in Photoshop. The process is very easy and we will be using the super powerful Brush Engine, one of the coolest things in Photoshop.


7. Make Abstract Wallpaper with Brushes

In this tutorial, you will try to mimic the nice abstract preview that Axeraider70 made for his Ultimate Brush Pack 3. This will give the beginners a better idea on how to use these great resources.


8. Space Environment

Learn how to create realistic space scene from scratch using Photoshop.


9. Light and Glow Effect In Photoshop

This Photoshop effect tutorial covers the creation of several different light and glow effects in Photoshop. The effects in outcome consist of smoke, light trails, sparkles, stars and bokeh effects. Luckily it’s pretty simple to create each of these effects in Photoshop.


10. Create an Amazing Ad in Photoshop

In this tutorial you will use some images and play with Blend Modes and Color Adjustments to create a really cool Nike Ad in Photoshop.


11. Create a Dark and Surreal Geometric Space Poster using Photoshop

This tutorial will show you how to create an abstract space poster using geometrical shapes, masks and apply some filters in Photoshop. Layered PSD file is included.


12. Make a Freezing Cold Snow-themed Abstract Piece

In this tutorial, you’ll learn how to create a snow-themed large piece. You’ll learn how to plan the composition of the piece, to add elements into the composition, how to recycle the piece itself to generate more elements for the piece, how to incorporate pen tools into a design and finally how to finish off and fine tune the piece to make it look great.


13. Use Lighting Effects to Make Photos Sparkle

This tutorial shows how to create a variety of light effects that can be applied to photography or illustration with equal impact. From sparkles, pixie dust effects, colored light spots and light beams, to using splatter effects as a form of lighting, it’s all here.


14. Sparkling Hot Girl in Photoshop

This tutorial will show you how to create an image using light effects and sparks technique. It basically mixes some techniques from different tutorials and takes the best from them.


15. Achieve Brilliant Lighting Effects in Photoshop

In this tutorial, you’ll learn the essential process of achieving brilliant lighting effects in Photoshop. Using default brushes, blending options and a few stock images, you’ll learn step by step a variety of techniques that you can use in your own digital artworks to achieve professional results.


16. Give a Photo a Complete Glamour Makeover With Stunning Light and 3D Effects

This tutorial teaches you how to transform a regular, every day photo into a real glamour shot. In this tutorial, you will learn how to retouch a model’s face and subtly manipulate her hair. In addition, you will enhance the canvas by adding attractive lighting and 3D effects. This tutorial requires considerable Pen Tool skills, but with perseverance and a passion for design, you will certainly be able to achieve great results.


17. Amazing Photoshop Light Effect in 10 Steps

Learn how to create beautiful “Buy me a coffee” wallpaper in Photoshop. You’ll be using basic brushes and some blending effects.


18. Incredibly Realistic Water Text in Cinema 4D and Photoshop

This tutorial will show you how to create a water text effect. Even though it might look complex it’s a very simple effect. You will need to use Illustrator for the text, then Cinema 4D to make it a 3D text and Photoshop to mix the 3D with some real photos to create a nice and realistic result.


19. How to Enhance Your Subjects With Striking Light Effects in Photoshop

This Photoshop tutorial will show you a simple technique that can be used to enhance any kind of subject with stunning light effects. You will use in particular selection tools, gradients and brushes to achieve the result.


20. Create an Electrifying Light Guitar

In this tutorial, Pawel Kiec will take you though the steps of extracting an image, creating a background, and then making an electrifying glowing guitar that resembles pure neon light. You’ll learn how to manipulate blending modes to achieve color and light, and you’ll also learn how to extract images with the pen tool, and even create flowing lines in Illustrator to compliment the Photoshop work.


21. Energize Your Graphics with Abstract Energy Lines

In this tutorial, you will learn how to create some energetic lines you can use to create more lively digital creations. Effects such as this are great for enhancing abstract compositions.


22. Recreating The Aurora Borealis

In this tutorial, you are going to recreate the northern lights effect, otherwise known as “Aurora Borealis”. Using a combination of filters such as Render Clouds and Motion Blur, you then transform the combined effect to form the shape of an aurora, with a touch of perspective.


23. How to Create a Gorgeous Glassy Text Effect

This tutorial will show you how to create glassy text effect using a series of shapes with different transparency and color effects.


24. Create an Abstract Design with Patterns in Photoshop

Follow this walk through to recreate this detailed design with nothing more than gradient and pattern effects.


25. How To Design An Abstract Wallpaper In Photoshop and Illustrator

In this tutorial you will be creating abstract shapes using the Pen Tool and Shape Tools in Illustrator and then using those shapes to produce an abstract wallpaper in Photoshop using various color blending techniques, textures and transformation tools.


26. How to Create a Realistic IES Lighting Effect in Photoshop

This tutorial will show you how to create a realistic IES (photometric) lighting effect. Yoy’ll be using Photoshop CS4 as well as some free plugins and software.


27. Abduzeedo 2010 Light Effects in Photoshop

In this tutorial you will see how to create new Abduzeedo’s 2010 symbol. It’s a sort of monitor/halftone effect mixed with glows and other light effects. You will play with Blend Modes and Blurs. The whole process is quite simple and it won’t take more than 20 minutes to achieve the same result.


28. Drawing an Abstract Lightbulb

This tutorial covers a couple of simple techniques, which if used accordingly can help you attain great lighting effect.


29. Create Simple, Yet Elegant Abstract Spectrum Lines in Photoshop

This tutorial will show you the method used to design a simple, yet elegant abstract spectrum lines in Photoshop. You will see how easy it is to achieve this nice effect and you can use it a wide range of occasions including perhaps site header backgrounds, logos, or add extra flavor to your photo manipulations.


30. Create an Abstract Composition in Photoshop

In this Photoshop tutorial you will learn how to create an abstract composition using rendered images and light effects. As you can see from the final result preview you will create a mystical and magical effect. In this tutorial you will have to use plenty of Photoshop tools, and also Cinema 4D, but if you don’t have Cinema 4D that’s ok, you will be able do all rest steps of this tutorial.


31. The Making of “Constant Slip”

This tutorial takes you through the creative process of making intriguing light effects and applying them in your work. This is more a process description of making this illustration, than a detailed step by step how to. It will give you some good guidance on how to deal with an illustration like this and cover the overall workflow.


32. Create an Explosive Abstract in Cinema 4D and Photoshop

In this tutorial, you will be creating an explosive abstract piece called “What is Man?“. You will have to use Cinema 4D to create the explosive effects. You will then take the 3D elements over to Photoshop for the final composite and lighting.


33. Create a Vibrant Abstract Space Artwork

In this tutorial, Paul from will show you how to create a vibrant and colorful abstract space artwork using Photoshop, Illustrator, and stock images. You’ll learn techniques on blending modes, the use of the pen tool in Illustrator, and how to combine elements for a visually stunning effect.


34. Quick and Effective Planet, Star and Meteor Impact Creation in Photoshop

In this tutorial, you will learn how to make planet, star and meteor impact in Photoshop in a quick and effective manner. This is intermediate level tutorial so some steps can be a little tricky, but the outcome is worth it.


35. How to Create Great Abstract Artwork via Custom Brushsets and Particle Effect

In this tutorial, you will be able to follow the steps needed to create this cool abstract artwork via custom brushes and particle effect in Photoshop. You will be demonstrated how to create your own brushes and use them to add particle effect to the image to spice it up.


36. Create a Fantastic Abstract Fan Poster

In this tutorial, you are going to get creative with layering, lighting, and texture to build fantastic abstract piece. More specifically, you’re going to employ some unusual techniques to make a fan poster for the band Omega Code, but you’ll quickly see many different applications for what is taught here.


37. Calculations and Colorization

This Photoshop tutorial will show you how to create an Alpha Channel using the Calculations dialog and you’ll use it to get a really great abstract colorized photo effect.


38. Create a Trendy Galactic Poster Design in Photoshop

Galactic space scenes are a popular theme for digital art, they’re packed full of texture and vibrant colour, which are two ingredients of an awesome design. Using Photoshop’s blending modes along with a mix of textures and brushes, you’ll get lost in space and create an abstract cosmos poster design.


39. Colorful Glowing Text Effect in Photoshop

This tutorial will teach you how to achieve great looking light text effect with some simple techniques.


40. Create an Abstract Cloud Jumper in Photoshop

In this tutorial, you’ll manipulate a photo with abstract elements to make it more interesting and active.


May 05 2010


Improving typography through space

Yesterday I read a tweet that Veer has become, yet another, type foundry added to Typekit’s remarkable list of foundries; allowing us to rent quality fonts for use on our websites. As exciting as this is, along with other movements and progressions in web typography, it also made me think of how dangerous this can for the good name of Typography.

As designers, we see websites, their parts and a variety of other design elements being overused, misused and abused on a daily basis. We label most of these as “trends”, but let’s face it: We have all fallen guilty of them and in a way we should be glad they exist. It helps the special few break free and try something new (again, setting us up for another future trend).

However, I’d hate to see typography become just another “trend”, when in my opinion, it is the backbone of good design. It shouldn’t be viewed on the same lines as rounded corner boxes or text-shadows that look cool for the time being. It is an element of design that has been around since design itself and should be handled in such a way. Ninety-five percent of the web is typography, right?

In order to help prevent typography from just falling into another category, learning about typography, beyond typefaces and fonts is essential a must to every designers toolbelt. The folks behind Typekit do a great job of this. They offer a short write-up about each font providing background / historical information, purpose for which it was created, and what its use is best intended for (ie: works well at very small sizes, good for body copy, great for headlines).

It’s great to start seeing a variety in fonts on the web, but this makes it very easy to abuse a beautiful typeface as well. Choosing a fancy font does not necessarily make for good design, but learning and executing a base typographic-understanding does.

Instead of focusing this article on choosing a typeface or what makes a quality font, I thought it would be better to focus on something indirectly related, yet thought about, but never enough: Space. Whitespace, negative space, however you deam it, makes for good typography.

The little things matter

Take A List Apart’s website for example: very minimal graphics, no use of @font-face, color is subtle and purposefully used. So what makes this site so beautiful if it’s 95% type?

They do one heck of a nice job crafting the space for their content. They allow the type to breathe on its own or as a collective. Look at the detail in their site that is often over looked yet leads to beautiful typography: The line leading (line-height for CSS folk) is superb, the capitalized author names are letter-spaced to allow and improve readability for smaller letters—yes, they even paid attention to space between characters.

Below I took a screen shot of the original site and mocked up the bottom portion so that it does not pay attention to the little details. Paying attention to space doesn’t always mean looking at the big picture. Pay attention to the little spaces and crevises. Look at the drastic difference below:


Read and look between the lines

A List Apart’s website also does a great job of reading between the lines. Take for example the image below. Look at the attention to space as it plays with relationship and comparison from element to element. When designing for web or print pay attention to how one or many elements play off one another. Are they in unison because they aren’t meant to relate to one another or did you design to to be disconnected to create tension for the viewer? Remember, typography has purpose.

Relationships of Space

Each block above shows the relationship of space between the same color near it.

Life beyond the fold

Not too long ago I read a nice, quirky article by Paddy Donnelly titled Life Below 600px. The quick and to-the-point article, and of course it makes you scroll and scroll (and scroll…) to read the entire article is a jab at those saying things need to be above the fold, and I couldn’t agree with Paddy more. Although I am all for placing important elements near the top in plain view, people will also know when to scroll to read and view additional information. The web is filling up with more and more content, screen sizes are getting increasingly larger and people are no longer unaware that scrolling exists.

I say use the space and use it well. Don’t be afraid to use the vertical space to its full potential. Many websites feel the need to cram tons of information into one tight area. Below are websites that use vertical space well and create a much more dynamic interaction:


Sure, many of these websites could have opted for another direction on how to engineer the space—added more pages, pulled elements closer together—but in my opinion this makes each one of these sites unique and more engaging. It allows the content to breathe and results in the elements becoming more noticed and digestible.

The web and print collide… and it’s pretty

A wide range of quality fonts at our finger tips, CSS3 techniques that allows us to break and flow text into multiple columns… The web is starting to give designers less and less limitations and comparable to its print ancestors. Many of today’s designers I feel started directly on the web or have very little print design background. Nothing wrong with this, but there are many lessons and inspiration that can be drawn by print design, especially in relation to space. Next time you pick up a newspaper to read, don’t read it. Instead look at how the space is manipulated (both good and bad). Start looking at poster design for web design inspiration or visit your local bookstore, open up a few well-designed books and inspire your new blog layout design.

Experiment and play

Don’t take the above too seriously. There are always exceptions to the rule and other ways of doing one thing. Practice, experiment and play.

Matthew Smith of Squared Eye recently redesigned a printed receipt just for the sake of discussion and fun. In this exercise he goes into how more room to breathe allows for importance placement among other things. While the typeface used is lovely, the spacing is what makes this receipt one that I would not want to throw out.

The next time you are designing a website, place extra attention on the spacing or start off on paper by sketching where elements should be placed in a uniquely spaced and positioned layout like that of The Many Faces Of. You’d be very surprised by how much placing extra time on spacing and space relationships and contrasts will do to improve your design’s typography.

*My apologies for any odd formatting that might be occurring in this post. I am planning for an upcoming redesign (about two weeks away or less) and formatting the articles based on the new design. Stay tuned or subscribe for more on the upcoming redesign.
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...