Jump to content

Creating a Material Design Logo


Recommended Posts

Hi All,

 

I am trying to create a logo for my mobile app using the material design principles found in this article:

 

https://www.google.com/design/spec/style/icons.html#icons-product-icons

 

I come from a programming background and don't have any experience with graphic design. I've only just downloaded paint and have been looking at many tutorials, however I still haven't figured out how to do some of things in the above article. Specifically, I need to know how to do the following for a simple object such as a rectangle:

  • Create a 45 degree lighting effect
  • Create a shaded edge for a specific side
  • Create a tinted edge for a specific side

Are there plugins and tutorials for these specific effects I can read up on? Alternative, is there a material design logo tutorial I can read up on that is specific to paint.net?

 

Any help would be greatly appreciated.

 

Cheers

Jaz

Edited by kornerhouse
Link to comment
Share on other sites

Sorry, I can't help you with the math aspects of things.

But, do you already know how to use layers or how to use the gradient tool? Knowing some paint.net basics will be good. 
If you want some lighting and shading tips and techniques, you might be able to learn some stuff from these tutorials : 
 
Drop Shadow Tutorial
 
Draw in Three Dimensions (This tutorial uses the Alpha Mask Plugin)
 
Making glass buttons

Edited by Cc4FuzzyHuggles
Link to comment
Share on other sites

Thanks for the reply Fuzzy, those links where very useful. 

 

I've got my head around layers and gradients. I'm comfortable with creating a drop shadow and could work out how to create a lighting effect. What I'm struggling with is how to add a tinted and shaded edge to a basic shape. From the link above, in the section labelled 'Edge tint and shade', there are two images: 

 



 

Which show you where the tinted and shaded edges should be. There are also some metrics in the table beneath the images, e.g. Height: 1dp Opacity: 20%, etc. First of all, how do I do this in paint.net? Is this as simple as drawing a line underneath and above the shape? 

 

Secondly, the reference to which colour to use is confusing. The metric for color says 'Refer to Tint, shade and shadow values'. When I look at the colour chart is looks as follows:

 


 

What do the percentages mean? Is the chart basically saying, for example, if I chose a colour of Grey 200 (whatever that means) than the Tinted edge should contain 40% white and shaded edge should contain 10% Grey 900? If so, then again, how do I achieve this in paint.net?

 

Kind Regards

Edited by kornerhouse
Link to comment
Share on other sites

Thanks for the reply Fuzzy, those links where very useful. 

 

I've got my head around layers and gradients. I'm comfortable with creating a drop shadow and could work out how to create a lighting effect. What I'm struggling with is how to add a tinted and shaded edge to a basic shape. From the link above, in the section labelled 'Edge tint and shade', there are two images: 

 

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7T21HZ3M4N3IwTDg/style_logos_product_lighting_edge_tinted.png

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bx4BSt6jniD7d0JqZl9BOUVYcHc/style_logos_product_lighting_edge_shaded.png

 

Which show you where the tinted and shaded edges should be. There are also some metrics in the table beneath the images, e.g. Height: 1dp Opacity: 20%, etc. First of all, how do I do this in paint.net? Is this as simple as drawing a line underneath and above the shape?

 

If all you need is a basic line, then yes, it can be that simple. If you have a shape that paint.net can't match using any of it's tools, then I suggest making a custom line made from the unique shape itself.

There are several ways to do this. Here are two ways...

In the pictures you showed, I think the shapes were perfectly square, but adding the tinted edge looks like it might have added a little bit more height to the shape. If you don't mind adding a few pixels to your shape, then try this:

In the example pictures of that tutorial, they have two stacked shapes. I will speak of the first shape with the rounded corners here, and call it the "Main Shape".

1) Duplicate the main shape. I will call this duplicated layer the Tinted Shape layer.

2) While on the Tinted Shape layer, re-color the shape or change it's light/darkness to whatever you want. (to do this, try using Hue/Saturation or Levels from the Adjustments tab. Just make it a distinguishable color or shade for now. You can always re-color it again later).

3) Move the Tinted Shape layer under the Main Shape Layer.

 

4) While on the Tinted Shape layer, get the Move Tool, select all, and use the arrows on your keyboard to move the tinted shape up. The tinted shape will peek out from behind your shape, giving you a tinted edge for that shape.

 

Like-wise, you can do the same for shading.

I think the above idea is best if you want to create highlights or shading around the edges of your shape, especially for shadowing effects. However, if you want to create tinted edges that match your shape perfectly, and not add a few pixels to the height of your shape, then you might like this work-around:

 

1) Similar to the other method, duplicate the Main Shape. I will call this duplicated layer the Tinted Shape layer. Re-color the shape or change it's light/darkness to whatever you want.

 

2) Duplicate your Main Shape layer again, I will call this layer the Mask layer. Move the Mask layer to the top of your layers window. Make the shape that's on that layer into what I call a Mask by turning the shape solid black. (You can do this using hue/saturation and lowering the lightness slider.).

 

3) (optional, lower the transparency of the Mask layer, so you can see your Tinted Shape.)

Get the move tool, select all, then use the arrows on your keyboard to move the Mask down. The Tinted Shape should start to be revealed from behind the mask. Make the revealed part as thick as you want, as that will be your "tinted line".

 

4) Select all again, copy your Mask, turn your Mask layer off, and then click on the Tinted Shape layer, and run the Alpha Mask Plugin (I gave a link to the plugin in my previous post). Check-mark the "Paste From Clipboard" and "Mix Alpha" settings.

 

You should now have a tinted edge overlaying the edge of your shape.

 

 

As for the stuff about coloring, sorry, I can't help with that.

 

For some extra ideas that might be useful to you while trying to make icons :

You could try some grid maker plugins to help give yourself some guidelines :

GridCheckerboard * GridMaker * BoltBait's Plugin Pack includes a grid maker plugin

Want assistance to re-position your objects so that they are exactly where you want them?

I already mentioned the move tool, but here are more details about it. While using the move tool :MoveTool: or move selected pixels tool :MoveSelectionTool:, you can use the arrow keys on your key board to move items one pixel at a time, or arrows keys + ctrl to move something 10px at a time. This is handy when trying to move things into precise positions.

You can also go up to the menu bar > Layers > RotateZoom, where you can pan an object by entering in numbers.

If you want other ways to help with aligning things, maybe some align object plugins would interest you.

Align Object * Object Align * TR's PseudoSnap

Link to comment
Share on other sites

  • 7 months later...

The colors can be gotten using the color picker tool.  The colors widget (cntrl + shift +f8) allows you to view 'More' which shows the hex and rgb values also.  So, just get a screen capture and paste it in Paint.net and use the color picker.

 

BTW, I created a Material Design Swatch that provides Material Design colors for you. https://rack.pub/swatch or on codepen at http://codepen.io/rhroyston/pen/pbPqbY.

Edited by rhroyston
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...