We’ve all seen that website, blog post, or eBook that just plain blew our minds. It was beautiful, it was organized, and it made us want to create something awesome.
Of course, when we opened Photoshop, we had no idea where to start.
Here are 8 tutorials that will inform your design process, help you create better visual content, and inspire some confidence in your own creative abilities.
Typography: Five Simple Steps to Better Typography
The old adage holds true: It’s not just what you say, it’s how you say it. On the Internet, however, there’s a third element: how it looks.
An official announcement in Comic Sans is about as effective in conveying authority as Helvetica is in conveying fun. Translation: The font, font size, and font weight you choose all contribute to your message.
This simple tutorial will give you a basic understanding of how the eye and brain interpret and handle typography. Take note of items like readability and features of good typefaces and you’ll be web pages into works of art in no time.
Typography: Kern Type
Of course, sifting through fonts is exactly as fun as it sounds. Understanding the nuances of good typefaces takes more than a few hours fumbling through the Word formatting options; it takes hands-on experience.
Kern Type is not, by definition, a tutorial, but this fun little game does a great job of training your design-eye for other visual and typographic tasks. Your task is simple: Align the letters in the space provided in order to optimize the flow and balance of visual space.
That being said, the simulation is actually quite subtle and unforgiving. Expect to spend 15-20 minutes toying with this strangely addictive lesson in kerning.
White Space: Adding Space to Your Designs
If there’s one concept that divides designers from the rest of us, it’s white space. If you find yourself among the latter, then prepare for some groundbreaking information: Space left blank is not always space wasted.
This short (but sweet) article provides a beginner’s run-down of the concept, offering examples of instances where the absence of content makes as much difference as the presence of graphics. If your app’s interface, your blog’s pages, or your ad copy seem too cluttered to convert, this lesson will help you sort the visual wheat from the chaff, so to speak.
Visual Hierarchy: On Visual Hierarchy
Visual design is about pleasing the eye, and little pleases the eye like direction. If you’ve ever wondered why header fonts are bolded and larger in size, it’s because of the importance of visual hierarchy.
Visual hierarchy is simple: Create elements that draw the attention of the viewer, and the viewer has an easier time decoding the content on the page. By focusing on the visual appeal of each of the elements on a page, Formed Function explains the importance of visual hierarchy in plain and simple terms.
Adobe Illustrator: 10 Things Beginners Want to Know How to Do
Photos and fonts can do great things to spice up your content, but original illustrations are a phenomenal way of grabbing reader attention. The problem is that not all tools are created equal.
Put the crayon drawings of MS Paint out of your mind and create a Mona Lisa of your own with Adobe Illustrator. This industry-standard tool can be tricky for beginners, which is where Adobe.tv comes in.
This straight-forward video demonstration provides cursory knowledge of the basic functions of Illustrator for the uninitiated. You probably won’t be creating visual identities for large corporations after watching this video, but at the very least you won’t be borrowing widely used stock images from your competitors.
Adobe Photoshop: You Suck at Photoshop
Okay, even if you don’t actually suck at Photoshop, this series of video podcasts is a gold mine for those looking to brush up on their photo manipulation and retouching skills.
Through a series of informative (albeit crass) lessons, this prolific YouTuber imparts his extensive knowledge with a little humor to enrich the often dry subject matter. If you want to learn a tool, technique, or concept, You Suck at Photoshop has probably covered it.
Color: Basic Color Theory
Color is a funny topic. We’re all comfortable choosing Times New Roman or Calibri, but color is a risk. What if we choose the wrong colors to represent our business? What if we accidentally turn a simple, elegant page into an ugly mess? What colors are in fashion right now?
Obviously there’s a lot to talk about, which is why this tutorial is such a valuable resource for the color-wary. By explaining the basic concepts behind color theory, including complements, analogs, and schemes, this short (but sweet read) is an essential stop for those just starting their design journey.
Of course, all of these concepts fall short if they aren’t deployed in an organized and efficient manner. So how do blogs, websites, and publications decide where to put titles, content, pictures, calendars, links, menus, and backgrounds?
The short answer: grids. Grids are visually appealing, developing visual hierarchy while establishing symmetry that’s both pleasing to the eye and easier for the brain to process. Furthermore, they give you an easy template, taking the guesswork out of a number of design processes.
Smashing Magazine takes the topic en force, breaking down the basics, providing examples, and giving you grid confidence in short order. Additionally, the design institution links to a number of other resources along the way, satisfying your design curiosity and expanding your knowledge in turn.