This is the final iStat Server icon (the server companion app to iStat for iOS).
Details — Early images and some of the document's techniques explained.
Movie — I saved lots of versions of the icon as I was working. This is the result.
iStat Server 512 PSD.zip — The full, final Photoshop document of the icon.
iStat Server 512.png — A bigger version for ogling.
If you're going to scale this icon (or one set up like it), then you'll need the Scale Patterns to 100% script and Mask Feathering scripts, because both techniques are used heavily and scaling without the scripts will look hideous.
They're both available here, for free, because we're nice.
The rules: This PSD is provided for education purposes only. If you use it or parts of it in a commercial product, I will hunt you down and feed you live cockroaches. Feel free to replicate the tricks though.
7 months ago
Hudson: 9 meters. 7. 6.
Ripley: That can't be; that's inside the room!
Well done, Marc. You're a gentleman and a design scientist.
Awesome, thanks for PSD. Looking forward to digging through it
@Sacha Greif YES! I definitely had that in mind. Also, I couldn't find any images of it as a reference. My Google-fu was weak that day. What's the name of it? Was it mounted to the pulse rifles?
Edit: Found it! I should have been looking up "Aliens motion tracker". Ah well.
@Matt Kelsh Thank you. I like “design scientist”.
@Ash Atkinson Cheers!
Marc, thanks for the peek into your workflow, as if the actions weren't enough.
I'm wondering, during your process do you generally try to get effects done all on one layer/path (as in the button gradients/clipping-mask effects? Or do you combine them at the end? I assume the former, due to your past experiments, however it seems it would require a lot of planning and also would require each test effect to be replicated along an axis as opposed to simply copied as a layer style to each piece (in this case button) and slightly tweaked for perspective.
@Eli Schiff The construction of the document was pretty linear. Things were created in place, pretty much exactly as you see them. Some parts, like Buttons → Bottom Edge were made like that in place, even though it's probably a bit clever for its own good. One gradient across three buttons is a bit silly, but I wanted them to be slightly different anyway and I like neat documents.
Also, there were a few really rough sketches before starting in Illustrator. Oh, and there were a couple of failed attempts of different concepts. I don't think this is the world's best Mac icon, but it was fun to make and represents a few of the techniques I've been using recently.
Thanks for sharing this Marc. It's an amazing job!
Common man, it looks like a real product, not just an icon for it..
@Marc Edwards ✎ Bjango Well said! Glad to know :)
This is awesome! This will help me better understand gradient meshes now. Thank you very much!
Crazy good, Marc. I love how you show the process.
@Devin Saavedra I'm pretty sure there aren't gradient meshes in this
@Eli Schiff you are correct sir, I meant to say gradient maps.
Gradient maps are the business. So precise. So easy to work with.
Thanks for sharing Marc, nice to have insight in your methods.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter