Update: This post has been moved to Keep the Web Weird
Please update your links.
Powered by Gregarious (42)
Recent posts
- Jotlet acquired by Jive Software! April 6th, 2008
- Jotlet Widget for WordPress! March 8th, 2008
- Jotlet JavaScript API coming soon, and here’s a sneak peak! March 5th, 2008
- Sync to Outlook Officially Released! October 22nd, 2007
- Jotlet Online Calendar Keeps Home and Business in Sync September 7th, 2007
Chris
July 5th, 2007
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.
Chris
July 5th, 2007
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
matt
July 6th, 2007
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.
matt
July 6th, 2007
Ok the edge glare video is here:
http://blog.jotlet.net/images/edgeglare.mov
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:
http://blog.jotlet.net/images/restoftutorial.mov
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.
Chris
July 6th, 2007
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!
Index of /
July 14th, 2007
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!
Rich
July 15th, 2007
Awesome. There are a lot of really cool applications for some of the tricks you’ve used here. Thank you!
Sully
July 16th, 2007
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
Sully
matt
July 16th, 2007
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.
matt
July 17th, 2007
Sully,
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?
http://www.modmyiphone.com/wiki/index.php/Iphone_skinning
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!
區段40
July 17th, 2007
[IMG iPhone Icons] 如果你要做個iPhone應用，你可以用這個iPhone Icon Kit給Photoshop。即使你只想把很好看的圖標(icons)給你的網路應用，或是網站你也能用。 他們這裡也交代怎麼做那種圖標。
てっく煮ブログ
August 1st, 2007
iPhone style icon tutorial ≪ Jotlet Developer Blog
stacks
August 14th, 2007
iPhone style icon tutorial.
2803 webdesign | webdesign, css, graphisme, scripts...
August 27th, 2007
- 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:
DS
September 4th, 2007
WOW!, i´m spechless, im photoshoping right now, hope you don´t mind if i come back later with some questions?
Hehehe
Keep Smiling.
matt
September 4th, 2007
Please do! I’m happy to teach =) Hopefully my tutorial is helpful.
wurch.blog
September 7th, 2007
These are my links for September 6th:iPhone style icon tutorial « Jotlet Developer Blog-
lyndell
September 16th, 2007
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
vanqy
September 22nd, 2007
Nice work!Could you send the iPhone-style.psd to my e-mail box? I could not download form the website!Thanks!
tarik
October 10th, 2007
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
xylopia
October 10th, 2007
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!
matt
October 11th, 2007
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!
FreeJTV
October 12th, 2007
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
SlidePlay
October 26th, 2007
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
Steven
December 1st, 2007
Hey could you make a tutorial for how to make sliders for windows. thanks
Juwilz
December 25th, 2007
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.
Juwilz
December 25th, 2007
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..
DigMo!
December 30th, 2007
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.
Gabe
January 5th, 2008
Hi!
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.
Make an iPhone in JavaScript using jQuery :: JavaScript Demos
January 10th, 2008
[…] This process is fully described in this excellent tutorial. […]
The Full Of Hate Brothers Say......
January 11th, 2008
It’s still cool making little shiny bits:making iPhone style icons in Photoshop.
Sascha
January 18th, 2008
Hi there,
i kept searching for such a tutoial all over the internet…
finally i found this page!
thanks a lot: great work!
Sascha
daphne
January 31st, 2008
Great tutorial — exactly what I hoped to find! And the quick fix psd is an awesome touch. Thanks for sharing your knowledge with everyone!!
iPhone icons
February 4th, 2008
If you want iPhone icons for your homescreen check out http://www.icons4iphone.com
Apple iPhone
February 7th, 2008
Thank you for this very very nice tutorial !
Storm
February 8th, 2008
Hey!!!
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
Marc
February 9th, 2008
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.
sondlerd
February 10th, 2008
Great tutorial… I could never do this on my own.
David
March 22nd, 2008
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.
AG
March 31st, 2008
Great tutorial! Learned a few new techniques
Do you know where there is a tutorial on how to make the ‘gear’ widget icon?
Many thanks!!!
Anthony
April 11th, 2008
Awesome! Thank you VERY much for this tutorial.
jake
April 17th, 2008
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?
thank you.
anonimous
April 18th, 2008
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?
Fist Sun
May 17th, 2008
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!
Michael
June 18th, 2008
Can you tell me if Photoshop 6.0 or 7.0 can create the iPhone style icons?