iStat Server 2 icon (PSD)

16 Responses

1. Pro Marc Edwards ✎ Bjango

   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.
   https://github.com/bjango/bjango-actions/

   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.

   3likes

   7 months ago

2. Pro Sacha Greif

   Hudson: 9 meters. 7. 6.
   Ripley: That can't be; that's inside the room!

   ;)

   4likes

   7 months ago

3. Pro Matt Kelsh

   Well done, Marc. You're a gentleman and a design scientist.

   7 months ago

4. Ash Atkinson

   Awesome, thanks for PSD. Looking forward to digging through it

   7 months ago

5. Pro Marc Edwards ✎ Bjango

   @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!

   7 months ago

6. Pro Eli Schiff

   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.

   7 months ago

7. Pro Marc Edwards ✎ Bjango

   @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.

   1likes

   7 months ago

8. Pro Andrea Cau

   Thanks for sharing this Marc. It's an amazing job!

   7 months ago

9. Pro Angel Bartolli 

   Common man, it looks like a real product, not just an icon for it..

   7 months ago

10. Pro Eli Schiff

    @Marc Edwards ✎ Bjango Well said! Glad to know :)

    7 months ago

11. Devin Saavedra

    This is awesome! This will help me better understand gradient meshes now. Thank you very much!

    7 months ago

12. Uri Kelman

    Crazy good, Marc. I love how you show the process.

    7 months ago

13. Pro Eli Schiff

    @Devin Saavedra I'm pretty sure there aren't gradient meshes in this

    7 months ago

14. Devin Saavedra

    @Eli Schiff you are correct sir, I meant to say gradient maps.

    1likes

    7 months ago

15. Pro Marc Edwards ✎ Bjango

    Gradient maps are the business. So precise. So easy to work with.

    7 months ago

16. Pro Yummygum

    Thanks for sharing Marc, nice to have insight in your methods.

    7 months ago