iStat Server 2 icon (PSD)

16 Responses

  1. Marc Edwards ✎ Bjango 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 — 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.


    over 1 year ago

  2. Sacha Greif Sacha Greif

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



    over 1 year ago

  3. 🐎 Matt Kelsh 🐎 Matt Kelsh

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

    over 1 year ago

  4. Ash Atkinson Ash Atkinson

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

    over 1 year ago

  5. Marc Edwards ✎ Bjango 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!

    over 1 year ago

  6. Eli Schiff 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.

    over 1 year ago

  7. Marc Edwards ✎ Bjango 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.


    over 1 year ago

  8. Andrea Cau Andrea Cau

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

    over 1 year ago

  9. Angel Bartolli Angel Bartolli

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

    over 1 year ago

  10. Eli Schiff Eli Schiff

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

    over 1 year ago

  11. Devin Saavedra Devin Saavedra

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

    over 1 year ago

  12. Uri Kelman Uri Kelman

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

    over 1 year ago

  13. Eli Schiff Eli Schiff

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

    over 1 year ago

  14. Devin Saavedra Devin Saavedra

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


    over 1 year ago

  15. Marc Edwards ✎ Bjango Marc Edwards ✎ Bjango

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

    over 1 year ago

  16. Yummygum Yummygum

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

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like