0

I am trying to use the "App Icon Template" with a smaller sized image than 1024x1024px in order to generate a rounded 120x120px iOS 7 icon image from my original squared 120x120px image.

When I place my squared 120px image as a smart object and scale it up to 1024x1024px, the exported 120px version has a low quality. So I tried to change the image size of the whole smart object to 120x120px but that leads to the icon not taking up the full size in the PSD as it still interprets it as 120x120px object within a 1024x1024px object so that it covers a tiny portion of the exported icon.

How can I change the largest size throughout the PSD from 1024x1024px to 120x120px so that the exported 120px image is of high quality?

Thanks in advance.

  • Why would you just not use the 120px size that's there? – Scott Sep 12 '14 at 16:29
  • @Scott Good question, I didn't clarify that: I am using the PSD to create an icon with rounded corners for use on a website, my original one is squared and I don't have it in a different size anymore. – user29853 Sep 12 '14 at 16:33
  • Err.. that comment doesn't seem to clarify anything to me. :) There's a 120px size (rounded) icon in that PSD... can't you just use that? Ignore the large size, use the iPhone retina size. And if this isn't for iOS why do you need that template at all? – Scott Sep 12 '14 at 16:35
  • You mean the exported 120px version? As I mentioned, the image quality is low (blurred image) if I use a 120px image and scale the smart object to 1024px. I only want to create an image with rounded corners just like the ones used for iOS 7 apps. – user29853 Sep 12 '14 at 16:38
  • You have completely confused me. Do you need a 120px image or a 1024px image? Why on Earth are you even using that template if all you need is a rounded image? Please edit your question to clarify what you need to create. That will go a long way. My feeling is you should simply ignore that template, open a new Photoshop file the size you need and create a rounded corner mask. – Scott Sep 12 '14 at 16:47
0

Open the template

  • Delete everything in the layers panel except the groups titled

    • iPhone > 120 Retina Home Screen
    • Rounded Mask

    Delete every layer except the two layers highlighted here:
    enter image description here

  • Command/CTRL-click the mask thumbnail on the "Rounded Mask" group. This will load the mask as a selection (you'll see the marching ants)

  • Grab the Marquee Tool, hold down the Option/Alt key and drag selections over the areas which are not the 120ox icon. So that, in the end, you are left with marching ants only around the 120px icon.
  • click the "120 Retina Home Screen" group in the Layers Panel to highlight it.
  • Click the New Mask button at the bottom of the Layers Panel.
    Things should look like this:
    enter image description here
  • Drag the "120 Retina Home screen" group out of the "Rounded Mask" group. (So it's not nested inside the "Rounded Mask" group).
  • Drag the "Rounded Mask" group to the trash icon at the bottom of the Layers Panel.
  • Choose Image > Trim from the menu.
  • Tick Transparent Pixels in the dialog box and click OK.
  • Expand the "120 Retinal Home Screen" group in the Layers Panel and edit the "Artwork" smart object layer with your art. Or simply add a new layer containing your artwork.
  • When finished, choose File > Save For Web to save your image for the web. (Do not use any of the actions associated with the template.)

Essentially all you need is a 120x120px document with a rounded corner mask. That can be created a number of ways, many of which are faster and less convoluted. Based upon your initial decision to use this template for something relatively straightforward, I think the above explanation may be the most beneficial to you.

Same thing in 5 simple steps.....

  • New 120x120px document
  • Draw a rounded rectangle using the Rounded Rectangle tool (it doesn't matter what color the rounded rectangle is.
  • Place your artwork as a Smart Object layer above the rounded rectangle layer
  • Hold the Option/Alt key down and click the line, in the Layers Panel, right between the art and the rectangle layers.
    clipping mask
    This created a Clipping Layer which restricts your artwork to only within the rounded rectangle. This adds the rounded corners to your artwork.

  • Choose File > Save for Web... to save the image.

To be frank, this is very simple Photoshop stuff. There shouldn't be a need for a "template" or anything pre-constructed. All it takes is a basic understanding of tools and the Layers Panel.

  • First of all thanks for your answer! I have a question on this point of your first solution: "Expand the '120 Retinal Home Screen' group in the Layers Panel and edit the 'Artwork' smart object layer with your art.". At this point, the same problem as mentioned occurs. I can either place my 120px image and resize it to 1024px or I change the image size to 120px and place it but then it is tiny again in the "120 Retina Home Screen" group. How would you insert a 120px image here? My feeling is that I need to change something in the "120 Retina.." group but I don't know what. – user29853 Sep 12 '14 at 17:33
  • Sorry, you aren't making any sense to me. "place my 120px image and resize it to 1024px" Why would you be resizing to 1024px with the steps I've provided? Oh wait I wasn't clear enough.... I've edited the answer to clearly show which two layers you need to keep. – Scott Sep 12 '14 at 17:39
  • I totally understood what you meant. But open the "Artwork" smart object and then click Image > Size in "Icon.psb". It's still 1024x1024px. It expects a 1024px image. – user29853 Sep 12 '14 at 17:47
  • Then simply ignore that smart object or delete it and place your artwork as a new layer in that group. – Scott Sep 12 '14 at 17:49
  • Perfect! Adding a new layer instead of using "Artwork" did the trick. Now the image is of original quality and not blurred. Thanks a lot for your help! :) If you like, edit your answer to replace the "Artwork" point with what you wrote in your comment. – user29853 Sep 12 '14 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy