Tips on creating flat vector icon

Hello all,

I have been using photoshop and illustrator for slightly more than a year now. Currently I am moving on to creating modern, flat icons, but I am struggling with applying correct colours, or creating an icon from scratch- I always have to reference from an existing one.

Is there any tips/ pointer you can give to me?

Many thanks

lemme tag the ice cream god, Bubble can you help him? or give him some tutorials or good youtubers? or tips? ^-^'

I'm not the one to guide you but i use https://www.materialui.co/ for colour references, it's a pretty decent site.

Thanks guys, had a look at the material design colour, really good site for material design I must say. I had used it for my web development and the color is bold and striking.

However I can't really apply those colour to flat icon/ similar assets :(

Waiting for Bubble to lighten my path rn.

26-12-2017, 06:42 PM

iamomni Wrote: Thanks guys, had a look at the material design colour, really good site for material design I must say. I had used it for my web development and the color is bold and striking.

However I can't really apply those colour to flat icon/ similar assets :(

Waiting for Bubble to lighten my path rn.

I can't go into depth, but I can give you an overall concept of what I do. I use photoshop. I know I know, illustrator is better for cleaner designs, perfection, etc. But I like using PS, I also have a program that converts my raster into vector effortlessly and clean.

The way I make most of my "flat" designs is the shape tool. I never use path tool. I put different shapes together to form new shapes, I use stroke a lot for "linework". I'm am a lazy piece of shit, in which I made my own technique using purely shapes. Here's some examples using shapes and some form of brush tool for coloring, which is easy af. I also use eraser tool to cut shapes.

As for color, I never studied color theory or anything so you might need to get someone else for that. I just choose what looks good. I like using colors that look "natural". For example, I don't use super saturated bright colors. For example, when noobies want to use red, they choose the max hex for red which is too red. My Monster burger thing is a good example of easy to see colors. However, its up to you and how much you want you design to pop. But keep colors tame.

https://nulledbb.com/thread-Monster-Burger-Logo
https://nulledbb.com/thread-Ice-Cream-Vector
https://nulledbb.com/thread-Toasty-Logo
https://nulledbb.com/thread-Little-Diablo-Logo
https://nulledbb.com/thread-Premium-Noodles-Logo

26-12-2017, 06:42 PM

iamomni Wrote: Thanks guys, had a look at the material design colour, really good site for material design I must say. I had used it for my web development and the color is bold and striking.

However I can't really apply those colour to flat icon/ similar assets :(

Waiting for Bubble to lighten my path rn.

I can't go into depth, but I can give you an overall concept of what I do. I use photoshop. I know I know, illustrator is better for cleaner designs, perfection, etc. But I like using PS, I also have a program that converts my raster into vector effortlessly and clean.

The way I make most of my "flat" designs is the shape tool. I never use path tool. I put different shapes together to form new shapes, I use stroke a lot for "linework". I'm am a lazy piece of shit, in which I made my own technique using purely shapes. Here's some examples using shapes and some form of brush tool for coloring, which is easy af. I also use eraser tool to cut shapes.

As for color, I never studied color theory or anything so you might need to get someone else for that. I just choose what looks good. I like using colors that look "natural". For example, I don't use super saturated bright colors. For example, when noobies want to use red, they choose the max hex for red which is too red. My Monster burger thing is a good example of easy to see colors. However, its up to you and how much you want you design to pop. But keep colors tame.

https://nulledbb.com/thread-Monster-Burger-Logo
https://nulledbb.com/thread-Ice-Cream-Vector
https://nulledbb.com/thread-Toasty-Logo
https://nulledbb.com/thread-Little-Diablo-Logo
https://nulledbb.com/thread-Premium-Noodles-Logo