What's new

Remake Appstore icon


Aviorrok

Well-Known Member
Messages
57
Likes
7
Hi,
I'm trying to remake the right Appstore icon, and my icon (the left icon) still looks like beginner how can I improve the icon to looks like the right one?

Screen Shot 2020-07-12 at 11.41.30 PM.png

Thanks!
 

IamSam

Administrator
Staff member
Administrator
Messages
18,038
Likes
11,457
Are you willing to post your PSD file so we can see what's going on?

edit: I made this one real fast just so I would know how to advise.

Click to enlarge.
AppStoreLogo_02.png
 

Aviorrok

Well-Known Member
Messages
57
Likes
7
Are you willing to post your PSD file so we can see what's going on?

edit: I made this one real fast just so I would know how to advise.

Click to enlarge.
View attachment 113744
Sure, here's the PSD.
Can you make your icon more similar (better gradient and reflection like the original) and share your PSD so I can learn for it?
Also the creator of the original icon share the effects on the icon
1594643013331.png
 

Attachments

IamSam

Administrator
Staff member
Administrator
Messages
18,038
Likes
11,457
The only thing I can see is that you borrowed the (A) bars from the original image shown in your post above and you did not include the shadows.
Screen Shot 2020-07-13 at 10.04.08 AM.png
Screen Shot 2020-07-13 at 10.03.06 AM.png

Or.....you borrowed from an entirely different image. Like this one from your layer 6
Screen Shot 2020-07-13 at 10.17.35 AM.png

Either way, they don't look like this!
Screen Shot 2020-07-13 at 10.03.30 AM.png
Without effects
Screen Shot 2020-07-13 at 10.27.14 AM.png

If my last image above is what you desire, then you need to create your own "bars" using the Rounded Rectangle Tool. You cant cutout the bars from another image.

Can you make your icon more similar (better gradient and reflection like the original) and share your PSD so I can learn for it?
There's no need, your version is fine. The only thing I did differently than you was to create my own bars.

Because of the masking effect, I had to "create layers" from the bevel and emboss layer style effects on the third bar in order to get the shadows and highlights separated to make the crossover effect with bar 1.
Screen Shot 2020-07-13 at 10.08.23 AM.png
 

IamSam

Administrator
Staff member
Administrator
Messages
18,038
Likes
11,457
Also the creator of the original icon share the effects on the icon
I could not find where this guy offers any instructions or shares any effects for this icon. Can you provide a link to this tutorial. NOT HIS DRIBBLE PAGE!
You seem to have just borrowed a screenshot in post #3.
 

IamSam

Administrator
Staff member
Administrator
Messages
18,038
Likes
11,457
I don't know how I missed it, but you already have the bars made in group 1!!
Screen Shot 2020-07-13 at 11.06.32 AM.png

All you need to do is to add the layer mask (for the crossover) and the shadows.
 

IamSam

Administrator
Staff member
Administrator
Messages
18,038
Likes
11,457
Another problem that I see is that you have made all your bars blue and lowered the fill to 0%.
Then you made it white using layer style effects.
(Note: I added the layer mask for the crossover)
Screen Shot 2020-07-13 at 11.32.15 AM.png
Why not just make the bars white? Then you can use less layers style effects.
Screen Shot 2020-07-13 at 11.36.58 AM.png

You can also transfer the layers style effects to their own layers (right click the fx icon and hit "create layers").
This is your Group layer 1
Screen Shot 2020-07-13 at 11.39.13 AM.png

All I did was to add a layer mask, turn the bar white instead of blue, remove unnecessary layer style effects, and separate/transfer the layers style effect to their own layers.
Screen Shot 2020-07-13 at 11.40.21 AM.png
 

IamSam

Administrator
Staff member
Administrator
Messages
18,038
Likes
11,457
How do you add the drop shadow you might ask? (It wont work with the layer style effects!!)

Create a new layer below the bars layers.
Make a selection of all the bars.
Screen Shot 2020-07-13 at 11.48.54 AM.png

Fill with black or the dark blue (I used black for this example)
Screen Shot 2020-07-13 at 11.49.23 AM.png

Convert the layer to a smart object.
Add a smart Gaussian blur filter.
Set to 30 or so.
Screen Shot 2020-07-13 at 11.50.49 AM.png

Now you just move the shadow into position with the Move Tool.
Screen Shot 2020-07-13 at 11.51.19 AM.png

Change the blending mode if needed and lower the shadow layers opacity to suit.
Screen Shot 2020-07-13 at 11.51.32 AM.png
 

Top