Thursday, November 26, 2009

Hongkiat.com: Retro and Vintage Web Design – Best of

Hongkiat.com: Retro and Vintage Web Design – Best of


Retro and Vintage Web Design – Best of

Posted: 26 Nov 2009 10:50 AM PST

Vintage-inspired designs, when done well, can end up looking even more current and relevant than an entirely new and modern design. Whether it’s only taking inspiration for your typography, color scheme, or other elements, or whether you create a design that would feel entirely at home in the 1950s, 1920s, or any point before, using vintage and retro styles can be fun and challenging.

Below are forty designs inspired by retro, vintage, and antique elements. They range from campy to completely professional, and everything in between. Use them as inspiration for creating your own vintage designs.

Here are more retro and vintage related articles we’ve previously published:

Full list after jump.

Antique and Pre-20th Century Inspired Designs

The most common eras antique-inspired websites take design cues from seem to be the Victorian era and classical Rome and Greece. The best designs tend to be formal-looking, and evoke a sense of propriety without looking stuffy. In some cases, they imitate broadsheet newspapers or other items from the times they’re inspired by.

The Statement

Xocolatl

Theocacao

The Dollar Dreadful Family Library

The Astonishing Adventures of Lord Likely

Sensi Soft

Internet Zillionaire

Early 20th Century Inspired Designs

The early 20th century (through WWII) has inspired numerous designs. Some are influenced by the Film Noir and detective movies of the 30s and early 40s. Others pull from Depression-era pop culture (including children’s toys and games). And others take their cues from WWII-era military and civilian artwork and posters.

Webdesigner.ro

The Ernest Hemingway Collection

Team Fortress 2 – The Sniper vs. Spy Update

Radio – The New York Moon

mediaBOOM

Mister-Aero

Media Ambassador

MacTarnahan’s Brewing Company

Fred Perry – 100 Years

Five Cent Stand

Field Notes

Target Scope

Blind Renaissance, Inc.

Amelia Earhart Book

DeVotchKa

Post-WWII and Later Designs

Designs inspired by the mid-20th century (post WWII up through the 60s) pull mostly from the popular culture of the era. Fonts inspired by the era are particularly popular, along with vintage color schemes. Fashion also seems to be a big influencer, as are vintage radios, cars, and televisions.

Tricycle Terror

Thigpen Designs

Singularityconcepts.com

Style 4 you

Small Stone Recordings

Rocket Club

Prahba

Jeff Sarmiento

Lataka

Kretivia

Klassiker in Acryl

Level 2 Design

Capitol Media

Edgewater

Custom Design

Carrozzeria Verga

Blue Moon Dueling Piano Bar & Restaurant

Tomatic

Tuesday, November 24, 2009

Hongkiat.com: 30+ Realistic Gadget Design Photoshop Tutorials

Hongkiat.com: 30+ Realistic Gadget Design Photoshop Tutorials


30+ Realistic Gadget Design Photoshop Tutorials

Posted: 24 Nov 2009 06:36 AM PST

There’s an ancient Chinese proverb that says "工欲善其事,必先利其器"; the direct English translation means "In order to do a good job, once must have a good tool." When it comes to the design industry, the tool is Photoshop.

photoshop gadget tutorials


Photoshop is truly a designer’s best friend. It is used to design almost anything, be it icons, websites, photo enhancements, etc and the list goes on. In fact, in one of our earlier post "Stunning Apple Concept Design", most of the gadgets were created with Photoshop too. It’s never a tough job learning how to create a gadget when you know the basics and the next thing you probably need is – good tutorials in conversational tone.

Here’s a list of 31 wonderful Photoshop Tutorials that gives you step by step tutorial how gadgets are created. Full list after jump

Realistic Gadget Design with Photoshop

Black iMac
This tutorial will help you create a realistic black iMac in Photoshop. The image is recreated in Photoshop using a front look iMac picture found via Google Images. It is  a step-by-step tutorial to help you easily create an iMac of your own, in PhotoShop that is.

Black iMac

Apple Remote
Apple has always throbbed our hearts with their exceptionally innovative and beautifully designed products. Apple remote is no different. Here is a tutorial to teach how to design a Apple remote in Photoshop with a realistic view and shiny looks. The tutorial also shows you how to change colors of such objects in photoshop easily.

Apple Remote

Sony Playstation 3
A gadget like Playstation is great to play with and it can add a lot more fun if we could turn it into a Photoshop image. And it’s not a tough task when you have a very well written tutorial infront of you.

Playstation 3

Nokia 5300
Using just multiple vector shapes, layer styles and some other tools, you can easily create mobile phone mockup in PhotoShop. The tutorial here shows you how to create a look-alike of Nokia 5300 Mobile phone.

Nokia 5300

PlayStation Portable
Designing a portable gaming console couldn’t get easier that this. Here is a revamped tutorial for creating beautiful PSP in PhotoShop. No-doubt it is going to take some time to finish this up, but in the end you will have refreshed your photoshop skills and have a cool-looking PlayStaion Portable to add to your PhotoShop creations.

PlayStation Portable

Nintendo Gameboy
If making a PSP in photoShop doesn’t get you excited, how about a Nintendo Game Boy? The tutorial will help you create a truly realistic Game Boy in PhotoShop and it involves using just basic tools that PhotoShop users use everyday.

Game Boy

USB Stick
This tutorial explains USB stick image formation in Photoshop. It is a pretty basic tutorial and you can even have the PSD if you want.

USB Stick

Mouse
Simple things are always fun to create in PhotoShop. This is a tutorial for creating a realistic computer mouse in  PhotoShop. You will alos be able to get a free PSD from the author’s blog.

PC Mouse

XBox 360
Microsoft’s XBox 360 is a very eye-catchy gadget. The looks are stunning and what’s more interesting is that you can create it in PhotoShop too. Here is a step-by-step tutorial for creating a Xbox 360 look-alike in PhotoShop. There are simple techniques involved in this tutorial, like gradient tool and pen tool which, most likely, every Photoshop user should be used-to.

Xbox 360

Nintendo DS Lite
This tutorial is not for newbies. Although it is easy to follow, but the author doesn’t explain the minute details. However if you are an intermediate level PhotoShop user, you can easy follow along and make you own DS Lite in PhotoShop with this tutorial.

Nintendo DS Lite

Digital MP3 Player
Creating an image of an mp3 player in 3D view is certainly an interesting thing to do in Photoshop. But that won’t be easy if you just hang around without knowing the techniques. Here is a tutorial which guides you throughout the procedure of recreating the image in 3D view.

Mp3 Player

Custom MP3 Player
This tutorial shows you how to create a custom MP3 player in Photoshop complete with buttons and the display. It can be done at ease when you know what steps to follow and this tutorial will provide you the steps in a very detailed manner. You can also work on shade, the button dimensions and the button patterns.

Custom MP3 Player

LCD Monitor
Creating shiny gadgets in Photoshop is fun. Creating a Monitor is no different. The easy steps in this tutorial will guide you through the procedure to accomplish it.

LCD Monitor

Microsoft Zune 2
This is a tutorial which teaches you how to create a Microsoft Zune media player in Photoshop from scratch.

Black Zune

Loox Pocket PC
Here is a tutorial to create a Loox Pocket PC in photoshop and boost your PhotoShop creativity.

Pocket PC

Detailed Audio Player
Yet another Photoshop tutorial about creating an audio player with minute details. This tutorial will be a great opportunity for all designers to practice the Shape Tools and Layer Styles skills. It involves a los of adding and subtracting of Shapes.

Audio Player

Sony Ericsson S500
In this tutorial you will learn how to make a glossy, shiny and a very beautiful mobile phone in PhotoShop. The author has provided a PSD file too, incase you need take it as a reference to create your own design.

Sony Ericsson S500

HTC Touch Diamond
In this tutorial, Constantin Potorac shows how he created an amazing look-alike of HTC Touch Diamond phone.

HTC Touch Diamond

Apple iPhone
Apple iPhone is a great innovative and heart throbbing gadget. The sleekness along the curves, the 'Home’ button and and other minutes details are not that easy to design in Photoshop. But, this tutorial shows you how to create a realistic iPhone easily. You just have to follow the clear instructions on this tutorial carefully and with-in no time you will be an expert in creating  an iPhone in PhotoShop.

Apple iPhone

Sony Ericsson W800
This tutorial shows you to create a Walkman phone in PhotoShop. The designing of Sony Ericsson W800 will require some skills with the brush and pen tool though.

Sony Ericsson W800

Strawberry Mobile Phone
Now here is an interesting tutorial to look at. This tutorial will guide you to create a Straberry phone in Photoshop. You just need images of strawberry and your mobile phone as reference images.

Strawberry Phone

iPod Nano Video
Refresh your layer structure and pen tool skills by recreating an iPod Nano Video in PhotoShop.This tutorial will also give you a glimpse of how to recreate objects in PhotoShop from an original image.

iPod Nano Video

Apple MacBook
Apple’s sleek gadgets are fun to create in photoshop because they look beautiful on the screen as well as in the real life. Here is a step-by-step guide for creating a MacBook from scratch in Photoshop.

Apple Macbook

Wii Controller The Wii controller in the image below is a true creation of Photoshop. Learn to create a simillar one in Photoshop by following this simple tutorial.

Wii Controller

Woofer
Here is a tutorial to create a woofer in Photoshop with a wooden texture background. This tutorial also shows how to put on screws on the woofer to make it look more realistic.

Woofer

Portable Media Player
Fancy creating a portable media player in Photoshop? Now you can. Create your video mp3 player in Photoshop by following some simple steps detailed in this tutorial. The reference image used in the tutorial is of RCA Lyra X3030 portable media player.

Portable Media Player

Retro Atari Game Catridge
If you have ever owned an Atari gaming console, you will definitely love to create this mockup in Photoshop.  This tutorial is about making a super retro game cartridge. Theme of the tutorial is to teach you to create a very easy, but really cool, 3D and geometric effect in Photoshop.

Atari Catridge

Blackberry Mobile Phone
Obsessed with Blackberries? You will love to create one in PhotoShop too. You will learn how to create a blackberry mobile phone look-alike in Photoshop by followwing the instructions in this tutorial. Author has explained in a detailed manner how to use Vector Shapes, Masks, and mostly Layer Effects to create this elegant design.

Blackberry

iPod Classic
A very simple yet inspiring tutorial of creating an Apple iPod Classic in PhotoShop from scratch.

iPod Classic

iPod Shuffle
iPod Shuffle is one of the simplest gadgets to design in photoshop. If you are just starting to design tech related stuff in Photoshop, you should start with the iPod shuffle. Read the tutorial, and create one of your own.

iPod Shuffle

Nokia 5800 XpressMusic
While Apple fanboys may enjoy designing the iPhone, there are Nokia fanboys out there too who will love to design Nokia 5800 XpressMusic. This tutorial is a 12 step precedure for attaining something like the below image.

Nokia 5800