Futuristic GUI design is sought after by companies in niches like electronics, software, and gaming. It's a style of design that requires intensive Photoshop skills. Let's take a look at some artists that are masters in this area of design. We'll point you in the direction of some beginner tutorials on the subject. Also, let's look at some additional resources where you can continue to be inspired and hone your skills.
Digital Art
Signal by Lance Thackeray
Lance Thackeray, aka Pureav, is a seasoned graphic user interface designer. He's now running GUI.Station as well, which is a forum for GUI design (See last section). His work is amazingly detailed and his portfolio is a must see. Follow the link below to the audio player skin titled Signal.
Assault Skin by Dan O'Brien
Dan O'Brien, aka DemonDan666, creates highly detailed futuristic vBulletin skins. He does so on a regular basis working at exaltic. He has a large selection of detailed shiny interface designs and skins in his gallery. Follow the link below to see a larger image of his Assault Skin forum design.
System Force Japan by Homer Yulo
Homer Yulo is a Japanese Photoshop designer that creates intricate futuristic interface designs. His gallery features a small selection of interfaces designed with mechanical style parts and deeply glowing orbs. Follow the link below to see a larger image of the System Force Japan wallpaper.
Sci-fi interface template by Anton Wiklund
Anton Wiklund, aka karsten, creates futuristic and intricate interface website designs for gaming sites. He runs GameSiteTemplates.com. It's inspiring to see Photoshop designers filling niches like this online. Here is a link to his gallery. Below you can view his Alien Vs. Predator Interface Template closer.
KrazyPlayer by Tim Silva
The KrazyPlayer is a skin designed by Tim Silva, aka krazytim. Others helped on the design as well. The KrazyPlayer is a futuristic skin design for Winamp and won a competition. You can view Tim's gallery or jump straight to the KrazyPlayer Artwork below. Tim has started a new digital art forum called Encide.net with some friends. You can also see his interface design tutorials at his site.
Tutorials
[Design] Interface Elements - Knobs (part 1)
This tutorial over at GUI.Station shows how to create an interface knob. It's an element meant to symbolize in this case a volume button, but the principles involved in creating it would apply to other knobs as well. "In this tutorial, the knob is most likely something you would see on a DJ rack, stereo, or anything of that style. It has an outer rotating ring with "finger grips", with a nice orb in the center displaying what it does, and the current level (in this case, volume.)"
Loading Interface
Learn some tricks and techniques while creating this loading interface. The design has a detailed plastic future feel. It's a seven part tutorial and a good place for a beginning level Photoshop user to start.
Interface/Skin Design tutorial in photoshop
Learn how to create a application interface design. It has a smooth plastic style of design. The Photoshop version covered in the tutorial goes back to version 7, but should still be relevant with modern versions of Photoshop as well.
Interface Design Tutorials on PSDTUTS
We don't have futuristic GUI design tutorials on PSDTUTS yet, but there are a few other tutorials that teach skills that could be implemented in that style. For example, we have two mobile phone tutorials that show you how to create mobile device interfaces from scratch. The tutorial Create a Realistic Blackberry Style Mobile Phone From Scratch and Create a Mobile Phone Styled Like the HTC Touch Diamond. You may want to browse the interface section of the site as well, link below.
Multi-Part Interface Design Tutorials by Andrew Williams
Andrew Williams, aka EliteSniper177, has a couple of multi-part interface design tutorials aimed at beginners. One shows you how to create a music player skin. The other shows you how to crete a detailed gear. Follow the link below to his tutorial gallery.
Other Cool Stuff
GUI.Station
This is a cool forum run by Lance Thackeray featured in the Digital Art section above. You can access the growing section of GUI tutorials and many areas of the forum. Also, if you join you can download source PSD files to analyze. Some interesting downloads include a futuristic grunge file, some helpful layer styles, and many others. Signing up is free and gives immediate access to the addition features of the site.
The Skins Factory
This is a GUI design company that creates richly detailed skins, interfaces, and more. Their portfolio showcases a variety of detailed futuristic design work in a combination of multiple styles, though a lot of their work has a plastic shiny look to it. Browse through their portfolio for some inspirational work. They fluidly combine eye-candy with functional design and have been at this for a long time. Here is the link to the project in the image shown.
AREA01
This is an exclusive Deviantart club for talented GUI designers. There are pages and pages of advanced interface and GUI design in their Gallery. It's a great place to find more talented designers working in this field. Lot's of future and retro-future GUI design can be found here.
Skinmasters Interview Series
This is a running series from mrrste in which popular skin designers are interviewed. It's part of Deviantart news. You can find it under the Customization tab. In the fifth Skinmasters installment Badboythemer is interviewed. He has a nice collection of futuristic interface designs among other themes and skins. You can follow the link below to the interview.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )rjton August 3rd
qiero tutoss
( )Fredrik August 3rd
Nice
( )Devise August 3rd
do you think you can write a tut on how to make 3d abstract shapes? I know its done in other 3d programs.
( )heres an example:
http://www.photoshopstar.com/tutorials/04/00.png
mouka August 3rd
thks
( ).m August 3rd
great topic. Kudos!
With the growth of multi touch, interactive graphic interface will be the next step for a visual / graphic designers.
I’m looking forwards for the day where even illustrator/ photoshops extended its application abilities with touch screen interactivity.
the possibilities are endless.
( )Seraphim Collective August 3rd
Nice! I’ve seen people do this without the help of ANY 3D-programs.
( )Lamin Barrow August 3rd
Quite inspiring collection you’ve got. Thanks so much.
( )Devise August 3rd
hmmm, how?
( )Tim August 3rd
Very nice collection
This is Tim Silva (creator of KrazyPlayer), and I wanted to say thanks for the feature, I’m honored
I was wondering if you would be kind enough to include a link to a design community that I am running with some friends. It is called encide, and we are just starting up: http://www.encide.net/
For proof that this is me, here is a link I have to it on my site: http://www.timsilva.com/links/
Peace,
( )-Tim
RIjalul Fikri August 3rd
When it comes to interfacing, I always remembered to “Sade” from “digital-industry”, but sadly the site has no longer exist now. You can check her work and portfolio here http://ezine.whoredcanvas.net/?s=sade&x=0&y=0&=Go, I always like her tutorial especially the i-Kat ones.
( )Mark Abucayon August 3rd
that is cool list I like it.
( )Dean August 3rd
I find it a shame to see this level of skill bebeing “overkilled” though.
And you are right it is the electronics/toy/gaming companies that digg this style
However when it is not “over-done”, it can also be highly artistic,mature and absolutly beautiful…
It bothers me to see it done till the point of “tacky-toy”.
( )Ignacio August 3rd
Finally!
( )Braden Keith August 3rd
Wow those are some cool stuff. Great inspiration
( )Qbrushes August 3rd
@Devise. I would also like to see some 3D mixed with phososhop effects tutorial on psdtuts.
( )Nysuatro August 3rd
Hot post.
( )Joefrey Mahusay August 3rd
I feel that I am in the future! Great works!
( )L2 August 3rd
My bet would be http://www.effectica.com, Fede does great stuff!! And on the forums there are some crazy talented designers who do this kind of stuff to the max.
( )Devise August 3rd
@ Qbrushes, yeah there should be some 3d stuff on psdtuts, teach us how tut creators! lol. it would be nice, and a first. which makes this site deviant from others.
( )Manuel Merz August 3rd
Thanks for mentioning my interface club AREA01
Great to have some support here.
( )Lennart August 3rd
Interesting, but I don’t like this style.
( )Ariful Alam Khan August 3rd
Great resources. Thanks!
( )andi August 3rd
Aw, I thought “wow finally an awesome tutorial” but that was just a pic of somebodys work. The actual tuts are poor looking beginner stuff compared to those examples.
( )Sean Hodge August 4th
@Tim – Thx. I added the link to the new Encide community and good luck with that. If you ever want to write a tutorial for us, contact us through our contribute page http://psdtuts.com/write-a-tutorial/ as we would love to work with you. I also added a link to your tutorials, which are great.
Thanks everyone for adding links to more resources. This helps the whole community out. Also, I’ll be contacting some of these artists next week to try to get some high-caliber interface tutorials on the site. There are some really talented artists out there.
A couple people asked about mixing 3D with Photoshop. We do have a tutorial that shows how to mix 3D elements into a digital illustration in PLUS from Justin Maller called “The Supercharged Beetle of Doom” http://psdtuts.com/news/new-plus-tutorial-the-supercharged-beetle-of-doom/
We would certainly be interested in one on this topic as well. Tutorials on 3D effects mixed with Photoshop is a great topic. We’d love to hear from any artists talented at mixing 3D with Photoshop. I’m working with someone from http://www.slashthree.com/ on a tutorial on mixing 3D elements with Photoshop, though it will take a bit of time before it’s finalized.
Thx.
( )Shane August 4th
Interesting this one – some of the skins remind me of winamp. I always found that although they looked interesting, from a usability point of view, they were substandard. I therefore always reverted back to something quite plain and functional.
Just as on sister site nettuts, many people say ‘don’t overuse effects’ with jQuery and other javascript libraries, when it comes to this type of design, if it’s used in a user interface context, I think designers need to bear in mind the usability. Just a thought
( )Tim August 4th
Thanks for the kind words and the links Sean, it’s really appreciated. Anything I can do to help out in this area I will, it’ll play a huge role in the future of the internet. I will bookmark that link and start brainstorming for good ideas for tutorials. You will be hearing from me in the future regarding a unique tutorial for psdtuts, I like your policies and I think that all could benefit from it.
Peace,
( )-Tim
Pat August 4th
The 90’s called. They want their designs back
( )Max | Design Shard August 4th
im not a lover of this type of design that is show earlier in the post but some of it is quite cool ie. theKrazy player, i guess what ever the client wants youve got to give em it.
Max | Design Shard
( )Dean August 4th
LOL @ Pat
90’s were boom years!, i miss them.
( )insic August 4th
@Joefrey Mahusay… Youre a funny man.
( )kha August 4th
I live this digital design. Great
( )Mukund August 5th
Wow!! Thats super Sean!! I love GUI design!
( )Lance Thackeray August 6th
Hey, Lance here from GUI Station. Just wanted to say thanks a lot for the feature. However, you chose a rather old design to showcase LOL. People are mentioning that usability should be kept in mind, well, back then, I wasn’t designing for that, just for the sheer fun of making “gadgets”. However, I now design for actual skinning use. Just thought I’d disclaim myself =]
Thanks a lot once again. I really appreciate this kind of support.
Peace, Lance
( )Sean Hodge August 9th
@Lance – I think that the fun of designing and making things in Photoshop is often how people build up there illustrative skills. The illustrative skills you have could easily be combined with well-tested and user friendly design, which I’m sure you’ve made plenty of user friendly skins as well.
Some people tend to think that detailed and illustrated interface designs can’t be usable. Often, it’s structure, testing, and planning that dictates usability. Minimal and Web 2.0 designs aren’t necessarily more or less usable. Style doesn’t necessarily effect usability, though it can, but it will certainly effect how the market perceives the design. And there is a large market hungry for this style of design.
Thx.
( )Nigel August 14th
Hi and thanks for featuring our Area01 interface club, after reading many responses, please do not judge our styles, as design is a constant evolving process, and while some think this type of GUI design is too detailed or busy, many others love it, hence the whole reason we started Area01 in the first place, because you can find clean GUI design all over, but there was not many decent detailed clubs, other than Effecta and Di ( digital industry ) and some others. But still none of these delt specifically with GUI detailed design, so myself and Manel created Area01 the rest is history.
Thanks for your support and always remember
Photoshop is fun
( )Merlin28 October 22nd
But my personal experience in speaking with so-called liberated women bears this out. ,
( )His_wife96 October 23rd
Those who believe in him are also alive! ,
( )