HOME | DD
chaosLT β
Interface-Design-Tutorial
Published: 2006-12-06 16:23:18 +0000 UTC; Views: 63186; Favourites: 838; Downloads: 2152
Redirect to original
Description
Interface-Design-TutorialHey Everyone,
So finally i finished a tutorial about Interface designing, i started this
tutorial about an half year ago xD. And now i found it and thought, that
i should finish this
.The tutorial doesnt show you how to make an nice orb, or how to create cool wires
I think there are enough Tutorials out there.
I want to show you in this Tutorial the Basic process you might go through to create an interface.
Well iam not sure if this is usefull for anyone, and i became quite sloopy in the end xD, cause
i just wanted to finish this
.I Compressed the Jpeg alot to get a bit smaler file size, but its still quite big :/.
But well,
Please tell me what you think
.// eww, and just because i cant trust deviantart, i uploaded the tutorial here:
[link]
so if the fullview doesnt work, just use that link
A huge thank you to everyone who faved/commented and showing interest for the "interface-art" in general.
I uploaded some PSD-Files which might help you understanding this tutorial better here: [link]
Related content
Comments: 197
Thanks for sharing your knowledge... Very nicely done.
π: 0 β©: 0
sweet tut mate, shoudl help ALOT of newbies out there
π: 0 β©: 0
"Interface Design" is not defined by complicated, metallic shapes and shiny orbs.
True Interface Design is about laying out information in a creative, intuitive way for the viewer to interact with. This is one example of a very specific style of designing interfaces; one which, on an unrelated note, I am not very fond of.
π: 0 β©: 1
"Interface Design" can mean many things, including specific graphics which make up a navigation (thus "interface") system.
Please note that the gallery director DID like this tutorial, thought it was informative and beneficial to others and so featured it. Complain to them and not at this artist who took the time to show people how he makes these things.
π: 0 β©: 1
I am not saying this shouldn't be featured or it isn't informative, nor am I "complaining" about anything.
I am only saying that calling this an "Interface Design Tutorial" and saying things like "Become and awesome interface designer" are unbelievably inaccurate, and quite frankly offensive to many of us "Interface designers" out there. He is drastically shrinking the scope of something that lots of us have dedicated a lot of time to.
It would be the same if I were to post a tutorial on "How to become an awesome illustrator" that was entirely devoted to how to draw great anime eyes and bunny ears on people.
It is a perfectly nice tutorial, and I am sure a large portion of the population of DA find it very informative, I just feel that it is tragically mis-titled.
π: 0 β©: 1
Wow, there are some interesting discussions going on here
Actually i can understand both points.
I actually chosed that name, cause people who are searching for "interface-design-tutorials" here on deviantart, are much likely more interested in the "style" part.
I have been a webdesigner and know that style is definately only one big part of the whole, its ofcourse imporant, how you lay out your information, how to make it user friendly and a valid code is also something thats imporant imo...
π: 0 β©: 0
wowowow...wish I had this when I was working on my themes...I love it...
π: 0 β©: 0
Heh, this is just what I need now. Thank you for this tutorial! And grats for the DD and furthermore thanks to the DD which brought this great tutorial to my attention
π: 0 β©: 1
Warum mach ich mir eigentlich die MΓΌhe englisch zu schreiben? Naja, egal ^^
π: 0 β©: 0
good and helpful one.. i figured out i could make new and other shapes also...
π: 0 β©: 0
this is awesome i could really use this thanks..+fave
-good job man
π: 0 β©: 0
WOW!
Amazing.
Thank you for this tutorial! I will certainly try to do something with it when I have the time. Not for interface design at the start, of course: I really don't know how to do any of that, although I have some skills in photoshop, mostly lame brushing xD
π: 0 β©: 0
That pretty cool!!
Might give that a go later tonight.
π: 0 β©: 0
I think you should Change the name of tutorial, in just light and shadow tutorial, and no interface design, 'cause there is no interface design at all, is jsut how paint shadow and lights...
π: 0 β©: 1
haha you took the words out of my mouth there. Its just a fancy looking picture in the end.
I'm sure he simply forgot to mention how to splice or import preserved transparency layers into 3rd party programs.
π: 0 β©: 0
I FOUND IT QUITE USEFUL, ESPECIALLY THE LIGHTING TIPS. Shadows and highlights have always given me rashes
π: 0 β©: 0
hmm i got problem with making it 3d... bit short explained.
You got the thing on top but you can see:
where to put the dark parts.
Where to put the light parts.
How to make a random shape 3d.
i think those are really the hardest parts.
it cause from totally flat to allmost full 3d...
btw a tip for next time. the thing in the top.
you cant really place the numbers with the colors. So you can better draw lines in specific colors around the spot. like blue red purple orange and stuf. and then tell wich color is wicht tool
however it is quite usefull to see how to draw the interfaces before you 3D them 
and since ther arent that much tutorials about interfaces around that sure is a +
π: 0 β©: 0
Rocks, indeed. I'll fave and try out that!
π: 0 β©: 0
in deutsch da wΓ€re mir mehr geholfen....
π: 0 β©: 0
=] thanks for the tut dude, relle helped ^^!
π: 0 β©: 0
hehe dankeschΓΆn... wΓ€re aber schΓΆn wenn du erklΓ€ren kΓΆnntest wie man richtig mit d&b umgeht! einstellungen usw. *liebguck*
aja und :fav+:
π: 0 β©: 1
hehe
π: 0 β©: 1
Cmon man! Its a nice start to trying to teach people how to do interface but you neglected the hardest part which is how to do the proper highlights and bevel/shadows :-/ You can't just throw the doge and burn tools at sombody and exspect them to be able to use them right. This tut is only useful to the people that already know how which isn't a very large majority. Infact, a very select few :-/ Hence another reason why your not getting many results.
It would be awesome if you could maybe make or link a tut on that or atleast direct them abit on the how to do that stuff.
thanks~SG
π: 0 β©: 1
its all about trial and error, i dont want you to exactly teach you how to use those tools. learn it yourself!. In the end you'll see that you invented pretty much your own style and not just a plain "copy" of mine. And .. as I said in the Tutorial, its only for the basics, you must figure out the more advanced stuff yourself, I think, that is what makes it interesting ;D.
well... but anyways ... maybe ill write an more advanced Tutorial... sometimes in the Future. Right now this is all i (can) offer.hmm.. and.. If you want i could upload some psd files for practice purposes to my scraps.
btw: sorry for not replying on your note yesterday, i was very busy 
π: 0 β©: 1
well thanks for replying.
π: 0 β©: 1
hi, here are some of my psd's. i released them long... time ago, but i think you can still learn from it
[link]
π: 0 β©: 1
any chance you have them on a diffrent host? like send space or mega upload?
π: 0 β©: 1
actually, they are on my own webserver. But i think you dont have access cause your not registered there or anything .-...
whatever
[link]
[link]
[link]
[link]
have fun ;D
π: 0 β©: 1
First one had some type of corupted file type 
π: 0 β©: 1
no problem
hmm .-. ... corrupt ? maybe a downloadmanager might help.
π: 0 β©: 0
Arg, if only you could explain the highlighting abit more ... I can't figure out for the life of me how you do that so well...
π: 0 β©: 0
kommt es mir nur so vor oder machen den style nur wir deutschen ^^ ich hab bis jetzt sowas noch bei keinem ami oa. gesehen , gibts irgendwo n geheimes tut xD
π: 0 β©: 0
Danke das tut hat mir shr geholfen , planst du schon ein weiteres Tutorial ? du kannst ja ein video tut machen
π: 0 β©: 1
danke fΓΌr den kommentar+ +fav
geplant/angefangen ist schon nen weiteres, hab nur im moment keine zeit ums fertigzustellen
π: 0 β©: 0
Great tutorial. I bet alot of people find this very useful!
π: 0 β©: 0
sweet, I have been gaining more clients after I read this tutorial, thanks alot man
π: 0 β©: 0
freut mich wirklich dasses euch gefΓ€llt ^^''.
Mus gerade feststellen,das das tut nun seit heute genau 2 montae alt geworden ist
π: 0 β©: 0
| Next =>