Feature
Post

Category
Design

How to create animated GIFs from video files

Despite the ubiquity of online video, they’re still not as portable as images, and what better way to get the best of both worlds than through animated GIFs?

You’ll need two programs: VirtualDub and Photoshop (or GIMP), which each cover the two halves of the process: extracting images from the video file, and turning those images into a frame-by-frame animation.

Create the image sequence using VirtualDub

Set Selection Start/ End in VirtualDub

  1. Open video file (you may need to install the appropriate codecs).
  2. Mark the start and end of the scene you plan to extract using Edit > Set Selection Start / Set Selection End or the last two buttons in the playback toolbar labeled Mark in / Mark out. Use Clear Selection if you want to start over.
  3. Before exporting, you may want to adjust the number of frames exported by going to Video > Frame Rate… Select Process every third frame (decimate by 3) or enter a custom number.
  4. Select File > Export > Image Sequence… and click OK.
  5. You might notice that you can also export the selection as an animated GIF under the same menu, but if you want better control over the size and appearance of your GIF, Image Sequence is the way to go.

Create the animation using Photoshop

Steps 1-3 in Photoshop

  1. Open the Animation panel and make sure it’s set to Frame Animation.
  2. Select File > Scripts > Load Files Into Stack… and select all the exported images in the proper order. Make sure the images are in the correct order (the last file usually shows up on top, so send it to the bottom).
  3. Create a new frame for each layer by selecting the Duplicates selected frames icon or the New Frame item in the panel menu. Hide the current layer, then select the next one below it. Repeat this until you’ve made your way all the way to the last layer.

    If you have a lot of frames, you can record a Photoshop action that goes:

    1. Duplicate current animation frame
    2. Hide current layer
    3. Select backward layer (this isn’t easy to record so, follow the instructions for creating that step on this page).

    Now hit Play until you reach the last layer.

  4. Tweak the animation settings accordingly. You may want to set a short delay for each frame, and choose whether your GIF will loop once, thrice, or forever.
  5. Crop, resize, and do all your image effects.
  6. Select File > Save for Web and Devices… and select GIF. Tweak the color range, dithering, and other necessary settings.

Result:

Animated GIF from video file in Photoshop

Animated GIF from video file in Photoshop: 128 colors, Perceptual, Noise, No Transparency Dither, 862 KB

Photoshop alternative: GIMP

The GIMP handles image sequences a little easier as it has a built-in animation filter, but isn’t so flexible with image quality.

  1. Select File > Open as Layers… and select the images.
  2. Select Filters > Animation > Playback to preview your animation. You can also select Optimize to, well, optimize.
  3. Select File > Save As and make sure GIF image is selected under Select File Type.
  4. Choose Save As Animation in the next dialog the shows up then click on Export.
  5. In the Save as GIF dialog, check the following:
    • Loop Forever
    • Use delay entered above for all frames
    • One frame per layer
    • Use disposal entered for above for all frames

    Set the Delay between frames where unspecified to something low like 10 milliseconds.

Result:

Animated GIF fro video file in GIMP

Animated GIF from video file in GIMP: no special settings, 921 KB

Feature
Post

Category
Design Focus

Friday Focus 06/25/10: Kid-Friendly

No, these websites aren’t just for the little ones, but their designs certainly have a child-focused appeal to them. Check out the elements that make up a Kid-Friendly look on this week’s Friday Focus.

Designs of the Week

Bowtie Interactive Studio

One page sites usually employ a storybook approach to the design and content, and this is a perfect example: playful hand-drawn illustrations, bright colors, large text, and animations.

Kaleidoscope App

Kids prefer books with lots of pictures in them. Never skimp on illustrations, even with icons; it’s so much easier to skim a site than a book and those will hold your visitors’ attention.

TwentyFeet

This may or may not be intentional, but the ruler in the background and the giraffe instantly remind me of those height measurement charts. Clever and refreshingly unique metaphor.

McMillers Sweets Emporium

My favorite part? The candy cane style arrows!

AutoMagical

A little too wide for my screen, but all the details are stunning, especially the buttons.

Not Back to School Days

An otherwise straight-laced gets a touch of whimsy with some Disney pixie dust. Still looks professional, but with a more interesting color palette.

Lee Driscoll

I like how practically everything in this design is custom, and it’s just the body text that needs a little tweaking. The moving background gives depth.

Maksimer din konverteringsrate

An abstracted version of building blocks that behave like sheets of paper when hovered over.

Doorstep Dairy

There are different kinds of interactivity, but this is probably the most fun: letting you scroll through content using the milk delivery truck. Excellent typography and other detail.

Vacation in Supetarska Draga on island of Rab

This reminds me of those video game maps where you move from one location to another each level. Using sailboats as navigation markers is utterly brilliant!

Social Media Weekly

DesignGraphic Design Theory: 50 Resources and Articles

HTMLHTML5Rocks

CSSCSS3 Animations, the Power Back to CSS Part 1: Transitions

CSSWhat Does “width: 100%” Do in CSS?

BrowsersIE’s Compatibility Features for Site Developers

Feature
Post

Category
Design

Top 20 Awesome Icons For Websites

As a web designer having a good resource of icons is essential. The web is full of free icons, finding them is easy, finding the good ones is another matter. A good icon pack contains a broad selection of icons from documents to control icons.

For a serious and professional look the icons must be uniform and have a good color scheme. To save you the time I went through many free icons and selected the best looking ones and two premium sets. Premium icons are good if you want more control over the icon looks.

More →

Feature
Post

Category
Code

How To Add Support For Menus In Your WordPress Theme

Are you running WordPress 3.0 yet? If so, you might have come across a nifty little addition called Menus. You’ll find it on your admin Dashboard in the Appearances section, and here’s a little screenshot of how it looks:

As you can see, I’ve set up a new menu named “Lorraine Menu” here, and added various things to it by selecting from the elements on the left side of the page: a link to Devlounge, links to some pages, and so forth.

Also of note is the message beneath Theme Locations that states:

The current theme does not natively support menus, but you can use the “Custom Menu” widget to add any menus you create here to the theme’s sidebar.

So how do I make sure my theme supports these new menus? There are two methods:

The Easy Way: Widgets

If your theme is already widgetized, you probably don’t have to do anything- especially if the menu is meant to go in the sidebar. A user simply needs to add a “Custom Menu” widget from the Widgets screen. If your design includes navigation elsewhere, just add another widgetized area in your functions.php and specific theme template (header.php or sidebar.php, for example).

The More Complicated Method: Native Support

I suspect that most WordPress theme authors will want to add native support for menus in their themes, though- and it’s really not that hard. Here’s how to do it:

Register Menu Locations. The first thing you want to do is add this code to your functions.php file. Let’s set up 2 locations for menus, making sure to replace the “menu-name” texts with your own.:

add_action( 'init', 'register_my_menus' );

function register_my_menus() {
register_nav_menus(
array(
'menu-1' => __( 'Menu 1' ),
'menu-2' => __( 'Menu 2' )
)
);
}

Call Menus from Theme Templates. To specify where you want these locations to be in your theme templates, use this:

<?php wp_nav_menu( array( 'theme_location' => 'menu-1' ) ); ?>

and

<?php wp_nav_menu( array( 'theme_location' => 'menu-2' ) ); ?>

You can learn more about wp_nav_menu and the parameters it supports at the Codex.

And that’s it! It shouldn’t take more than ten minutes- more with styling, of course- to update your existing WordPress themes to natively support 3.0’s Menus feature.

Feature
Post

Category
Design Focus

Friday Focus 06/18/10: Layered Screens

Showing screenshots of websites on websites isn’t terribly exciting in theory, but let’s see how these designs dealt with it.

Designs of the Week

Paperfold Media

Amusing logo. I find it interesting that the designer went for an abstract rendering of a program window instead of the usual Safari. The body text in the inside pages could be bigger.

Dzucle

Love the addition of the foliage as well as the wooden textures, but repeating grass and soil in the lower part isn’t so seamless, so that needs work.

FrogsThemes

The corner ribbon (more like a cover) on the screen is a good idea, and so is the subtle ruler pattern in the background.

Lee Munroe

The screens need more distinction from one another, like shadows or thicker borders, but I like the difference in heights.

The Visual Click

Not sure if this is “cheating” because the screens are bunched up as one image and you can’t interact with them, but the rotated, peeking through effect looks great.

Q Hair and Beauty

Again on the “cheating”, the two polaroids in the background don’t change when you click on the arrows, but blurring it out of focus is another technique to consider.

Massive Blue

Bigger is definitely better when it comes to screenshots.

TrackDebt

Aside from program windows, mobile devices such as the iPhone are popular containers too. I think the stripes and the bright green make for a perky look.

James Deer Design

Love the subtle watercolor texture on the edges of the page, as well as the hot pink combined with elegant typography.

Origen Creatives

As with the previous design, you can mix and match mobile devices with desktop browsers too.

Vartro

Another interesting technique: opting not to include any real screenshots, just the hardware that will display them.

Primo Motif

Not sure if there’s any benefit to this type of layering as, again, there’s not enough distinction between the two especially since they look almost exactly the same. I think the smaller screenshot could have zoomed in on one area of the website.

Fantasmagorical

This may look a little cheesy for some, but since the company built its brand on the word phantasmagoria, I’ll take it. Now the question is, are the sparkly stuff mixed into the screenshots a welcome decoration, or too much of a distraction? I think the ribbon balances it out.

Social Media Weekly

DesignThe Tangible Web: Thoughts on Designing Websites for Touchscreens
“Below, I’ve jotted down a few thoughts on design practices that we’ll likely be seeing a lot more of as site owners begin reorganizing and redesigning to welcome our touchy-feely visitors.”

CSSBe a CSS Team Player: CSS Best Practices for Team-Based Development
“How many times have you picked up a project that someone else started, only to discover that the creator’s original code is a mess? Or you work with several team members, each of whom has their own way writing code? Or you revisit a project you created years ago, and you don’t remember what you were thinking?”

Usability9 Usability And UX Pitfalls: Learn How To Avoid Them
“If we want to be ahead of the design curve: get more satisfied clients, and happier users, we need to make sure that both we and our clients understand what these points are, and how to solve them.”

Feature
Post

Category
Design

20 Awesome Free Tumblr Themes

The amount of Tumblr weblog is growing steadily each day, a lot of users forgo their own weblog setup on a hosting for Tumblr. It began as a platform to post small bits to the web but has attracted users that use it as a full blown weblog service. Logically Tumblr has been expanding their services and growing with their users needs.

Several online services and companies use Tumblr for their weblog instead of keeping it on their own service, handy for if their website experiences downtime. This shows how easy it is is to get a nice weblog up and running with Tumblr.

The amount of themes available is also growing steadily, ranging from the wackiest theme to some very slick ones. I compiled a list of twenty great free Tumblr themes that you can install right away.

LightGrid

Even on Tumblr you get a grid based design, it’s not Khoi but it sure is nice for a free theme. If you are a fan of grids this is the theme for you.

Linear

linear

Simple, clean and good aligned. A good theme for lots of text or single photo posts.

Vertigo

vertigo

This theme begs for attention, unruly lines, red and some graphics.

Stationary

Stationary is a perfect theme for a weblog with book reviews, pens, notebooks, anything paper.

Easy Reader 2

This one is excellent for a photoblog as the layout has almost no to none distraction.

Fluid

One word: Bokeh!

Redux

Perfs

The background reminds a bit of the iPhone dock.

Paper Walls

Vintage Stripes

New York

Paper Cut

Minimal

Field Notes

Munich

White Milk

Day Dream

Neue

Rock Star

Office

Feature
Post

Category
Design

Fun With Border-Radius

Like many other designers, I go through certain “phases” in which I’m particularly enamoured with a certain font, a certain style- even a certain color. Right now, one of the things I’m lovin’ is CSS3’s Border-Radius. Before I started using it, I applied techniques such Spiffy Corners and Curvy Corners, which- while very good solutions- were a little too bulky for me. Border-Radius, you see, is simplicity itself:

.box1 {
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;}

will give you this:

Now let’s have some fun:

.box2 {
background-color: #ccff66;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-webkit-border-bottom-right-radius: 0px;
padding: 10px;}

produces:

.box3 {
background-color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px dashed #999;
padding: 10px;}

produces:

and

.box4 {
background-color: #ffcc66;
-moz-border-radius-topleft: 25px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
border: 1px solid #ccc;
padding: 10px;}

produces:

From these examples, you can get an idea of the possibilities of border-radius. Throw in some box-shadow effects, maybe even a webkit-transform… the key is to play with it.

Now, it’s important to know that Internet Explorer does not support this. For rounded corners in IE, I recommend these methods: DD_roundies (a javascript library), or Curved Corner, which uses a CSS hack.

Do you use border-radius?

Feature
Post

Category
Design

Review: Logomyway

You need a logo. As a designer, I’m of the opinion that nearly everything needs a logo- from a multimillion-dollar company to a cookie-baking business. It’s one of the most essential elements of branding.

Which brings me to my review today: Logomyway is a service that

“connects business that need logo designs, t-shirt design, business cards and print ads to a community of more than 5000 designers in over 100 countries who compete to win contests with winnings ranging from $200 to $1000.”

Here’s how it works:

  • Client posts his design needs in a “contest” form.
  • Designers submit designs based on those needs.
  • Client selects a design from the submissions.
  • The Designer of the winning submission earns from $200 to $1000 depending on what the budget of the Client was. Logomyway earns 10% of the winnings.

Clients are able to rate and comment on submissions as they come in, to help clarify things for participating Designers.

A new section on the site is the Marketplace, featuring ready-made logos for Clients to select from and receive, complete with their company name, in 24 hours.

The setup is simple, and familiar- and yes, it does seem a lot like “spec-work”, which is something I personally am strongly against. Designers, especially web designers, are already too undervalued.

That said, I do think Logomyway does its best to protect the interests of both its Clients and its Designers- they provide codes of conduct for both. At the end of the day, it’s clear to me why it’s such a popular service:

It’s popular for Clients, especially those with a limited budget. A professionally designed logo- and yes, I’ve seen quite a few good ones here- for $200 is a bargain. There’s no need to hire a design studio, and there are multiple designers working on your logo at once, which may be a good thing for Clients who don’t know what style they want until they see it.

It’s also popular for Designers, especially those starting out without a proper portfolio. Submitting designs is a way to get extra exposure, and if your submission wins, then you get paid at least $200 (minus the 10% commission fee, of course). There’s no fee for participating- and spending several hours on design submissions is certainly more productive than spending it playing Farmville. Isn’t it?

Feature
Post

Category
Design Focus

Friday Focus 06/11/10: Follow the Arrows

We have some interesting uses for arrows in this week’s batch of designs. Let’s see where they take us.

Designs of the Week

Martin Balhar

I like screen-high, hairline-thick arrow that appears on hover. The navigation and the subtle animation on the link hovers is great too. And don’t forget the stunning type on the front page!

Big Guns Design

Simple design concept but looks beautiful. Here the arrows are section markers and lead you back to the top. I wonder why I’m only seeing this design element now.

Jai Pandya

The hand-drawn arrows and text links add transitions from one section of content to another. It’s a good alternative to the fixed navigation on top.

What's Up Cupcake

Where are the arrows on the page? I can count six! Great way to lead the eye and match the elegant look of the site, is it not?

Search Inside Video

Arrows for every step of the way. The list needs better alignment but other than that, the infographics are well done.

FlockChart

Hiding the arrows when there’s nothing left to browse is a good idea.

Jaydev

Interesting slideshow effect here: instead of the usual horizontal scrolling, this one goes diagonally. I wouldn’t say it’s more effective, but it certainly different.

Social Media Weekly

CSSCSS Sprites w/out Using Background Images

JavaScriptInline Expansion – Why And Where To Use It

Design6 Apps for Collecting Digital Inspiration

Feature
Post

Category
Design

The Best Fonts For Your Design

Typography can make or break your design. There is like a bottomless resource of fonts on the internet but only a handful are good. Of course this also depends on how it’s implemented. Times New Roman has been used so much that everyone is tired of it, but Simon Collison has shown how an old and tired font can still make a great design.

There are great fonts available free and commercial. I have compiled a list of the fonts that have caught my eyes that are free or reasonable priced.

Free fonts

Jos Buivenga is a well known type designer, there are several well known websites and even a book that uses one of his types. I’m starting with my current favorites from his collection that has at least one type for free. Calluna and Fontin.

Calluna

Calluna

Fontin

Fontin

Modata

Modata

Porcelain

Porcelain

Nuvo Web Medium

ff_nuvo_web_medium_390

Just Old Fashion

JustOFashion

District Thin

District Thin

Commercial fonts

I listed a few commercial fonts ranging from 20 to 60 dollars per type, while they do cost money you get a complete font package in most cases. If you do design for work or are planing to it’s a good idea to invest in commercial fonts especially if they come with multiple licenses.

Solomon

Solomon

40 dollars for one style.

Billboard

19.95 dollars for one style, considering Billboard is perfect for headers and large type I would only buy the regular one.

Alright Sans

Al Right Sans

Only thing I have to say about this fonts is that I love it. When I look at it it gives me the itch to design something, anything just to use this font.

40 dollars for one style.

FF DIN

FF DIN

FF DIN is an old font in web years, it was designed in 1995 by Albert-Jan Pool. FF DIN has become enormously popular the last couple of years, being used by companies such as JetBlue Airways and Adidas.

Considering how classic and popular this font is, 59 dollar for the regular type is nothing.

Bitmap fonts

You can’t miss having at least a few bitmap fonts to use.

Silkscreen

Silkscreen

Silkscreen created by Jason Kottke must be the webs most famous bitmap font and best of all it’s free!

Bitmap

bitmap

Several variations of Bitmap pixel fonts.

Feature
Post

Category
Design

12 Unique T-Shirt Templates To Download For Free

For t-shirt design work, there’s nothing quite like seeing it on a t-shirt- which is why these free t-shirt templates, in everything from vectors to Photoshop PSDs, are some of the most useful graphics to have in your arsenal.

Vector Valley T-Shirt Template Pack


A small collection of t-shirt vectors in varying styles. Particularly good for icons.

GoPurifyYourself TShirt Vector


The back and front of a plain tee, includes .ai and .psd files.

Emptees Mock-Up Kit


A kit that includes everything from realistic shadow and highlight layers to ten preset backgrounds.

JovDaRipper T-Shirt Template


I particularly like the included “mannequin body” on this Illustrator file, shown from the front and back.

JovDaRipper Male & Female T-Shirt Templates


From the same artist comes these tees in Male and Female styles, again in Illustrator format.

23 PSD T-Shirts


Want something a little more realistic? This collection includes twenty-three shirts of varying styles in PSD format.

Madnessism T-Shirt Vector Templates


Male and Female t-shirt template vectors, very cleanly done.

DesignWar T-Shirt Vectors


Gorgeous t-shirt vectors from three angles (front, back, side) in EPS format.

Black T-Shirt Jpegs


Designing a black shirt? These black tees are high resolution, and include Photoshop clipping masks for ease of use.

TeeModelz


Available in Illustrator, EPS and PDF formats, these templates stand out because most of them are on “models” (or silhouettes).

Atilazz PSD T-Shirt Collection


A PSD collection that includes hoodies, long-sleeved tees, tank tops and more.

27 American Apparel T-Shirt Templates (Direct Download)


I love American Apparel t-shirts. This is a collection of 27 templates of the AA brand of tees, with layers included.

Do you do t-shirt design?

Feature
Post

Category
Design

8 Free Classically Beautiful Fonts For Weddings

It’s June, the month for weddings, which are, I’ll admit, one of my favorite things to design for. From Save the Date cards, to invitations, to reply cards, to programmes and menus- Stationery design is a wonderful way to set the tone for your Wedding day.

Which brings me to today’s post. These romantic fonts are elegant, render beautifully, and are all free to download:

Exmouth


If you want truly classic and traditional, Exmouth is it. Unobtrusive and beautifully crafted, its letters are easy to read and suitable for a host of applications.

Ibleum


Ibleum has one-height, spiky letterforms that make it, in my opinion, a wonderful option for invitation envelope wording.

CAC Champagne


CAC Champagne is elegant in a modern way, with lovely curvy numerals.

Billy Argel


Billy Argel is perhaps a bit daring, with some of the most gorgeous swashes I’ve ever seen in a free font. I like it for headlines and titles, such as for a Wedding Programme cover.

Schnitger 1680


You already know I’m a sucker for vintage designs, and Schnitger 1680 has a decidedly vintage look and feel to it, making it perfect for themed weddings.

Shardee


The beautiful Shardee reminds me of the script my mother, a professional Calligrapher, used on my Wedding invitations. It also has a @font-face kit, for use on a Wedding website.

Fortunaschwein


Another one with a vintage feel, Fortunaschwein isn’t a script, but its Old-World, almost handwritten, elegance makes it a classic in my book.

Mutlu Ornamental


Mutlu is ornamental- as you can see- making it another good choice for short text you want to emphasize with a lot of lovely swashes.

Have you, or do you, design Wedding stationery or websites?