Update: This post has been moved to Keep the Web Weird
Please update your links.
Thanks for the tutorial! I have some problems though. I am a beginner so please bear with me.
On the second part of the “inner edge glare” section, you say to add a layer mask. Do I select hide all or reveal all? I tried this a few times and I usually end up with a white glare through the center of the image.
On the “crop the top glare” section, I am not getting a shiny gloss as shown. What layer should be selected when I select the top section with the ellipse tool? I am doing this in the last layer that was created (for the top gradient) and when I inverse/delete, nothing happens. I don’t understand how a gloss could be created from these actions. Any chance you could break it down even more? thanks
Howdy Chris! Sorry I didn’t make the tutorial detailed enough, I think I left out some stuff.
Until then, let’s see if I can help you here.
For the inner edge, it’s a little difficult to explain, but not really that hard to do. Here, I’ll upload a quick video.
Ok the edge glare video is here:
I’ll make a quick one for the rest of the tutorial too while I’m at it
Ok here’s the rest of the tutorial in video form:
I don’t know much about video compression. It’s 4 minutes long and 7MB.
I hope this is helpful! If you need anything explained, just let me know.
AH! On the inner edge, I was adding the mask to the original color layer, not the new layer where I stroked the path. That was my problem. When you said “Select your base layer…”, I thought that meant the original layer.
The videos really helped. I can see you adjust the opacity in many of your layers.
Thanks a bunch. You rock!
them with you, and create a psd kit for anyone wanting to do the same thing. I’m all about making things look uniform, so I used the traditional Apple iPhone app buttons as a template.Update: I have created a tutorial on how I made this .psd file!Check it out!
Awesome. There are a lot of really cool applications for some of the tricks you’ve used here. Thank you!
Awesome tutorial, looking forward to making a few icon/buttons.. One question tho, where is the tutorial for getting the icon on the phone itself?
Thanks for the comments and the feedback! Glad to know the tutorial is helping people out.
As for getting the icons on the phone, Apple has not given developers access to anything, so you won’t be able to use these icons like I thought. If you make a web site for use on the iPhone, these icons would be a great fit.
I take that back! Apparently the iPhone has been hacked and you can change the icons yourself. Maybe this is what you were referring to?
I’m pretty cautious when it comes to stuff like that, so I’m not sure I’ll try it myself. If you do, let me know how it goes!
[IMG iPhone Icons] 如果你要做個iPhone應用，你可以用這個iPhone Icon Kit給Photoshop。即使你只想把很好看的圖標(icons)給你的網路應用，或是網站你也能用。 他們這裡也交代怎麼做那種圖標。
iPhone style icon tutorial ≪ Jotlet Developer Blog
iPhone style icon tutorial.
- Une superbe version remasterisée des icônes des menus de l’iphone chez fasticon : [IMG icone iphone] - Et si vous voulez faire vos propres icônes dans le style de l’Iphone vous pouvez jeter un oeil àce tutorielqui vous permettra d’arriver à ce rendu : [IMG Icône Iphone] Autres articles potentiellement en rapport:
WOW!, i´m spechless, im photoshoping right now, hope you don´t mind if i come back later with some questions?
Please do! I’m happy to teach =) Hopefully my tutorial is helpful.
These are my links for September 6th:iPhone style icon tutorial « Jotlet Developer Blog-
hey man, im a little slow on the whole photoshop thing since i just got it today, would it be too hard to video tape the whole process? thanks
Nice work!Could you send the iPhone-style.psd to my e-mail box? I could not download form the website!Thanks!
Excellent tutorial matt! Now Ive read it, im gonna give it a bash….why not! might even be fun!!! Great work buddy, i like your style! T
thanks a ton! I’ve been wondering how those cute icons of iphone could be cooked with Photoshop for about long enough, and I can now do it myself. Yeeeeeeha!
Many people have emailed me asking for a new tutorial that matches the final iPhone icons that are on the phone now. They are a bit different than these, and I think I will skip the screenshots and just make a video this time.
Keep an eye out! Thanks foe the great feedback, everyone!
CC web designs and other free and royalty-free resources. You can visit the following links to contact the authors: Jhlabs’s Image Filters lib; License: APACHE Sarissa Ajax Lib; License: GPL/LGPL/APACHE. Javazoom’s Jlayer Mp3 Lib; License : LGPLJolet’s Apple Iphone style icon PSD Template: used in album page. Lefinnois’ Gimp aqua button script: Buttons in album page and applet are created with it. NanoHTTPD; An Embeddable http daemon; License: Apache Backgroundsarchive; The fancy tileable background patterns came from
Hey could you make a tutorial for how to make sliders for windows. thanks
in the second step, i dont understand it. When i use the path selection and do that, i can MODIFY it. its not even highlighted, and what do u mean by “nice” ? make a vid doing all of this plz.
yo man, can u plz make a vid for this! its so difficult, espically the command plus w.e, then with the control click nice path like WTF LOL
or make a more detailed tutorial..
the same color as the bg color so it looks a little beveled on top of the glare. I tried to build this into the kit by making the stroke black/soft light blend mode, but again, it didn’t look quite right. Download PSD Visit Creator’s WebsiteVisit a Tutorial on how to create the file.
Great work, btw. I just have one interesting observation…
I cannot for the life of me understand why Photoshop can’t save as a PNG format.
Whenever I save my file, I have to save it as a JPEG, and that doesn’t really work when I try to import it into my iPhone because it ends up having a non-transparent background.
Could you help me as to what I should be doing? I want to have a nice transparent icon, but it just won’t work.
I’m using Photoshop CS3 on a MacBook.
[…] This process is fully described in this excellent tutorial. […]
It’s still cool making little shiny bits:making iPhone style icons in Photoshop.
i kept searching for such a tutoial all over the internet…
finally i found this page!
thanks a lot: great work!
Great tutorial — exactly what I hoped to find! And the quick fix psd is an awesome touch. Thanks for sharing your knowledge with everyone!!
If you want iPhone icons for your homescreen check out www.icons4iphone.com
Thank you for this very very nice tutorial !
Thank you so much for this tut!!! only had my iphone for about a week now. got it already unlocked/jailbroken and so on. so still very new at adding and changing things. but using your tut i managed to create my own theme and put it on why phone!!! and i love it!
Thanks so much
Your tutorial is a gift I thank you for! I can see the care (and hours) that went into this… the quicktime videos were an added bonus. Thanks.
Great tutorial… I could never do this on my own.
Hey. This tutorial is really neat. Unfortunately there is one step that I cannot figure out. I am using Photoshop CS2 on a Windows machine, in case that matters. Here’s my problem:
In the first step, it says to select a color and draw a rounded rectangle. Then in the next step it says that “the layer I just created should have 2 parts: the fill color and the path. Control click the path to get a nice selection”. My problem is that when I draw the rounded rectangle, I don’t get a new layer with a fill color and a path. All I get is a locked background layer with a colored box on it. Usually I am reasonably proficient with Photoshop, but clearly I am doing something wrong.
Great tutorial! Learned a few new techniques
Do you know where there is a tutorial on how to make the ‘gear’ widget icon?
Awesome! Thank you VERY much for this tutorial.
im having problems with the preview once its completed.
when its up on the internet (customize 2.0 beta4), and when its used, the outer edges still show the entire canvas. the picture still has corners. how do i get rid of this?
I don’t understand how to do the inner edge glare can you help me. because you make the same shape inside then what? i can’t get the select modify thing to work can you please help me?
Thanks for the tutorial. I’m completely new to Photoshop so some parts were difficult, I could’ve probably benefitted from screencaps of the actual PS buttons we were supposed to click but awesome anyways!
Can you tell me if Photoshop 6.0 or 7.0 can create the iPhone style icons?
Comment RSS · TrackBack URI