2

Sorry if this is a really stupid question or something really easy, I'm just a backend developer who has no talent with design.

I'm actually programming a Dynamic Library for jailbroken iOS devices that allows you to create multiple enviroments.

I would like to create an icon like this one apple made for the Siri Kit:

Apple's Siri Kit icon

Or something like the Bootstrap logo: Bootstrap logo I already have the image that would go on the topside of the stack and the color scheme for the icon, just need to know how to create that stack.

Any help would be appreciated. I can use either Sketch or Photoshop to do this.

Thank you for reading.

  • 1
    are you want to create that kind of layer stack via code or you want separate standalone image to use directly? and please provide us if you want to draw it in tools then which tools (illustrator,photoshop,gimp etc) – Mr.Online May 11 at 6:16
  • @DesignPhoenix I just want to create an icon, doesn't matter whether it is via code or it is a separate image, also because with one .psd file I can export to svg (which I suppose that is what you refer by "code") or to a separate .png. I can use Photoshop for that, but do not know how – iAlex11 May 11 at 6:24
  • well if you have photoshop then it's clear then letme edit your question – Mr.Online May 11 at 7:27
  • 1
    Icons and logos are usually created using vector editing software - such as Illustrator, CorelDraw, Affinity Designer, Inkscape (which is free). Photoshop is not ideal for logos and icons because it's raster software. Forget Photoshop, go vector! – Billy Kerr May 11 at 12:10
  • I just said that I could use Photoshop because I didn't think Sketch would be good for doing this type of work. I just have Photoshop or Sketch so I can't use neither Illustrator, CorelDraw nor Affinity Designer, but I'll try to use Inkscape. Thank you so much guys for help – iAlex11 May 11 at 20:58
3

Photoshop is not the right tool to do this kind of jobs because the limitation in shape editing tools, it would be better to use a vector program like Illustrator. Anyway, here is an approach in a 300px x 300px RGB Photoshop document.

Shape

  • Click the Rounded Rectangle Tool and at the top options menu set Shape and 40px corner
  • Hold Shift and make a square.

square

  • Press Cmd + T Mac or Ctrl + T Win to transform and hold Shift to rotate the shape 45º

rotate

  • Press Enter to apply the transformation

    • Press Cmd + T Mac or Ctrl + T Win to transform and hold Alt to scale the shape from the top to the center

second shape

  • This is one of the shapes. Duplicate the layers and change the colors to get the other two. Double click the layer to open the Effects Panel and add the Drop Shadow Effect

Three shapes

Volume

  • Duplicate the main shape layer, fill it with 100% black
  • Click the layer with the right mouse button and choose Rasterize Layer
  • Press Enter + Delete Mac or Win to fill and choose White, 100% mode Behind:

Fill panel

  • Menu FilterBlurMotion Blur

Motion Blur

  • Press Cmd + L Mac or Ctrl + L Win to open the Levels Panel and move the midtones slider to the right

levels

  • Menu SelectColor RangeShadows to get the volume selection
  • Press Cmd + J Mac or Ctrl + J Win to create a Layer Via Copy

enter image description here

  • Double click the Volume Layer to add a Color Overlay, Overlay blending mode and a Gradient Overlay from dark grey to light grey

Color & gradient

  • Duplicate the Volume Layer and press Cmd Mac or Ctrl Win while clicking the Volume thumbnail to load the transparency selection and click the Mask Icon
  • Double click the layer to change the Color Overlay
  • Unlink the mask clicking the chain icon and press Shift + to move up the content
  • Put the Original Shape Layer on top

Volume

  • thank you so much for this. One last question: can I use sketch for this? – iAlex11 May 11 at 20:55
  • I'm not a Sketch user, but since it's a vector program, I guess it will be better than Photoshop to design icons. – Danielillo May 11 at 21:00
  • ok, perfect. Also, and now I promise it is the last question of all. Can you please send me the .psd file for the last icon? I managed to do the bootstrap one, but Im having quite few problems with the apple one. – iAlex11 May 11 at 21:29
  • can you please send me the .psd file of the volume icon (the last one). I can't manage to do this one. Thank you so much for your help – iAlex11 May 12 at 7:10
  • 2
    @iAlex11: Please note that we do not like to do your work for free here; we prefer you to teach you how to do it. Therefore, please refrain from asking users for files that allow you to bypass your problem. – Wrzlprmft May 12 at 9:03
0

Since you stated that you could use either Photoshop or Sketch, I wanted to mimic @Danielillo's answer but using Sketch this time.

Disclaimer: The result is far from perfect, I'll just explain the different steps I've taken to almost recreate the Bootstrap logo.

1. Shape

First, we'll insert a rounder corner rectangle into our blank Sketch page using Insert → Shape → Rounded. Tip: holding alt forces your rectangle to actually be a square.

enter image description here

We can then remove the border of the freshly created square on the right panel (uncheck the border checkbox) and add accentuate the rounded corners on the same panel (I set it to 35 but that was a total guess). We're also going to rotate the rectangle using the same panel (go with 45°)

enter image description here

While our rectangle is still selected, we can select the transform menu Layer → Transform → Transform and manipulate our shape to reflect the skewed Bootstrap logo. Here I have to admit that I just use the logo you provided (dragged and dropped into the Sketch file) as an overlay to reflect its shape. I change the color and the opacity to the new rectangle to make the task easier. There might be a more robust way to do that and if someone has a tip I'd gladly hear it.

Tip: don't forget to specify the order of the elements in the Sketch file using the left panel (just drag and drop the shapes, the Bootstrap logo (png) should be at the end of the list).

The new rectangle (in orange) and the Bootstrap logo (png) are superimposed

2. Stack

In the next step we are going to duplicate (cmd + D) the rectangle two times and position those two new rectangles thanks to the PNG that currently lives under our vectorial drawing.

enter image description here

3. Colors and shadows

The gradient used in the Bootstrap logo will be replicated thanks to the eyedropper tool. Select the top rectangle and change the color to a linear gradient. The two colors used for the gradient can be selected by clicking the left and right dots in the slider below the gradient type option (see picture).

enter image description here

We are going to click the slider's left dot (the starting color of the gradient) and click the eyedropper to select the top color of the Bootstrap logo's first layer. The same steps are applied to the ending color of the gradient with the corresponding color. We need to play a little bit the gradient colors and apply those to the three rectangles of our stack.

We can also add a shadow (gray shadow, opacity at 50%) and position it a little bit under every rectangle (y=6, again, a complete guess).

Here are the settings for the almost finished stack:

enter image description here

4. B letter

Last step, the B letter. Simply insert a text (Insert → Text) and add a capital B with the Verdana font and the Regular font weight (font-size will depend on the size of the previously created shapes).

We then convert the letter to outlines (the text layer will be converted to a vector shape) using Layer → Convert to Outlines so we can transform it and give it the skewed styled from the Bootstrap logo.

Use the steps described in first section of this post to Transform the newly created converted text and place it in the middle of the top rectangle.

And here we are:

enter image description here

It's far from perfect (colors aren't accurate, shapes are not the exact same ones and the letter is not perfectly skewed but... it's a start I guess).

  • thanks, this can also help me a lot! I'd upvote you but I cant as I do not have enough reputation. – iAlex11 May 21 at 6:07
  • Glad I can help! :) – Clafou May 21 at 8:58

Your Answer

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

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