App Icon Development

To create my app icon I will be using Illustrator with guidance from YouTube videos as my skills in Illustrator are less advanced than in Photoshop, this way the videos can guide me where I am lacking knowledge in the software. I found this video by typing in to YouTube “Wood texture illustrator tutorial” as I wanted this to be the background of my app and I did not know how to create this, wood is an ideal background for my app illustration as it does not have too much detail however it is still recognisable from far away.

  1. Wooden Background


To start the wooden background I firstly made a rectangle using the shape tool and made it a light brown colour before creating another brown rectangle, I chose the colour brown as not only was this the colour used in the tutorial but I was afraid if I made it a bright colour then the other items I am going to lay on top of the wooden background may not contrast enough. I then selected the second rectangle and used the ‘sketch’ tool under effects before applying the ‘graphic pen’ effect from the same panel. Before turning this second rectangle a darker brown colour I placed in on top of the first lighter coloured rectangle creating the line effect wood texture has. I then used the warp and twirl to create variety in the texture so that it would seem a but more exciting and realistic instead of being very formal and looking very digital where wood has knots and bends in the grain, so far it does look how I want it to look and is successful however there could be more detail added. After selecting both rectangles I used the pathfinder tool to merge them together. I think the wood texture turned out successful as it looks realistic, the grains in the wood are the same as the grains in a real piece of wood and the knots and twirl parts make the wood seem more natural. The tools used make the wooden background look like an illustration rather than super-realistic which is what I was going for, as the app icon will be very small and it would be harder to notice a lot of detail in an image so small. This background gives a more exciting feel to the piece rather than a plain one and I wanted it to look like the steps someone would have to take to make food and in this they would often use a chopping board, this is similar to the way that in my research the sushi encyclopedia uses a book to represent the use of the app. I think to improve the background I could have added more detail however it would not be too necessary as the icon will be very small and the detail would be hard to see. The wooden idea is influences by my image in the research powerpoint which is the app named sushi encyclopedia.

2. Sushi roll

To create the sushi roll I used the pen tool to create the spiral shape before applying some effect settings to create texture. I applied the effect ‘plastic wrap’ as it adds white areas to the image which is similar to the way sushi looks due to it’s slightly shiny surface and the way that the effect adds white looks like the light bouncing off the sushi. I have used the shape tool to create smaller, individual grains of rice to make it look more fun and interesting, I think this is a success of the sushi roll and I like the way it looks quite simple however the viewer can still tell what it is even if it were very small. I think the edge of the rice where I have included individual grains of rice is also successful in the way that it adds slightly more detail to the illustration rather than just having a flat edge. I think I need to add a few more grains and some shading in areas as it looks quite flat. I have not used any strokes on the shapes as I do not want it to look too cartoon like, and I have just used colour as I think it looks better than having a black stroke around every little detail. I found it quite hard to get the shape I wanted and the swirl to have an even thickness and this is an element I do not like as the width is quite big in some places and smaller in other places, to improve this I would have to learn how to make this shape neater as I would not know how to do it however I could do it in Photoshop. To fit the app icon more towards the brief I feel like it needs to look a bit more ‘crazy’ as it is not too exciting at the moment. By making it more exciting I will be adding various other things such as a fish and some sort of utensil such as chop sticks or a knife and fork however since sushi is an oriental type of food I feel that chopsticks would fit the app theme better.

3. Fish



Using the pen tool and an image from the internet I traced around the image of the fish, my idea was to create the ingredients for the sushi around the plain roll, and the cut up fish would be an exciting way to present the ingredients. I used a colour pink to make it more fun rather than grey and created the shape of the fish head. It was difficult to make the shape perfect as it is not exact to the photo however I think it is still recognisable as a fish and the bright pink helps to make the viewer recognise it as salmon while adding to the crazy theme as fish are not usually bright pink. At the moment I think the app does look like it has something to do with food however it does need more items on the icon to make it look and feel more like it has something to do with cooking and a bit more crazy and I think how the fish is cut up like that shows this element of cooking.

I used the gradient mesh tool to create darker pieces round the outside to make the fish look more 3D, using the gradient mesh tool was tricky to get the hang of and at first I struggled to get the items to look how I wanted by using this tool, however after practising a bit with the tool I got the hang of it and fond it easier to use. I did the same technique for the slice of fish and added lines with the line tool before merging them together. I have been going for a style of drawing similar to the drawing in my research in the app which is about the Warcraft game as I think it works well in the size of the app icon as well as to show detail and still be recognisable but not look like a cartoon. I think using the research I have looked into it has helped me to create the app icon I have which is not too detailed and can function successfully as a crazy cooking app.

4. Chopsticks & Extras

Using the rectangle tool I created a long object to use for chopsticks. I then applied a gradient to make them look more realistic and used the envelope mesh tool to make the object wider on one side and thinner on the other. I then duplicated this to create two chopsticks and placed them next to each other. I had to recolour the chopsticks a few times in order to get a colour which contrasted with the background a lot and would make the icon seem more crazy and interesting to look at. While the app icon will be small the chopsticks are still recognisable as chopsticks and this adds to the oriental theme of sushi making the icon more suited to it’s purpose. As well as this I think more things being in the icon makes it seem slightly more chaotic which in some cases can be bad however it fits this brief due to the ‘crazy’ element.

To finish the design I used the pen tool to create a splat of soy sauce, this was to make the icon seem a bit more ‘crazy’ and fit the brief more. I think the splash of soy sauce makes the piece fit the brief better and is influenced by my research however the quality of the illustration could be better, for example I tried to find an instructional video to create a splash however I struggled to do so. The shape was hard to get right as some of the edges have more of a sharp corner whereas if a liquid were to be spilled it would have more of a round edge and this is one thing I do not like about the icon. Also I should have added some sort of shine to the soy sauce to make it appear a bit more realistic.

My app was influenced by all of my research, for example I have written about the style of the illustration and how this is similar to the Dawn Of Crafting, as well as the style of the Android app but not as good quality. I think the way their illustration looks is very professional and is a very good way to use the book imagery to convey the ‘encyclopedia’ element of the app but it would be hard to achieve this high quality professional look as I am not very proficient in the illustrator software. From the Google Play story app named ‘Tasty Recipes” I have used inspiration from their composition and how they have lots of items on the icon.

Screen Shot 2017-05-20 at 4.47.18 pm

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this:
close-alt close collapse comment ellipsis expand gallery heart lock menu next pinned previous reply search share star