In this project I will have to display a knowledge and skills in various digital techniques, one of those will be illustrator for the App Icon. I decided to watch a YouTube tutorial on how to shade using the mesh tool as this is an area I need to know and be able to do to create a high-quality app icon.
This is my experiment in using the mesh tool and shading a sphere. To use the mesh tool you have to create a filled shape of any colour. I then had to use the black arrow selection tool to click on the object and then in pressing U on the keypad and selecting okay for a 4×4 guide. This curves to the shape of the object and allows you to click on intersection points and create a gradient shade or hue on the flat vector. I played around with creating highlights and shadows to make the sphere feel round. In my research into app icons, I noticed that the higher quality looking app icons used shading and highlights within the imagery, this gave the impression that the company have spent more time, effort and money into making the app which would then lead to consumers feeling it be a more worthwhile download. The use of shading also makes imagery stand out as it becomes more three dimensional over a flat symbol.
While creating this experimental study I found that getting to terms with illustrator and its functions are rather different to photoshop and take time adjusting from the two programmes. As well as finding the general controls difficult to use I found using the mesh tool and creating shading rather annoying as elements weren’t going the way I wanted them to go; take for example in the second screenshot – in the shading it appears rather bumpy than a smooth gradually fade, this I felt to be a failure within the experiment. I am currently still experimenting with the mesh tool to overcome this failure so when it comes to my illustration for the app icon I won’t have to figure out and potentially waste time figuring out how to create the perfect shade.
I then watched another YouTube tutorial on how to shade more complex objects which have multiple areas of shading. This is important to what I am creating as I will need to know how to create realistic looking fruit, and vegetables within this brief and within the app icon.
I first began by creating the outlines of my photography of a french cooking pan by using the oval shape tool. I started off with an oval which I then added anchor points to so I could change the path shape to fit in with where the pan bends. I decided that I needed to cut the shape in half using the scissor tool so I could create a perfectly symmetrical outline. I decided to use the oval shape tool as I felt that when it comes to colour and adding highlights and shades having the object as one shape will be easier to work with rather than having various objects of colours together from the pen tool. I am producing the illustration for the app icon on illustrator as it will allow me to create a high-quality app icon which could be used in the real world, as illustrator works in vectors which mean when enlarged imagery and line work won’t become pixelated.
Currently creating a symmetrical image is working successfully, this is due to me cutting the shapes in half and using the transform mirror tool to flip it vertically. Doing this will allow my illustration to look a lot more professional. At this stage, I don’t feel as I am experiencing any failures, though one area which I am finding it annoying is that I have to do a lot of steps to create a perfectly symmetrical image, which is rather time-consuming. I’ve decided to overcome this issue I will change the image I am working from as I feel that in the process of this app icon, that it will hold me back and my quality of illustration won’t be as successful as it could be with a different image. I think that this has been an important practical, and creative decision and will lead me to have a higher-quality illustration.
So far I have been using my research into app icons BBQ Recipes – FutureBrains and Vegetarian Recipes Riafy Technologies for line work style, and composition. For the illustration, I was basing the subject matter and the composition style from BBQ Recipes as I felt that the use of an open fire bbq worked well for the first impression. My research into Vegetarian Recipes was influencing how I was going to use line work within my app icon. I decided that from all my app icon research that these two together wouldn’t influence me enough to create the best quality app icon I could deliver as both of their app icons are rather simplistic. I am going to aim to be more influenced by the use of texture within The Curry Guy – Indian Recipes Resort Marketing’s app icon and detail within Veggie Weekend – Healthy Vegan Vegetarian Recipes Filibaba AB app icon. These two app icons will guide me and give me ideas on how to composite my own app icon.
At this moment in time, this current illustration doesn’t fulfil the brief due to it not being a full illustration. As well as this it also doesn’t look and feel crazy enough, which is an aspect I need to make sure I fulfil to create a high-quality, successful app icon illustration.
I produced this illustration by using the circle shape tool on illustrator. I create an orange sphere to be the base of my illustration which I then began to shade and highlight using the gradient mesh tool. Using this tool I was able to add various shades of oranges and reds to one side of the sphere to create dimension. I used the mesh and anchor points to place the different colours and used the additional mesh and anchor points which were based on the mesh and anchor lines to change the direction and gradient of the colours. I am using illustrator to create this illustration as it is the most suitable software to create a realistic, three-dimensional vector image which can be used and applied to my app icon. The use of the gradient mesh tool was to be able to create dimension within my illustration. This tool isn’t available within Photoshop, so using illustrator means the process of shading and highlighting is easier.
I think that so far my understanding of how shadows work to create dimension is working successful, and knowing where something feels out of place and incorrect in terms of shadow is also successful. At the moment I don’t feel that I have experienced any failures within this current illustration, as I am only putting to practice what I have taught myself, and experimented with.
I feel that my practical and creative decision to change the angle of my subject matter was a good choice, as I feel more confident that I can produce a high-quality illustration which will meet the brief.
I am using the colour orange for my pan as this colour not only is iconic with cooking utensils but also evokes emotions of excitement which can be affiliated with ‘craziness’ which is what I need to convey within all of my illustrations. I am also using the terracotta orange as I visually like working with this colour and feel it will be a good colour to incorporate throughout this brief to create a brand identity.
My research into The Curry Guy – Indian Recipes Resort Marketing’s app icon has influenced the use of creating dimension within simple shapes, take for example the two black circles which have been carefully positioned together to create this effect that the pan lid is curving out and down, through the use of highlights. I am taking this and using it in effect the opposite where I want to create the effect that the pan lid is curving around the sides and not in the middle. I will take into consideration how he has used a central composition within the pan illustration, and added layers of shapes above one another to create dimension. My research into WHY NOT JAMES’ Death of A Scenester Magazine Illustration has influenced my use of bold colour, as I feel this was a successful element within his digital magazine illustration. The use of bold colour makes imagery and objects stand out – which is exactly what you want to make an app icon look like as it will be placed against hundreds and thousands of other apps which are rather similar, so a bold but interesting colour palette is essential.
In Natalya Zahn’s Assorted food and recipe illustrations for online and print publishing, she has used texture to create added interest within her illustrations, the use of texture also conveys a sense of an atmosphere which I aim to do within my app icon illustration. I want to take this influence into my own illustration as I don’t want my app icon to feel manufactured which I’ve noticed in my research that a lack of texture and interest can have this effective.
At this point I think that the quality of my illustration is rather good, it can be improved though. I think the quality is good due to the processes and software I am using, as illustrator is allowing me to create precise gradients, this though could be where I am lacking quality due to it being rather mathematical over what I would perceive as common sense, as the gradients are rather bumpy as they are going through each of the mesh points and lines. To improve this quality I would need to add a larger gradient mesh tool which has a lot more lines going through, this way giving me more control and accuracy in where I want my gradients to sit.
I produced this illustration on illustrator. I used the colour picker tool to collect the highlight colour within my photograph, this I then made the stroke and fill with my circle, created using the oval shape tool. I did this so I could create the bumps within the pan lid. I positioned the light orange shade in the centre of the original circle, I began repeating this process using command-c and command-v on the Mac keypad, every-time I began decreasing the size by at the most 20%. I then made a black a circle which fit in the centre of the shape to represent the handle of the lid. Within the second to middle light orange circle, I added anchor points on the curve so I could use the white arrow tool to pull that section away, this allowed me to create interest within the design as I have only done this to one area. When they next orange sphere was added on top it meant that the end of the circle outline was smooth. I am using illustrator and the shape tools, with the addition of using the anchor points as I want to create an illustration made out of vectors and illustrator allows me to do this, using the shape tool meant I could create perfectly symmetrical and even images.
Currently, I am finding the use of anchor points and the pen tool rather tricky to use as in cases it is not moving the points and lines in a way that I want it to do. I am overcoming this issue by just practising and watching tutorials on how other people use the tool, I am finding this to be helpful and is improving my skills within illustrator.
At this point, I feel that my illustration is of a good quality, as the highlights and the shadows work well in the shape, and create a stylised illustration that feels believable. The quality could still be improved by adding more details into the pan.
To create the added details within the pan illustration I repeated the overlay process of small circle shapes in different shades within the pan lid. On the sides of the pan I used the oval shape tool, with a non-fill shade, and made the stroke 6 to give me a thick outline, I create one oval shape, which I then cut using the scissors tool. Using this tool it allowed me to cut the oval outline into equal parts. I used the transform reflect tool to have the panhandles facing the correct way onto the pan lid. I have also added a dark orange ring around the bottom of the pan, this is to help enhance the dimensions created with the shadows.
The use of the gradient mesh tool is working successfully in allowing me to create an illustration that has depth and dimension. Also, my use of the shape tool in creating a symmetrical and balanced illustration is working successfully.
Practically I have decided that using the circle based pan imagery was an important decision as it has worked well with the tools illustrator provides and will allow me to create a visually interesting and high-quality app icon.
Currently, this illustration doesn’t fulfil the brief due to it not coming across as crazy, this will be improved with the addition of a background, and more illustrations being added around the pan.
To create the wooden chopping board which will make the background of my app icon illustration I have used my own high-quality photography of wood, which I took into illustrator and used the image trace tool and the 16 colours preset which turned it into a vector image. I then also used the rectangle shape tool, to create a brown square which I overlayed onto the image traced wood. I put the colour overlay onto a multiply layer effect. This meant the shapes and tones within the image traced wood would come through the colour. I used the image trace tool to vectorize the wood photograph as in app icon illustrations they work with vectors as these can be used as any size and not become pixelated. Throughout this project, I will use illustrator to create vector images and shapes.
Image tracing the wood photograph has been successful, because not only does it suit the illustration and its function but also adds interest, and more visually appealing elements, as texture, has been created.
I decided to use a colour overlay as I felt that the natural browns from the photograph were too light, and wouldn’t contrast from the orange of the pans. I have used a dark, red-brown to also feel natural to the pan and the illustration. This I may change as it doesn’t convey the emotions around ‘crazy’ which means it doesn’t fulfil the brief. To make it fulfil the brief I would use more vibrant colours such as a purple overlay.
I choose a central composition as within my app icon research they all use a central composition, as this draws attention to the focal point. The composition also looks visually balanced. This is another element I may change and experiment with near the end of completing the illustration, due to seeing how the other elements work together and if it evokes an atmosphere of craziness.
Looking at the app icon ‘The Curry Guy – Indian Recipes Resort Marketing’ they have used a wood texture within their background of their illustration. This makes it feel and look of higher quality which I believe helps promote the app and make it more desirable. Within their app icon illustration, it looks as if they have also used the image trace tool to allow there to be high details within the app. This influenced my choice in using the 16 colours preset.
I aim to use influences from the app icon ‘Veggie Weekend – Healthy Vegan Vegetarian Recipes Filibaba AB’ as they have created a high-quality illustration of a lemon. I want to use illustrations of different food within my app icon as I feel this will help with the composition but also help fulfil the brief.
The quality of my illustration at this point is of high quality, due to the software and tools used. Also the different elements such as the wood vector within the background. Using this has meant that the stylised pan illustration is enhanced in its quality. To improve this illustration I need to look at making the colours pop against each other. This will be done by changing the colour of the wood and adding illustrations of vibrant food.
Currently, this illustration fulfils the brief in the area that it has to be suitable for an app icon, but I am still lacking in creating the idea that it is crazy. I will improve on this by adding more elements and adjusting colours.
I found a picture of an open chilli online as I wasn’t able to take my own photograph of a chilli, I am using this photograph purely to draw from and use the colour picker tool to collect the colours I need to create my chilli illustration.
To create my chilli illustration I began with the oval shape tool to create an oval around the chilli. I then added various anchor points around the oval so I could use the white arrow tool to move the around the outline of the chilli. I then used the scissor tool to cut the access lines. I then converted the lines into a shape, which meant I can use the shape fill function to give it an orange fill and a red outline. I then began using the paintbrush tool to draw in the details of the chilli. I decided to do this as I wanted to give myself a block colour shape to build up the depth within the chilli.
I managed to move the lines in shape with the chilli by using the anchor points and manipulating their angles and curves, this has worked successfully in creating a block shape. What hasn’t worked as successfully is how the chilli is coming along, the details within the chilli feel too precise which isn’t allowing me to create an atmosphere of crazy. To overcome this I have decided that I am going to restart the chilli drawing by using the paintbrush tool to draw expressive lines.
Julie Notarianni’s magazine spread illustration will influence my chilli drawing style as she has managed to create a vibrant, exciting illustration of chills through her use of line work and colour.
I produced this illustration of a chilli by using a combination of the colour picker tool and the paintbrush tool to draw in the details of the chilli. I used the paintbrush tool as I wanted to make the illustration contrast in style from everything else within the app icon. The use of the paintbrush tool also allowed me to create an expressive illustration which conveys the atmosphere of crazy meaning it begins to fulfil the brief.
The style of line work has worked successfully while producing this illustration. What perhaps hasn’t worked is being able to create an illustration that is realistic in terms of using shadows to create depth. To overcome this I will add shadows to the background on the wooden image trace, this way making the illustration have depth and dimension.
Currently, the colours I have been using are true to the objects, this is because I want to create an app icon that draws people in, and not repulse them which could happen if I were to change the colours of food as certain colours will evoke negative associations such as blues and purples within the food.
At this point, I feel that the quality of my illustration is good and is working well with the other elements. I think this due to the software I am using and the effort I am putting into creating the illustrations. To improve the quality of this illustration I need to focus on creating more shadows within the work to create three dimensionalities.
Deciding how to compose my app icon is a task which I have found rather struggling as all the illustrations for app icons I have looked at have used a central composition, which visually looks good but for me to fulfil the brief I need to think of an out of the box composition which evokes the idea of crazy.To do this I decided to put my pan illustration in the top left corner. I then moved around the chilli to figure out if it works better on top of the pan lid, or beside the lid. I decided that having the chilli illustration coming off the app icon is the best way forward, as it makes the illustration feel as if it’s a snapshot of a moment in time. I also decided to duplicate the chilli illustration and reflect it to create two halves of the chilli. I have also changed the colour of the wood background by going into edit, and then edit colours and then changed the brown to a purple shade into the colour balance function. I did this as the purple would contrast, but also compliment the reds and oranges within the illustration but also begin to create the idea of craziness. I used the colour balance function as it was the most suitable and the easiest way to preview how my wood background would look in different shades before finalising my colour choice. This was an important creative decision that I have made so far as it has improved the quality of my illustration tremendously.
To do this I decided to put my pan illustration in the top left corner, I did this becuase in my research the more expressive illustrations that felt more exciting used a messier composition, with elements not fully aligning to each other. I will carry this on with how I include the food illustrations further.
I then moved around the chilli to figure out if it works better on top of the pan lid, or beside the lid. I decided that having the chilli illustration coming off the app icon is the best way forward, as it makes the illustration feel as if it’s a snapshot of a moment in time. I also decided to duplicate the chilli illustration and reflect it to create two halves of the chilli. I have also changed the colour of the wood background by going into edit, and then edit colours and then changed the brown to a purple shade into the colour balance function. I did this as the purple would contrast, but also compliment the reds and oranges within the illustration but also begin to create the idea of craziness. I used the colour balance function as it was the most suitable and the easiest way to preview how my wood background would look in different shades before finalising my colour choice. This was an important creative decision that I have made so far as it has improved the quality of my illustration tremendously.
the Ifbags.it illustrations on the home screen has influenced my ideas about composition within the production of this illustration. They have used illustrations surrounding the main focus point. I took the idea of having secondary elements around the focus point to create an interesting design. I will carry on using this influence further into my illustration.
The illustrations within my app icon are of high-quality. This is down to the effort I have put in, in learning how to use illustrator and it’s tools and how I have applied them to create realistic but also visually appealing illustrations. To improve the quality of this illustration I will add more elements which incorporate dimension, this to fit in with the pan illustration, but to also help enhance the sense that the app icon is a real situation.
Currently, the app icon illustration would fulfil the brief as it would function as an app icon, is of high-quality and is beginning to incorporate the idea of craziness. To help improve the illustration to make it fully fulfil the brief I will add more elements of food, which are vibrant in contrasting colours, like greens. The addition of more colour will in theory help make the illustration evoke a crazy atmosphere.
I found a photograph online which represents a messy food scene, so the imagery I used in my illustrations fit in well with my current app icon. I am going to use this photograph to draw my illustrations from. I wasn’t able to take a photograph like this as when the idea of including ingredients like avocados and limes came to me, I wasn’t in a position to be able to create the scene for the photograph.
To create my avocado half I took the same steps that I used to create the base of my original chilli illustration, by using the shape tool and then anchor points to move lines around to fit the photograph. I then used the gradient mesh tool to create the dark areas within the avocado half. To make the oval indent within the avocado I had to pay close attention to how I shade it as I don’t want to make the dimensions be standing out of the avocado. I found this rather tricky but managed to figure out how to create this effect with a lot of effort and patience being put in. I used layer styles with overlays to adjust the colours within my avocado. To finalise the avocado illustration I copied the original shape of the avocado and used the shape fill and outline colour picker tool to change it to one shade of brown.
I decided to go for a gradual gradient effect within this illustration as I wanted it to compliment the pan illustration, but also felt it was a suitable process in creating a semi-realistic illustration. I think this worked successfully and put into my app icon will help elevate its quality.
Looking at Jing Zhang Recipe (5 classic dishes) illustration of high-quality shading to create realistic illustrations influenced the production of the avocado illustration. I decided to go for a realistic style illustration over the expressive style within my chilli illustration as the differences in textures and styles in my app icon will look visually interesting. Jing Zhang has also used different textures within their illustration, which I felt worked extremely successfully.
Currently, my illustration’s quality is good with elements looking realistic, like photographs, from an app icon size. on a large scale my illustrations aren’t of as high quality but in this case, this isn’t an area I am worried about as this illustration is an app and not something like a billboard where the quality can be easily picked up on a judged. I can still improve the quality of my illustration by when I select the gradient mesh tool function making the number of grids and cross points high will give me more control over how the colours blend into each other.
I have created the avocado seed by using the oval shape tool and creating a small oval shape which I then used the gradient mesh tool to add highlights and shadows. The seed didn’t need much work to create as it is a simple part of the illustration. I am now focusing in on how to compose my illustration. I am finding the use of having the food illustrations coming off the app icon rather successful and will carry on using this composition. Currently, the illustration feels as if it’s lacking another element so I will do one more illustration which helps convey the ideas of crazy cooking, this will be done through colour and line work.
I decided to use the limes from the photograph to draw. I used the paintbrush tool and create expressive illustrations of the lime segments. They used various shades and vibrancy of greens and yellows this helping contrast from the purples and oranges within my illustration. The style of the limes as well helps evoke the idea of crazy cooking. I used the paintbrush tool to create the illustration as it is the most suitable tool to create the line work I needed.
The style of the limes and the chillis are working successfully together, within my illustration but also to contrast from the clean edge illustration of the pan and avocados. I decided that a difference in styles will help make my illustration more successful, and allow it to fulfil the brief successfully.
The only issue I am facing in this illustration currently is how to compose the elements together, in a way that looks good, is visually interesting and fulfils the brief. I am overcoming these issues by seeing how the illustration looks in various compositions.
The colours I have used within my illustration are working successfully in evoking craziness. This is due to the use of various colour combinations of; bold and bright, clashing colours, and colours that compliment each other.
I have created all the illustrations I need to compose my app icon. I have duplicated the illustrations so I can create this random assortment of food. I then manipulated the colour balance within some of my illustrations to make them either more vibrant or hue a different tone. This was done to make the illustrations not feel like copies of each other. I also resized some of the illustrations using the shift tool on the keypad to keep their proportions.
I am going to separate some of the illustrations from each other and put them around the pan lid illustration. This has been done to randomise the layout of the app icon and allowing me to evoke this crazy atmosphere.
I also changed the opacity of the purple overlay to have areas of the wood come through more, this was done to make more interest within the app icon. But to also add depth, as the areas which aren’t as purple come across as shadows.
The quality of my illustration is extremely successful. This has been created through the effort I have put into my illustrations to make them as visually appealing as possible, but to also compliment each other.
This illustration fulfils the brief as it works as an app icon, uses only illustartor meaning the quality is good, and evokes craziness.