Web Design Blog | Web Design Fan | Resources for Web Designers and Graphic Designers » Design

Create Awesome Post-It Note Art with Photoshop

Gerard Harris — Thu, 22 Dec 2011 14:30:04 +0000

Earlier this year, the full force of post-it note art broke with some of the most amazing visualizations ranging from Super Mario and Kirby to Elvis Presley and Ray Charles. However, where do you start if you want to get involved yourself? If you’ve got a design package like Adobe Photoshop with a grid function, the whole process is actually quite straightforward to design, leaving you with a simple, but time consuming, job of just following your design when you start sticking post-it notes to the wall.

Below is the process you need to follow to use Adobe Photoshop to design your own post-it note picture.

The first thing to do is to measure your workspace, whether it’s a wall, ceiling or window and work out how many post-it notes it would take to fill the space by simply dividing the total space by the size of an individual note.

Once this is done, you need to turn on the grid function (select View, Show and check Grid, or pres Control apostrophe) and create a canvas size that matches the dimensions of post-it notes that you need for the collage to the squares in the grid.

The next step is to either sketch out your overall design, or import an image for the design into Photoshop and expand it to fill the canvas size you’ve selected. With Snap To Grid on (select View, Show, Snap To and Grid) use the Eyedropper Tool to select the main colour in the background of each square, then use the Rectangular Marque Tool to select the grid square and use Paint Brush Tool to fill it in. Repeat this process until every square on your canvas is covered.

You’ll notice the 8-bit change in the design pretty quickly and get a feel for any manual changes you might need to make to keep it looking good.

Now that you have your design in place, it’s simply a case of matching the post-it notes on your work surface to the squares on the Photoshop canvas. Before you know it, you’ve finished your first ever post-it note art.

Helvetica Inspiration: 10 Best Videos

Sonia Mansfield — Tue, 06 Dec 2011 14:30:11 +0000

When thinking of Helvetica, it is fair to assume that many of your minds will go immediately to printed medium. Posters, fliers and calendars all frequently use the font for their main design, usually to use an attractive typeface that isn’t as overabused as the old standard, Arial.

But there are plenty of places where typography lovers can apply Helvetica. In this case, we are going to look at some of the small movies that have been made featuring the font prominently, sometimes as the main focus.

1. Helvetica the Movie

This film was made as a project to wish the font a happy 50th birthday. What I found most interesting was that the stop-motion format that shows people cutting and taking slices of cake made in the shape of the typeface reminded me a lot of those old scenes from “Sesame Street.” Even the new episodes use the ’90s retro scenes that are nearly identical. That makes me wonder if the maker intended that. If so, they did it well.

2. Helvetica in Motion

Mike Parker is well known for his understanding of typography and general design methods, which is why he is one of the most quoted people in the industry. Evan Shuster used a clip from one of his interviews as a voice-over for this interesting kinetic typography video that shows the words soaring in Helvetica as the font is explained. It is beautifully done and shows that you really can keep it simple and still get great results.

3. Typography Animation

This is a short history lesson for anyone who is interested in the life of Helvetica creator Max Miedinger and the making of this popular typeface. It presents all the facts in fast-moving kinetic typography, which is great, and there is a lot to see. But it moves a little fast, so honestly, it could have benefited from finding a smoother pace to allow the viewer to more easily read without rushing.

4. Design Sustainability

While it has nothing to do with Helvetica, this typography video uses that font. The message is a change is needed in design culture as well as priorities that emphasize sustainability. The ideas are connected through a single video made by TEDify.org. It is very interesting to hear different designers from all over the world speaking about the same need for a shift in focus.

5. Anatomy of the Typeface

The creator of this piece was a student whose assignment was to marry the concept of the video along with the chosen font, in this case, Helvetica. He goes through an informative rundown of the typeface, with a breakdown of the “anatomy.” It is short, but well made.

6. Typographic Motion Design

This is sadly short, and I would have liked to see more, given how good the 10 seconds of the test are. It takes a small audio clip that explains the change in font, which is described as more “machined,” that led to Helvetica. It gives a nice representation of moving cogs along with this idea.

7. Helvetica in HD

Asked to make an animation opening for a hypothetical film based on a typeface, this university project made a fantastic video clip using motion typography. It reminds me a lot of those ’60s spy or secret agent movies, and it uses the names of the artists involved in the creation and evolution of Helvetica as the cast. This video is very clever, well made and funny.

8. Kinetic Typography

This is a simple kinetic typography clip that uses voice-overs from the design informational film “Helvetica.” There isn’t anything special here, but the basic concept is solid. They also use some gorgeous effects that really make the overall result, such as the shadows under the lettering as it moves across screen. The quotes used are also excellent.

9. Bob Dylan

Bob Dylan is one of the most famous voices of the past, and his songs are still as relevant today as they once were – perhaps more so. Using Dylan’s “Subterranean Homesick Blues,” the creator of this piece used Helvetica to create a simple motion typography video of the lyrics. He manages to get the best parts of the song, which is an added bonus.

10. Helvetica

A gentle piano solo, drifting Helvetica font with 3-D effects and soothing motions … don’t watch this while working, or you will find yourself falling asleep. It is extremely relaxing and quite pretty, even if it is fairly basic and not a whole lot is shown.

What are some of your favorite Helvetica videos? Let us know in the comments.

10 Typography Tools for CSS

Sonia Mansfield — Wed, 02 Nov 2011 13:35:15 +0000

If you have spent any amount of time in the website design game, you know that CSS is a staple you can’t ignore. As Flash takes a back seat more and more, this method of coding is becoming more necessary by the day. It is also becoming a basic for graphic forms, one example being typography.

More than just a font, typographic art has become a movement on the online world. From creation of new lettering to the use of those fonts on website design to more clearly altered context or providing visual appeal, you can’t get away from it. CSS makes it easier than ever to manipulate and utilize typography for your web designs.

Tools to use CSS typography pop up every so often, but not all of them are as great as others. Here is a collection of excellent typography-related, CSS-compatible applications for you to use in your own work.

1. Font Tester

Font Tester is a useful little tool that will give you the ability to directly compare different fonts without having to go page to page. Instead, it puts them beside each other to see all at once. You get a nice, clear view that focuses well on details. This is one of the better tools for this purpose, and it is easy (and free) to use.

2. Typograph

Drag-and-drop applications, especially those with a simple interface for users, are fantastic. This app uses that design, allowing you to put everything on a single grid to determine web layout. It tries hard to be an all-in-one program, so you can limit the other tools you have to use.

There are some nice calculators and measurements included, which is fantastic. But otherwise, there are no frills here.

3. Typographic Grid

If you don’t like making your own CSS grids, you can usually find more than just a few available on the web premade. This one was done by designer Chris Coyier set to a vertical rhythm and made to give a basic platform for beginners. It won’t be much good for advanced users who want to create a more complex CSS font.

But it is perfect for something simple, especially if you can make your own grid but just don’t feel like doing it. It is even better if you can’t and will give you a starting point for making your own in the future.

4. Serif Font Search

Font searches are rare, at least when it comes to finding one that is of any real use. This search allows you to name the characteristics of a font, and it will do a search for anything that most closely matches. It is a great way of narrowing down your typography needs and finding something you really want.

Think of it as the perfect place to start if you only sort of know what you are wanting in a font but you would like to see examples that embody those needs.

5. CSS-Typeset Matrix

You can better come up with measurements using this tool. The matrix provides you with the ability to set your parameters and then do measurements based on pixels instead of more traditional methods. This might be helpful if you are planning to integrate the CSS typography into a previously formed website or design.

6. PXtoEM

The standard units of measurement for CSS typography are PX, %, PT or EM. But you can’t always start where you want. So if you are looking for a good conversion tool, this one will cleanly convert them to any format you need. It’s great if you want to have the same typography in more than one unit of measurement for later use or samples.

7. Baseline

The best part about this application is the tool that allows you to see some of the latest experimentation done with the still-new HTML5. Working off of a baseline grid, this is a great app because of the CSS reset as well as many other features that have made it one of the more popular tools on the web.

8. Typetester

You can use this tool to basically look at and play around with fonts you already have laying around on your computer or flash drive. Just upload them onto the app and change the size, the spacing, the line grid and more. It is easy to use, and while it’s limited in comparison to some software, it is nice for light tweaking.

9. TypeNavigator

With a preset questionnaire of sorts, you can find any font name by answering queries about the look, with specific details in mind.

Once it narrows down the list, you can usually get pretty good results. It also gives a list of possibilities, which is perfect if you are interested in seeing similar fonts you might prefer.

10. WhatTheFont

A nice, easy-to-use tool that you will be sure to love, this is a photo-recognition application. You take a picture of any font you like, then upload it into the app.

It will go through a list of cataloged letters to give you the name. This is fun to use when you are out and looking at things like posters and want to remember the font used for future reference.

Conclusion

CSS typography is all the rage and growing in popularity by the day. What are some of your favorite tools that can be used to this end? Let us know in the comments.

Must See: Famous Logos and Icons in Pure CSS

Zachary Brown — Fri, 28 Oct 2011 16:42:19 +0000

There are some incredible things happening with CSS these days, and I think I found my favorite. Check it out:

And this one:

These awesome logos (along with tons of others. See: the post thumbnail) are being created in pure CSS over at ECSSpert. So far there are designs for Twitter, Adidas, Adobe, an awesome animated Atari, and well… just go look for yourselves.

Speaking of increible CSS achievements, check out these 3 links to be in even further awe:

Apple iOS Icons in CSS

iPhone in CSS

Opera Logo in CSS

Note: you might want to view these using Safari or Chrome, though Firefox is OK, too. Don’t even bother if you are using IE. Sorry, IE peeps (though you were probably just going to go look at the Windows icon and leave, anyway).

Got any others?

Post them in the comments so everyone can see. No use in keeping incredible stuff like this under wraps!

Amazingly Creative Online Store Designs

Tara Hornor — Wed, 19 Oct 2011 13:35:18 +0000

We’ve all seen the standard e-store layout: a wall of product mini-photos and brief descriptions. But recent research indicates that if shoppers are exposed to too many options they freeze, hesitate, and move on without purchasing. So maybe store designs need to open up a bit and present their products with bigger pictures and more description. The result would be fewer items on the page, but a lot more information visually and textually for the product itself.

This collection of websites demonstrates just how this might look. The designs have far fewer products, but the images are large and vibrant, plus the descriptions are often more detailed.