Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

First, I want to make it very clear that I am a newbie in this graphic designing field and I have no idea of how things are done. I am more a programmer than a designer.

I have been making a Google Chrome extension, but in it, they say that the app icon provided should be:

The actual icon size should be 96x96 (for square icons); an additional 16 pixels per side should be transparent padding, adding up to 128x128 total image size. For details, see Icon size.

What do I do now? What I actually did is:

  1. Create a square icon (initial logo) of size 128x128.

image logo attempt 1

  1. Delete 16 pixels on each side, so that they become transparent.

image logo attempt 2

Did I do it correctly? I mean, the second step. I don't have any idea of whether what I did was right or wrong. I really fear that I have done something wrong that may affect my app rating.

Maybe, did I have to use the Magic Wand tool?

I am using Paint.NET

share|improve this question

1 Answer 1

up vote 1 down vote accepted

If I understand correctly, your actual icon should be 96 by 96 pixels with a transparent padding that adds up to 128 by 128 pixels.

First of all, what you did in the second step was reduce the size of the green background of your logo. I assume you want to keep the full logo without actually reducing its background.

First, open your logo as it is, 128x128 pixels. I downloaded your logo just to show how this will work.

enter image description here

Then, go to the image tab and choose resize, then adjust it to 96x96 pixels, this will resize you logo to the 96x96 pixel size.

enter image description here

enter image description here

At this point, your logo size will be reduced to 96x96 pixels, without reducing the green background color as you can see

enter image description here

now the next step, go to the image tab again but this time choose canvas size. Now you resize the canvas size to 128x128 pixels. make sure you adjust the image icon to the center as shown, this will result in increasing canvas size to 128x128pixels, creating that white padding that is shown in the image.

enter image description here

enter image description here

enter image description here

Now we have that white padding, but that's not what we want right? we want the padding to be transparent. Now choose the magic wand tool from the tool panel on the left. its the one that looks like a black stick.

enter image description here

We are almost done, now select the white padding area with the magic wand tool. this will only select the white area as shown.

enter image description here

After you selected the white padding area, simply press delete on your keyboard and that should the white padding, leaving you with this transparent padding as shown.

enter image description here

You are done! now just save the image as a png file in order to keep the transparent padding. jpegs don't have an alpha value thus can't keep transparencies.

Hope this helps.

share|improve this answer
    
Wow! That's a comprehensive, and well detailed in-depth answer! Thanks a lot :) Also, if you have time, would you please view the Chrome extension and look over its graphical design, I mean, the main promotional video. Specifically, which background (or gradient), font style, font color should I use for that video? Just this help and I promise to trouble no more! Thank you :) –  Gaurang Tandon Jun 28 at 16:23
1  
Hi sorry for the late reply, here are some quick tips for the video -For the background, a white color should be fine. -I think you should just use a regular sans-serif font with the color black. and make the text to alight to the left, that way it will be easier to read. -for the title of your app, PRO KEY, the 'PRO' part would be nice if it was the same size as the box encapsulating the 'KEY' word. -and lastly, I think you should change the background music to a more soothing song to not distract your viewer. maybe you can record yourself explaining the app instead. Hope this helps. –  Warren.W Jun 28 at 18:08
    
Yep, thanks a lot! I will look into this when I finish the current version of the app, thank you! –  Gaurang Tandon Jun 29 at 5:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.