App Icon

Before I could start developing my cooking app, I first had to find out how to make the background for the app. I wanted the app to look professional and if the background was just a plain colour like white or black, it would not look very professional or appealing and I want the app to stand out from all the others and so i have to make the background look really good.

YouTube Video

Because I did not know how to make an app background, I searched YouTube for a video tutorial that could show me how to make an app in illustrator when I came across this video above. I found that the video was simple and I understood everything that the man said and so I thought that this would be a great tutorial for me. I also like the way the app looks in the video, it is very bright and exciting and would appeal to a lot of people as well as grab their attention. I decided to use illustrator instead of Photoshop because illustrator is designed to create illustrations, Photoshop is pixel based and so if I create a logo with it, the logo can not be enlarged or manipulated in the same way that an illustrator based logo can and so this would be the perfect software to use.

Screen Shot 2017-04-26 at 12.04.52.png

The first thing that I did was open up illustrator, where a plank canvas was shown.

Screen Shot 2017-04-26 at 12.04.16.png

I then clicked on the word “file” located at the top, then the word “new” and this window came up. This window is to allow me to create a new document. In the video it said that the page that I will be designing the app on should be 5 inches wide and 5 inches high, this is because most apps are squares and so my app should also be a square. I also changed the name of the new document to “App Icon” so that I would be able to find it after I have closed the window or I would have to stat all over again if I can’t find it. After I was done selecting the size of the page that I will be working on, I then clicked on the word “ok”.

Screen Shot 2017-04-26 at 12.04.29.png

After I had clicked on the word “OK” this page came up. This will be the page that I will be working on creating my logo.

Screen Shot 2017-04-26 at 12.05.23.png

The video then said that I should create a square in the centre of the page and so I went to the rectangle tool located at the left hand side, I then held down the “shift” key, this is so that the rectangle remains a square when I draw it because it would be hard making a perfect square by eye.

The video then said that the square needs to be black and so I changed the fill at the bottom left of the screen to black so that I have some colour inside that I can work with. I also changed the stroke to have no colour inside of it, this is because I do not want the app to have any outlines because most of the professional looking apps that I have looked at for my research do not have any outlines either and so if I don’t add any outlines then my app will also look professional.

Screen Shot 2017-04-26 at 12.05.50.png

This is what the square looked like after I had changed the fill and stroke.

Screen Shot 2017-04-26 at 12.06.39.png

The next thing that the video told me to do was made the edges of the square more rounded, which is also the same thing that professional looking apps do, to make the app look more interesting than just having a normal square. To do this I first went to the word “effect” that is located at the top of the screen. I then went now to the word “stylize”  and then to “Round Corners”.

Screen Shot 2017-04-26 at 12.07.00.png

After I had clicked on “Round Corners” this window popped up. This window allowed me to round the edges as much as I want, I could make them only a little round or so round to the point that it looks like a circle, there was also a preview, so that I could see what it would look like. The video said that the radius should be 0.5 inches and so I typed in 0.5 in the window, then clicked on the word “Ok”.

Screen Shot 2017-04-26 at 12.07.24.png

The video then said that I need to add a gradient to the black and so I went to the bottom left and clicked on the fill, I then clicked on the gradient button that is located in the middle of the fill and the no fill.

Screen Shot 2017-04-26 at 12.07.29.png

This is what the square looks like after I had appealed the gradient to it. The colour goes from white at the beginning then it slowly changes to the colour black.

Screen Shot 2017-04-26 at 12.07.39.png

The video then told me to change the type from Linear to Radial.

Screen Shot 2017-04-26 at 12.08.39.png

After I had changed the type from linear to Radial, I found that the gradient changed, instead of going from a colour to one side then change in to a different colour when it gets to the other side, all the colour around the edge is black but the closer it gets to the middle the light the colour becomes. When I saw this I was not to sure about, because the black looked very dark and it did not look like the black was blending very well with the white and so I thought that if I placed some colour in the square then there would be very dark areas around the edges.

Screen Shot 2017-04-26 at 12.16.23.png

The video the told me to change the colours of the gradient so that instead of going from black to white it will go from a dark blue to a lighter blue. For this I just clicked on the white colour and this window came up showing the colour palette and I chose the lighter colour blue, I then clicked on the black and chose the darker colour of blue.  I could of had chosen any colours that I wanted but I decided to stick with the blue because I thought that it would make the app standout from more and I think that blue works really well for the background.

Screen Shot 2017-04-26 at 12.16.48.png

This is what the background looks like after I had done everything that the video said, however I did miss out the last part which showed me how to make it look like there is light before the objects in the background, however I thought that this would not be needed and I am going to have a lot of objects in the app and so it might make the app look a bit over crowned. I was worried that the dark blue might turn out too dark and it would look like the colours have not blended well like the black and white however it look like the dark blue and light blue have blended well, which I am very happy about.

Screen Shot 2017-04-26 at 12.38.28.png

The next thing that I had to do was add in the objects. I decide to draw a chopping knife this is because a chopping knife is used to chop up ingredients for cooking and so showing this knife will let people know that the app is a cooking app. I uploaded one of my own photos that I have taken onto illustrator.

Screen Shot 2017-04-26 at 12.38.54.png

I then turned the opacity of the photo down to 49%, this is so that it would be easier to draw around the knife, otherwise it would be hard to see the lines.

Screen Shot 2017-04-26 at 12.39.09.png

I then went to the left hand side of the page and chose the pen tool, this is so that I would be able to draw around the photo and form a shape, that I can add colour to.

Screen Shot 2017-04-26 at 12.40.04.png

After I had selected the pen tool, I clicked on the top part of the knife so that a dot would form, I then moved down the knife and clicked again so that a line would connect the two dots however this time I held down the mouse button so that I would be able to bend the line so that it looks like the line is curving, this is so that the lines to look straight and it looks like the lines bend and curve to fit the shape of the object. There was one problem however the previous colour that I set for the background remained, this made it hard to place the dots.

Screen Shot 2017-04-26 at 12.41.35.png

I managed to get rid of the colour by replacing the fill with no fill so that there will be no colour and so that it would be easier to place the dots.

Screen Shot 2017-04-26 at 12.41.39.png

Here is what the dots and lines look like without the fill, it is a lot easier to see the dots and lines and I can see the image behind a lot more clearly because the colour was covering the image up, which meant I did not know where to place the image next.

Screen Shot 2017-04-26 at 12.53.00.png

Here is what the dots and lines look like after I had worked my way around the knife, the next thing that I had to do was add in for colour to make it look more like a knife.

Screen Shot 2017-04-27 at 14.54.36.png

I decided to add the metal texture by placing another texture on top by using another image, however I did not liked the way that the texture looked because it did not look like a metal texture and so I went online and looked for videos to could show me how to make the texture.

As I was searching for videos I can across this video that shows how to add metal textures to objects, although the video is for Photoshop, as a watched I found that I could still use this video because illustrator has the same features as Photoshop.

20170427_061741.jpg

I decide to try this texture out on an image of of pot first just to see what it would look like. Here is an image of a pot that I have taken a photo of, I have decided to include an image of a pot within the logo design because pots are used for cooking and so this will let people know that the app is for cooking.

Screen Shot 2017-04-27 at 15.04.35.png

To get the shape of the pot I did the same thing that I did with the knife and used the pen tool to draw around it to get the shape of the pot.

Screen Shot 2017-04-27 at 14.59.59.png

I tried the colour out on the handle to see what it would look like. To make this texture all I had to do was use the same gradient tool that I used to make the background, however this time I added more colours, this means that the colours don’t just go from light gray to dark grey, but to light grey then to dark grey and back to light and you can even see on this texture how I made it go from light to dark then light and back to dark. I would say that I really like the way that this texture turned out because it really does look like metal and it looks realistic, I would say that this metal texture would be the most successful feature within the logo design because of how real and professional it looks.

Screen Shot 2017-04-27 at 15.11.46.png

I then proceeded to do the rest of the pot. The best part about the gradient is that it allowed be to save the texture and so after I had used the pen tool all I would need to do is click on the fill, add a fill then go the the gradient section and chose the gradient that I had save and it will change the colour to the metal texture. This was great because it meant that I did not have to start all over again each time to make the medial texture, it also meant that I did not have to waste time.

Screen Shot 2017-04-27 at 15.21.10.png

This is what the pot looks like after it has been placed against the background. I have placed the pot at the bottom of the logo because I want to show ingredients being tossed into the pot, I want to show this because it would link with cooking because it will show ingredients being tossed in to make a meal, which would again show the audience that the app is for cooking.

Screen Shot 2017-04-26 at 12.58.45.png

After I had finished the pot I then decided to move onto the knife and finish adding in the metal textures to it. I had noticed that there were also metal parts on the handle of the knife as well.

Screen Shot 2017-04-26 at 13.01.57.png

And so I decided to use the pen tool to draw shapes around the metal parts so that I can also add metal textures to them as well. I actually found this part quite hard, this is because the circle were really small and it was hard to make a perfect circle and so every time that I had messed up I would have to delete that dot and start again.

Inline image 4

Here is what the knife looks like with the metal texture on the handle.

Inline image 3

I then added the metal texture to the end of the knife, I also had to make the handle texture, for this I used the same texture for the metal texture, but this time I changed it from grey to black so that it matches the colour of the handle.

Inline image 2

After I had finished with the knife I moved onto making a folk. I decided to use an image of a folk within my design because foods are used to eat food and so this will let the viewer know that the app will be about something that they can eat. To make this folk I used the same technique that I did for the knife and used the pen tool to draw around the folk to create the fork shape, I then placed on the metal texture, to show that the folk is metal.

20170427_062131.jpg

Because my logo so far only shows equipment and not any ingredients hat you can eat I decided to add in an image of an onion to help balance this out.

Screen Shot 2017-04-27 at 15.30.20.png

I used the pen tool to draw around the onion to get it’s shape, I then placed a gradient on top of it and changed the colours to match the colours of the onion.

Screen Shot 2017-04-27 at 15.54.07.png

Because the onion has many layers, I had to make many rings inside of the onion to show these layers.

Screen Shot 2017-04-27 at 15.54.32.png

After a while it was getting hard to add in more of those rings because I was running out of space on the gradient bar, as can be seen from the image above.

Screen Shot 2017-04-27 at 15.54.23.png

However after experimenting a little bit I found out that I can make the bar longer and so I could add on more rings to the onion.

Screen Shot 2017-04-27 at 16.02.52.png

 

This is what the final image of the onion looks like. I would say that this illustration is probably one of the most unsuccessful because it is hard to tell what the illustration is meant to be of because it doesn’t really look like an onion. I think that the illustration turn out so bad because the colours needed to be better blended, which was something that I could not do with the gradient tool. I think that it would of had looked better if I had done the drawing in Photoshop first then upload it to illustrator.

Inline image 5

The next ingredient that I decided to add was a tomato, I used the same actions that I did for the onion, only this time I changed the colour to red to match the colour of the tomato. There is something that I didn’t like about the tomato and that was that the top part with the leaf is missing, this is because the tomato that I took the photo of didn’t have the top part. For me this makes it hard to tell what the tomato is meant to be.

http://sciencenordic.com/body-sensor-reacts-chili-and-chilly

I thought that I should add in one more veg to fill up the space and so I got this image of the chilly offline because I could not find any chilies in my fridge that I could take a photo of the. The link of the website where I got the image from is below the image.

Inline image 4

For this image I first used the pen tool to draw around the top part of the chilly.

Inline image 3

I then used the gradient tool to added in the colour to the top part of the chilly, however I changed the colour to green to fit the colour of the chilly.

Inline image 1

I then used the pen tool to draw around the body of the chilly.

Inline image 2

Just like for the top part of the chilly I used the gradient tool to add in some colour to the chilly, I also changed it to the colour red so that it matches the colour of the chilly.

Screen Shot 2017-05-22 at 13.43.40.png

Here is what the final logo looks like. One of the things that the brief said that I had to do was create the app to invoke the theme crazy cooking and so I thought that I would show this theme by making the equipment and ingredients fly from the sky into a pot, this is to give off the feeling of chaos and things being crazy and out of control. Also cutleries are flying into the pot as well, this also shows the theme crazy because the things falling into the pot are meant to be things that you can eat, however you can’t eat metal and so would you have to be crazy to try to eat them.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s