Illustrator - CD Label

Step by Step - Paper Background, Main Image & title

Here are the tools/effects that I will be using when making this media Logo:

• Importing
• Selection Tool
• Layer Panel
• New Layer
• Pen Tool
• Brush Tool
• Colour Guide
• Effect Gallery 
• Transparency

 I started the DVD label design by creating the background and the main image of the disk as well as the title.

Paper Effect Background

I am going to be starting with the background as all of the other parts of the design goes on top. I created the paper effect in advanced in Photoshop ready to be placed in Illustrator. 

I started by opening my DVD label template, in Illustrator by clicking on File > Open and then went through my files till I found my document and opened it.

DVD Template.

I then added the background I created in Photoshop. To do this I imported the image into illustrator. To do this I went to File > Place and then went through the process of finding the image on my computer. Once I found the document I then hovered my mouse over the template and the image will appear next to the mouse. I then clicked on the template the image was placed.

I then re-sized the image so that it fitted onto the template. I did this by making sure the Selection Tool (black arrow Icon) was still selected and selected the image. I then re-sized the image by using the little squares on the edges of the image till it fitted the template.
That is the background sorted and here is the finished result for the background.

Main Image

Now to move on to the main image. This main image will be consisting of an ink image face which I will be creating from the original image as a guide, but creating it with my own twist to fit with the design. 

To start off, I opened the image in Illustrator. I went to File > Open I then went through my computer system and found the image. It then opens in a new tab in Illustrator.

I then had to re-size the art board. To do this I went to Document Setup and clicked Edit Art board. I then re-sized the art board so that it fits the image.
[I re-sized the art board, because if I started to trace around the image only parts of traced shaped would only show. This is because the art board is only on part of the image, even though you can draw on the outside of the art board; it will not be part of the image once I select it and transfer it over into the document.] 

Art board re-sized

I then went to the Layer Panel (this is located on the left hand side tool panel. The icon looks like two little squares one on top of the other). I then created a New Layer (the icon looks like a little post-it note). 

[I added a new layer onto the document because I want to trace the image, meaning that the tracing will not affect the original image. If I did do this over the original image and placed it over later after creating the image, both images will be there. This will make it look unrealistic and really tacky as it would be fairly obvious that I was trying to recreate the image in my own way; as parts of the original image would still be showing. So creating the new layer will allow me to trace the original image, and then recreate it in my own way for my design.]

The new layer will act like a piece of tracing paper, which I will use to trace over the original image I just opened. To do this I used the Pen Tool (the pen icon looks like a pen nip which is located at the right hand side tool panel). I then changed the colour of the fill too black.

[I used the pen tool over tools such as the brush tool because it is more precise and accurate than the brush tool. This is because when using the brush tool I can carefully be drawing round the edges and then you can go off track. This is due to either needing to move the mouse up so I can drag it down again; or even someone can knock you and frighten you and it will go everywhere. Also if I made a mistake with the paint brush and one part of the brush stroke is good and the other part is bad, but  if I did it all in one stroke and you try to undo it; the whole stroke will go even the best part. But then even doing it with little strokes will take a long time and will take a lot of concentration and effort. As well once I have made the outlines, it might be difficult filling the shape in, especially with the paint bucket tool, because it just might automatically fill in the whole art board rather than shape I just drew out. But then again using the brush tool will take forever to fill the inside of the shape.
Whereas with the pen tool, it was a lot simpler and it got the job done quicker and really effectively. This is because when using the pen tool I used a technique which really helped. This technique was just clicking around the image and made anchor points around the image. This made life easier when it came to drawing around the edges, as unlike the paint brush as I was able to click at certain points of the edging without having to concentrate all much. Also if I was to make a mistake then I can easily undo it to the last anchor point I made and just re-click, without having to remove lots of information and parts of the design just to make it perfect. Also I will not have to use the pen tool to fill it in, this is because I can choose a fill colour and it will automatically do it whilst I will be drawing around the shape.] 

I then started to use the Pen to start tracing around the hair. I started at the top and started to click at different points around the outline of the image, these are known as anchors. 
[The pen tool can be used for either straight lines or to draw curves. In this case I used the straight line part of the tool, as I mentioned in the previous justification, I just clicked on parts around the image creating paths and anchor points. I used the straight lines over the curves because I found that I was not very good at using the pen tool to create the curve paths. This would mean that if I did use the curves it would not look right as it would have been really bumpy and out of shape and other parts of the outline would not meet with others. So this would have been a great waste of my time, but also it would not have been appropriate especially for the steps I am going to be taking later for the image.] 

Starting to use the Pen Tool to trace around the hair

I carried on doing this till I was finished outlining the hair and the last anchor met with the first one. Here is how it will look. 

Hair Line traced with the Pen Tool

Making sure that when I finished tracing around the hair line I deselected the drawn shape. I then started to trace the finer details such as the eyes nose and mouth. To do this I zoomed in by holding down the Alt and scrolling up with the mouse, re-positioned the screen and again used the Pen Tool  and clicked around the eye. 

[I still used the pen tool for the little details as well. This is because as I mentioned above the paint brush would have made it a lot more difficult, even when re-sizing the brush and zooming in. This is because it is such tiny detail it would still be the same situation as tracing over the hair outline. It would be trying to concentrate and the lining go everywhere and then filling in the shape etc]

Making sure that when I have finished with that section that I have deselected the previous section. Once I have finished tracing I then went into the Layers Panel and hid the original image (to do this I clicked on the eye icon).

Here is the finished results for the tracing.

All of the image traced with the Pen Tool

Now I have finished with the tracing, I will now make the design my own and add the ink splattered effect to the image. I did this with the Brush Tool, as it has allowed me to create some interesting effects to the image, which worked with the theme but also what I wanted for the image in general.

First of all I selected the Brush Tool and then went to the brush definition tool at the top of the art board and clicked. I then clicked on Brush Library Menu on the bottom right corner of the brush menu (the icon looks like library books) I then went to Artistic > ChalkCharcoalPencil. This the opened a menu of different paint brushes, I selected the third on down to use.
[I used the brush tool this time to go round the edges. I used the brush tool over the pen tool this time; mainly because this part was not about precision as I wanted to create a smoother edging than just lines. I could have used the pen tool and created some curves for the edging, but as mentioned above I do not have the skills or patience to so this. But also the brush tool gives it that sort of artistic feel made it really authentic and real life like; which was why this time it did not matter if it went a little out and everywhere.

As well as that I don't think that the pen tool could use the different kinds of stroke effects like the brush could. I used the ChalkCharcoalPencil brush because it looked the most effective on my design. There is another brush quite similar to the one that I have picked, it did look really good, however, I did feel that is a little too messy. as I do want it to look a little neat. I have no idea why! considering the idea was to make it my own.]

After selecting the brush I then began to draw around the hair outline to give it a bit of rough edge, to make it look like it was done with a damaged brush.

Here is the result.

The hair line drawn over with the Brush Tool

I then selected the Selection Tool and selected the traced part of the image. I then changed the colour of this part.

[I did this because for some reason the colour of the paint brush strokes did not match the colour of the pen tool trace even thought the colour was still selected as black. The brush strokes came out a grey colour, which did not look right with the black. Which is why I have decided to change the colour of the pen trace so that it blends and looks like the same colour as it looks really tacky.]

I tried different colours, however I did find one that really worked and blended really well. I found the colour in the Colour Guide (this is on the left hand side tool pannel, the icon looks like quarter of a circle with different shades of grey). I then went to the colour by library and selected the neutral colour pallet, I then selected a brown-black.

The colour I have chosen in the Colour Guide for the hair colour.

Here is the result.

Here is the final result for the traced part of the image.

I now add some ink splatters to the image. To do this I used the Brush Tool again. I went through same procedure as the previous time I used the brush, except I choose Ink Brush Set instead. I then selected the ink brush four rows down. I then used the brush and drew a line a few millimeters away from the edge of the image and drew outwards. This then created ink splashed which was what I wanted. I then did this for all around the image till I was happy. 

[I added ink splatters to the design because it was part of the original design of the DVD inlay. As I mentioned before in a previous post that film companies tend to use the same themes and effects from their DVD covers to their DVD labels. As well as this, I thought that the design worked really well on the front cover it would also look really effective on the DVD label as well. This is because I am trying to recreate the same concept I used on the front cover of the inlay, but try to make the image on the label look more like an actual ink drawing. 
I used the paint brush tool for this part of the design, due to the fact that if it tried to recreate the splatters that was on the original it would take forever to trace around the shapes with the pen tool. Just to then draw round them with the paint brush tool. Where as I found when exploring the brush packs that Illustrator already had on the program. So I used this because it really worked, but also it made the image I had look like my own, which is what I wanted. If I did as mentioned above and traced around the original splodges then it would no longer be my own.]
Here is the result.

The main image finished with ink brush effects

Now the main image is finished. I need to transfer the image onto the main background. To do this I first of all went into the Layers Panel and deleted the original image layer. I did this by selecting the layer and clicking on the little bin icon. I then went and saved the image. I went to File > Save As changed the location of the document where appropriate and the name of the file.
[I did this just to be on the safe side, that if I did place the image into the DVD label the original image would not be there as well. Otherwise it would have looked silly, or may as well have just put the original image into the DVD label.]
I then went back into the DVD Label document and then created a new layer within the Layers Panel and clicked New Layer (icon looks like a little post-it note). I then locked the background layer so that it is not edited, and then made sure I selected the circle on the 2nd layer.
I then went to File > Place. Located the file and clicked Place. I then clicked on the art board and the image was placed and within the new layer which I just created.
[I placed the ink image in a new layer because I found that when placing items in different layers it makes it more easier for editing. This is because it will not affect all of the other elements of the design, so I do not have to kept undoing my mistakes. If I make a mistake it is only on the element is it affecting.]

Main Image placed in the main document in a new layer

 I then selected the Selection Tool and selected the image and re-sized and re-positioned the image. I did so making sure that the image was not affected by the stacking ring or the hub, so that you can still tell what the image looks like when they are removed. Here is what it looks like.

Image re-sized and re-positioned

I then thought about trying to blend the image in to the back ground more. I did this by using the Effects Gallery which is used in Photoshop, but is available to use in Illustrator. I went to Effects > Effect Gallery. I then looked through the different effects. my first though was to try the effect that was originally used on the paper background. This was called Underpainting. 

Underpainting effect used on the main image

I then tried tried one called Ink Outlines. It looks really good and has brought out the image, especially the ink splatters and has made it look really sharp and refined. I also noticed a distort effect that was available with the gallery and thought about trying to use that on top of the Ink Outlines. 
[It did not look right as it only affected the brush strokes which I made and not the whole image as I expected it too.]
I had a look and choose one which took my fancy which was called Ocean Ripple. This really brought out the image and the ink effect and gave it a more rough look. It made the image more realistically like an ink image than the other distorts. 

Ink Outlines & Ocean Ripple effects added to the main Image

For the final step for the main image, is the transparency. I changed the transparency level by going to the left hand side tool panel and clicking on the icon with the bold circle and the circle outline. I then clicked on the image and changed the transparency level to 80%.
[I changed the transparency of the image, because the image was a little to bold and I wanted it to blend in more; also it would have made the image look more worn too. I wanted it so that the burned parts of the paper design were starting to show through the image, but not so that the image lost the colour.]
Here is the finish main image for the DVD Label.

The final results for the main image on the background

Film Title

Now I will move onto the movie title itself. For this title I had to create it in PhotoShop rather than illustrator. The main reason being is that it was the only way I stick to my theme. This is because that when I tried to use the eraser in Illustrator it not only erased the title, but also erased the background as well, which did not help things. Whereas in Photoshop I was able to create a layer mask, or even erase the title on the original canvas with only the title being destroyed. There is also another reason which I used photoshop over Illustrator was that I could not use the font that I originally used in the DVD inlay. This did not help as I really wanted to stick to that font as it looked really effective, but I could not find a download for the font. However, I already used the font in Photoshop, which helped as well, especially to the fact I also had to do the warn effect that I wanted to do in Photoshop already. For the reasons stated above the conclusion was to create the title in Photoshop and import it as an image in Illustrator.

To start the title, I first opened the Photoshop program and created a new document/canvas and changed it dimensions to 500px wide x 50px high. 

[I made the canvas this size because it gave me enough room to create the text, but also it gave me enough room to enlarge the font size so that I could then use the eraser and see what parts I was rubbing out. Also, I was thinking about when imported it into illustrator itself. I though if I could make it quite large, it would not look blurred if I was to resize and reposition the title itself]

500px x 50px canvas created in Photoshop

I then selected the Type Tool (icon looks like a black box with a capital T) and then clicked on the canvas. I then changed the font of the text to 'God of War', I changed the font colour to white and then changed the font size to 48. I then typed the title of the film 'Page Travelers' and then selected the Selection Tool and repositioned the text so that it was all on the canvas.

[I kept the font of the title to God of War because I liked it in the DVD inlay, it worked really well and it made the title look old and ancient. I decided to use this again within the DVD Label for the same reasons. But also as I stated before in a previous blog post is that a lot of film companies use the themes and imaging that comes from the inlay] 

Title added to the canvas by using the Text Tool

I then added a New Layer to the layer panel by clicking on the New Layer icon (looks like a post-it note at the bottom of the layers panel). I then dragged this layer under the text layer. I then made the background colour black, by clicking on the new layer and then going to the Paint Bucket Tool and selecting the colour black and clicking on the canvas.

 
[I created the new layer and filled it in with black, I did this because the white text was blending with the checkered pattern which represented the transparency. This made it really difficult for me to see the writing itself where most of it was placed, but also it would be difficult in the next step to create the effect; as I would not be able to see where I have erased parts of the title].
[To create the background I used the paint bucket tool, this was because it was quick and easy to do than using the paint brush tool. As I was only doing this for the purpose to bring out the text meaning that I would be deleting the background once I am happy with the effect. Meaning that using the paint brush tool would be a total waste of time to colour the entire canvas, just for me to delete it once I finished with]

Black Background added to the canvas to see the Text

I then started to create the faded effect on the title. I did this by first making sure that I selected the text layer in the layers panel. I then selected the Eraser Tool and made sure that the black colour is still selected. I then started to click on certain parts of the letters, erasing them till I was happy with the results.
 
[As I created a background for the title I did not need to this time use a layer mask for this title design. This is because unlike in the DVD inlay, the title for the Illustrator I am doing destructive editing. This is is because once I am happy with the design, I will be putting it straight into Illustrator; meaning that once it is in Illustrator the only editing I will be doing is to re-position it and re-size it]
 

Faded Effect added to the Title with the Eraser Tool

  I then right clicked on the black layer in the layers panel and went to Delete Layer. This then removed the black background from the canvas. This will then leave the writing on the canvas. I then saved the file by going to File > Save as I then located where I wanted the file to be, renamed it so that I can find it for when I go into Illustrator.
 
[I deleted the background now, mainly as I mentioned before because it was there to help bring out the white writing. However, if I did save the background and then imported it into Illustrator the black background will be there with the title, which will not look right with the paper background already in the design]
 
I then went into the Illustrator document to place the title which I just made. First of all I added a New Layer into the Illustrator document by going to the layers panel. Making sure the newly added layer is selected I then placed the title onto the document. I did this by going to File > Place. I then went through the system to find the document I just made and clicked Place. I then moved my mouse near the bottom of the DVD label and clicked then the title was placed. 

[I placed the title in a new layer because I found that when placing items in different layers it makes it more easier for editing. This is because it will not affect all of the other elements of the design, so I do not have to kept undoing my mistakes. If I make a mistake it is only on the element is it affecting]

The title placed int he main doucment

Now the title has been placed on the DVD label I am now going to be re-size and re-positioning. To do this I clicked on the Selection Tool icon (looks like a black arrow) and selected the title. I then re-positioned the title and resized it. Here is the final result.

The finished title re-sized and re-positioned

[When I resized the title I used the selection tool because it made it easier to re-size the image by using the little squares on the corners when selected; than going back and forth between Photoshop and Illustrator till I found the right size. I made sure when re-sizing the title that I made the writing big enough that you can see, however, I made sure that there was enough spacing around the circumference of the circle for the copyright text to go round the edging. This tool also made it easier to re-position the title without having to use the arrows keys for the whole process which takes up a lot of time]

Sunday, 30 March 2014

Step By Step - Movie Ticket Logo

Here are the tools/effects that I will be using when making this media Logo: 

• Grids
• Rectangle Tool
• Ellipse Tool
• Selection Tool
• Expand Appearance
• Pathfinder
• Minus Front
• Stroke Panel
• Align Stroke to Inside
• Round Corners
• Pen Tool
• Appearance Panel
• Gradient
• Film Grain
• Offset path
• Transform
• Drop Shadow
• Text Tool

The first step of creating this logo design was to create a new document. To do this I went to File > New. A menu will then show where I entered the dimensions 600px x 600px, I also set up the the colour mode to RBG. I also changed the Raster effects to 72ppi. I then clicked OK.

Newly created Document

I then created grids for the documents. To set the size of the grids I went to Edit > Preferences > Guides and Grid... and a menu appears. I then changed the Gridline Every  to 5px, I then clicked OK.





Now to set the grids so that I could see them. To do this I first went to View > Snap to Grid, and then went back into View and selected Show Grid. The grid should now be displayed on the document.

Grids set up and displayed on document

Now to start drawing the ticket. To start I selected the Rectangle Tool (icon is a little rectangle which is filled with grey on the tool panel, right hand side of the screen). I then clicked on the art board and entered the dimensions 320px wide x 130px high. 

Rectangle 320px x 190px

I then changed the colour of the rectangle by making sure that the rectangle that was still selected and went over to the colour panel on the right hand side. I then double clicked on the white square. I then changed the RBG colour by entering R: 247 G:240 B:224. An clicked OK. 

I then clicked on the stroke icon on the colour panel, which is a big square with a little square cut out. I then clicked on the no-stroke icon (white square and red line) and there will be no coloured stroke. 

Rectangle with colour and no stroke

I then selected the Ellipse Tool (Hold down the rectangle tool icon and select the round shape). I then created an ellipse of 45px x 45px (clicked on the art board and entered the dimensions), I then added a black stroke to the circle so I could see where they were. 

I then selected the image with the Selection Tool  and copied (Ctrl + C) and pasted (Ctrl + V) the circles 3 more times. I then used the Selection Tool again then to reposition the circles into position.

Large ellipses in position on top of rectangle

I continued to use the Ellipse Tool and created smaller ellipse with the dimensions of 10px x 10px and repositioned it. I then copied (Ctrl + C) and pasted (Ctrl + V) the little ellipse and repositioned it to the other side of the ticket. 

I then selected the two little ellipses. By using the Selection Tool  and holding down the Shift and selecting the ellipses. I then went to Effect > Distort & Transform > Transform.  A menu will open. First of all I changed the Vertical Move slider to 20px. I then changed the the number of copies to 3 and clicked OK.  
 With the two small ellipses still selected I went to Object > Expand Appearance. This then allows me to edit the copied ellipses. Here is what it will look like. 

Smaller ellipses blended and expanded.

I then opened the Pathfinder Panel  by going to Window > Pathfinder. I then selected all of the by going to the layers panel and selecting the entire layer. I then went to the Pathfinder Panel  and clicked the Minus Front button. Here was the result.

The Pathfinder cutting the shape of the ellipses into the rectangle

I selected the Rectangle Tool  and clicked on the art board and entered the dimensions 260px wide x 110 px high. I then went to the coour panel made sure that their was no fill for the shape and then changed the colour stroke to a blue colour by entering R:35 G:103 B:164. 

I then changed the stroke size to 3pt. Then I went and opened the Stroke Panel (this can be found on the left tool panel. the icon has several different sized horizontal lines). I clicked on Align Stroke to Inside button then applied the Round Corner effect. I did this by going to Effects > Stylize > Rounded Corners and entered the radius at 5px then clicked OK. I then applied and expand by going to Object > Expand Appearance. 

Blue rectangle added with rounded corners

I selected the Pen Tool (right hand tool panel and the icon looks like a pen nib on a calligraphy pen). I then drew two vertical paths at 110px tall. I changed the stroke size to 3pts and the colour via the colour panel at the same colour as the blue rectangle (R:35 G:103 B:164). I then used the Selection Tool to re-position them.

Pen tool used to create the lines and re-positioned

I then used the Pen Tool  again and created two horizontal lines that were 65px long. Again I changed the stroke size to 3pt and the colour to blue (R:35 G:103 B:164). Then re-positioned them with the Selection Tool.

Horizontal Lines made by pen tool

I then selected all of the paths that I just made (blue lines) by holding down the Shift and selecting the with the Selection Tool. First I went to Object > Expand and clicked OK. Keeping the all the blue lines selected I then clicked on the Unite button in the Pathfinder Panel. I then went to Object > Compound Path > Make. This should then make all of the blue lines into one path when selected.

Compound path made of all the lines

I then disabled the grid view by going to View > Hide Grid and the back to View and selected Snap to Grid. I then reselected the ticket shape and went to the Appearance Panel (the panel is located with the tool on the right hand side of the screen, the icon looks like a little sun). I then went to Effect > Stylize > Inner Glow. 

When the menu opens I changed the Mode from Screen > Normal and then I changed the colour with the little colour box next to the mode. I double clicked it and entered R:227 G:225 B:205 and clicked OK. I changed opacity to 75% > 35%. I then changed the Blur from 5px > 15px. I then clicked OK. 

Inner glow added to the ticket fill

Making sure the Ticket shape is still selected, I will no focus on the Appearance Panel. I clicked on Add New Fill button (big square and little square icon). I then selected the fill and then went to the Gradient Panel  and added a linear gradient. 
The menu opens and first of all I selected the type of gradient I waned which was linear. I then changed the type of gradient, by going to arrow next to the colour box and selected faded sky. 

I then changed the colours of the swatches I changed the first one to this setting R:227 G:225 B:205 and the second to R:247 G:240 B:224

Gradient added to the ticket fill

With the ticket still selected I went into the Appearance Panel  and created another new fill. I set this fill colour to Black and then changed the opacity to 3%. I then changed the blending mode to multiply, this located next to opacity level.  I then added an effect from the Photoshop Effects menu by Effects > Artistic > Film Grain. I left the settings as they were and clicked OK. 

Film Grain added to the ticket fill

With the ticket still selected and still within the Appearance Panel, I changed the stroke. I changed the colour of the stroke to R:212 G:209 B:179. I also changed the size of the stroke to 2pt. This has created a border line for the ticket. 

Stroke added to the ticket outline

With the ticket still selected and still within the Appearance Panel, I now selected the stroke I just made and Duplicated the item. I duplicated it by selecting the stroke and clicking the little post-it note. I then changed the color of the stroke to white but I also changed the stroke size to 1pt.

White stroke line added to ticket outline

With the ticket still selected and still within the Appearance Panel, I then duplicated the stroke which I had changed the colour to white. I then changed the opacity to 15% and also the stroke size to 3pt.

White stroke line at 3pt added to the ticket outline

With the ticket still selected and still within the Appearance Panel, I then duplicated the stroke which I had changed the colour to white. I then changed the opacity to 15% and then changed the stroke size to 1.5pt.

White stroke line at 1.5px added to the ticket outline

 With the ticket still selected and still within the Appearance Panel, I an now going to add a little 3d effect to the ticket. I added a new fill, and dragged it to the bottom of the Appearance Panel and set the colour to R:212 G:209 B:179. I then went to Effect > Path > Offset Path and entered the radius as 2px and clicked OK. 

I then again went into Effects and went to Distort & Transform > Transform. The only item I changed in the transform window was the Move Vertical to 2px, then clicked OK.

Stroke/offset border added to the ticket outline

With the ticket still selected and still within the Appearance Panel, I then duplicated the fill that I made in the previous step. I dragged it to the bottom of the Appearance Panel and changed the colour of the fill to R:151 G:145 B:70. I then opened the transform effect that was duplicated along with the fill and changed the Move Vertical to 3px and clicked OK.

Fill added to the ticket fill

With the ticket still selected and still within the Appearance Panel, I again duplicated the fill, but from the previous step. I selected the new fill and dragged it down to the bottom of the Appearance Panel. I changed its colour to black, and then I changed the Move Vertical in the Transform to 5px then clicked OK. 

I then opened the exisiting offest and changed the size from 2px to 3px and then clicked on. Finally I changed the opacity and lowered it to 5% to make a little shadow on under the ticket. 

Black fill added to make a shadow for the ticket

 The ticket shape itself is now finished. I then moved on to the blue frame. I selected the frame and then went into the Appearance Panel. I then added a new fill and changed the colour R:79 G:150 B:192. I then went to Effect > Path > Offest Path and entered the radius as -1px and clicked OK. 

I then added a colour to the stroke, with the frame still selected in the Appearance Table. I then changed the colour to R:16 G:48 B:96. Then I changed the stroke size to 0.5pt.

Stroke of 0.5pt added to the blue lines

With the frame still selected I added a Drop Shadow. To do this I went to Effect > Stylize > Drop Shadow and then a window opened. I changed the mode from Multiply > Normal. I then changed the opacity from 75% > 100%, both the X Offset from 7px > 0px and the Offset from 7px > 1px and then the Blur from 5px > 0px.  I then changed the colour from black to white and then clicked OK.

Drop shadow added to the blue lines

Now the blue frame of the ticket was now completed. I am now going to add a little center piece to the ticket between the two horizontal lines. I will be making a little cross. To start I will be showing the grid again. To do this I changed the preferences again for the grid, but changed the grid every to 2.5px. I then went to View > Snap to Grid. I then went back to View and then went to Show Grid. 

Grids set at 2.5px

I then selected the Rectangle Tool and clicked on the art board and entered the dimensions 5px x 10px. I then filled this shape with a colour blue by entering the RBG colour code R:16 G:48 B:96. I then re-positioned the rectangle with the Selection Tool to the middle in between the horizontal lines


Whilst the rectangle was still selected I copied (Ctrl + C) and pasted (Ctrl + V) the rectangle. I then rotated the newly pasted rectangle till it was straight and horizontal. I then re-positioned it in the middle of the other rectangle. I then selected both of the rectangles by holding down Shift and selecting them with the Selection Tool  and united them via the Pathfinder Panel.

Rectangles in position

Whilst the two rectangles were still selected created from the previous step. I went to the Appearance Panel and added a new fill. I changed the colour to R:247 G:240 B:224 and then went to Effect > Path > Offset Path and changed the radius -1.75px and then clicked OK.

Cross completed with a outline

Now to move onto the text for the ticket itself i.e. the name of the media company . Firstly I selected the Text Tool (Text icon which looks like a big capital T). I then selected the top part of the ticket, then the text Line appears I then types the word 'TICKET'. 

Text on the design

I then highlighted the text and changed the font colour to R:16 G:48 B:96. I then went into the Character Panel and changed the size of the font to 48pt and also the font to MoolBoran. I also changed the tracking (which is the spacing between the lettering), to 150. 

First part of the Media Name added to design

With the text still selected I then went into the Appearance Panel. I added a new fill to the panel and filled it it with a colour R:247 G:240 B:224. I then went to Effects > Path > Offset Path, I then entered -1.25px for the offset and clicked OK.

I then did the same process but for the text 'Stubs Studios'. However, the font size was changed to 28pt so that the writing could fit between the two blue lines. I did not make an offset for the this part of the media company name as the lettering is too small. Here is the result so far. 

Second part of media logo name added onto design

Now for the finishing touches. I used the type tool and clicked on the art board and typed in six random numbers. I then used the Selection Tool and rotated the numbers I then re-positioned the numbers into the one of the empty boxes. I changed the text size to 40pt by highlighting the text. 

Whilst the numbers were still selected I copied (Ctrl + C) and pasted (Ctrl + V) and with the Selection Tool I rotated the numbers opposite to the first numbers and re-positioned it so that it was in the middle of the other empty box. I did not add a colour fill in the text as I felt that it did not look right.

Here is the finished results!

Finished Media Logo

Sunday, 30 March 2014

Step By Step - Film Slate Logo

Here are the tools/effects that I will be using when making this media Logo:

• Rectangle Tool
• New Layer
• Offset Path
• Rounds Corner
• Gradient
• Ellipse
• Selection tool
• Pathfinder
• Intersect
• Gradient Tool
• Transform
• Text Tool 
• Character Panel

The first step of creating this logo design was to create a new document. To do this I went to File > New. A menu will then show where I entered the dimensions 300px x 300px,  I then clicked OK.

Newly Created Document

 Creating the Slate

Now to start the design by creating the slate of the film slate.


To start I drew a rectangle. To do this I selected the Rectangle Tool ( Pressing on the Keyboard) and then clicked on the art board. This brought a menu up where I entered the dimensions 190px wide x 150px tall and then clicked OK and it created the rectangle.

Drawn Rectangle 190px x 150px

I started to create the rectangle by using the Offset Path. To do this I made sure that the rectangle was first selected and then went to Object > Path > Offset Path. This will bring up the Offset menu. I then changed the Offset to 16px and clicked OK.

Offset set at 16px

Next I added a little roundness to the corners of the rectangles by selected both rectangles via the Layer Panel (the icon looks like two little square on top of one another on the right hand side of the screen). To select them both I just selected the little round circle which is next to the layer name and should select both items. Then I went to Effect > Stylize > Rounded Corner. I made sure that I selected the Stylize from the Illustrator Effects and not the Photoshop effects. A menu will appear where I entered the radius of 8px and clicked OK. 

Rounded Corners at 8px Radius

I then selected the larger Rectangle in the Layer Panel and started to fill it with a Gradient. To do this I went to the side panel on the right hand side and selected the Gradient icon (the icon looks like a little rectangle filled with a gradient of black to white.

Gradient Panel

I can now fill the rectangle with a Linear Gradient. First of all I changed the first swatch on the gradient slider to a 50% black.  To do this I double clicked on the little white swatch icon (these look like little houses under the gradient colour bar), then a menu should come up. I then changed the black percentage to 50%.

I also did this for the second swatch which was black and changed the percentage colour to 80% black. The gradient results should look like this.

Gradient Added to Larger Rectangle

I then selected the small rectangle and made sure that there was no stroke colour on the rectangle by going to the left hand side tool bar and selecting the stoke panel (the panel looks like a little square has been cut out of a bigger square). I then selected the no stroke icon (white box with a red line in it) underneath the panel.

Small Rectangle With No Stroke Colour

I then selected the little rectangle and copied (Ctrl + C) and pasted (Ctrl + V) in front of the original. I then selected a new shape to draw and so selected the Ellipse Tool. I then created the ellipse by clicking on the art board and entering the dimensions 385px wide x 230px tall and clicked OK. I then moved the ellipse into place with the Selection Tool, placing the bottom of the ellipse halfway over the rectangles. 

Ellipse Created and Repositioned

I am now going to Intersecting  two shapes together, before I do I am going to be locking two of paths within the layer in the Layers Panel so that they will not be edited, as I only want to intersect the copied small rectangle and the ellipse. To do this you click the little arrow next to the layer name and it will open the paths. I then clicked on the little empty square between the eye icon and the little blue rectangle. 

I then opened the Pathfinder Panel by going to Window > Pathfinder and a little window will show. I then selected the smaller rectangle and the ellipse with the Selection Tool, by drawing a square over the two items make sure part of their outline is within the square. I then selected the Intersect button on the pathfinder panel. The two shapes will have be intersected.

The Ellipse and Rectangle Intersceted

I selected the the non-intersected smaller rectangle and created a linear blend via gradient. I firstly changed the first swatch to a light cyan colour and then the second one to a cyan colour. I then used the Gradient Tool (the difference between the Tool and Gradient, is that the gradient tool allows you to draw the gradient onto the design, where the gradient allows you to change the colour) to draw a line from the top of the little rectangle to the line of the intersected shape. Here is the result.

Blue Gradient Applied to Slate

I then went into the Layers Panel and locked the intersected shape path. I then selected the whole layer. I then created an offset path of 2 px by going to Effects > Path > Offset Path and entered the 2px into the box and clicked OK. I then changed the colour Gradient of the offset. I changed the first swatch colour to 75% black and the second to 90% black. This is the main part of the slate created.

Offset Path Created on Both Rectangles

Creating the Clap

Now to create the clap at the top of the film slate. First of all I unlocked all of the Slate Layer and selected it all and used the Selection Tool  to move the slate down, allowing me some room to create the claps. I then locked the layer again to make sure nothing is edited on the layer. Now I created a New Layer within the Layer Panel by clicking on the little post-it note icon.

To start the clap I drew a rectangle, using the Rectangle Tool (I clicked the M on the keyboard, which is another way to select the rectangle tool). I clicked on the art board and entered the dimensions 240px wide x 28px high. 

Rectangle Drawn for Clap

I then filled the rectangle with a linear gradient via the Gradient. I changed the first two swatches  to 20% black and then added another swatch by clicking near the colour bar when the mouse has a little plus sign. I then changed this colour swatch to white and placed it in the middle. Here is what the rectangle should look like.

Gradient Colour Applied to the Rectangle

I then drew another rectangle with the Rectangle Tool and entered the dimensions 16px wide x 64px tall. I then selected the Selection Tool and rotated it 45 degrees. I then placed it over the left side of the previous rectangle.

Small Rectangle Placed on top of the Rectangle

With the rectangle still selected I held down the Shift + Alt  and dragged a copy of the rectangle to the right side of the rectangle. 

Created a Copy of the Smaller Rectangles

I locked the rectangle within the clap layer. I then selected the whole clip layer, in the Layer Panel. Now that each of the rectangles are selected I then wen to Object > Blend > Make. This allows me to create a blend. Luckily by default it created three copies of the rectangles for the blend.

Rectangles Blended and made Three Copies

I then unlocked the rectangle in the clap layer and selected it. I then copied (Ctrl + C) and pasted (Ctrl + V) it. I then went back into the Layers Panel, and made sure the copied rectangle was underneath the blended rectangles. I then went back onto the art board, and selected the rectangle, then I held down the Shift key and then clicked on the blended rectangles and held own the Alt and then clicked Intersect on the path finder. 

Smaller Rectangles Intersceted with the Large Rectangle

I will now fill the rectangles with a Gradient. I created two more swatches for this. The first swatch I changed to 100% black, the second swatch to 75% black, the third to 85% black and the fourth to 63% black. 

Gradient Added to the Intersceted Rectangles

I then unlocked the original rectangle from the clap layer. I then selected the whole clip layer and then  selected Shift + Alt  and dragged down. This produced another copy of the rectangle clip. 

A Copy of the Top Clap

I then made sure that the second clap was still selected and then I flipped it. I did this by opening the Transform panel, I did this by going to Window > Transform. I then clicked on a little icon on the panel which looks like a little arrow and rows of lines and selected Flip Horizontal. The second clap will then be flipped. 

Bottom Clap Flipped

I then locked the copied claps via the Layer Panel. I will now rotate the top clap by using the Selection Tool  to select and rotated it 10 degrees. 

Top Clap Rotated 10 Degrees

I notice that the image is no longer big enough for the image to fit onto. So I changed the art board size by going to Document Setup > Edit Art Board. I then dragged a corner till the new art board size was 350px x 350px.

Art Board has been Re-sized

I then unlocked the copied claps via the Layer Panel  then selected the whole claps layer and then moved the claps so that they were placed over the body of the film slate. I did this with the Selection Tool. Here is the results so far for the clap.

The Current State of the Claps so Far

Now to finish the claps with the hinge. To start I began by drawing a Star with the Star Tool. I selected the star tool by holding down the rectangle tool and clicked on the art board. I changed the radius to 30 : 15 and kept the points to 3 which creates a triangle. With the triangle still selected I rotated it 90 degrees.

Triangle Created via the Star Tool

While the triangle is still selected I rounded the corners. I did this by going to Effect > Stylize > Round Corners. I changed the radius to 8px.

Triangle with Rounded Corners

I then created another ellipse with the dimensions of 60px x 52px, with the Ellipse Tool and clicking on the art board. I then copied (Ctrl + C) and pasted (Ctrl + V) the triangle, and made sure that it was below the ellipse in the Layer Panel, as well as this I locked the other layers which were for the claps and also the original triangle. I then moved the ellipse over the triangle and intersected the ellipse and the copied triangle them via the Pathfinder. 

Intersceted Ellipse and Triangle

I then selected the intersected triangle shape and filled it with a linear gradient with the Gradient Panel. I changed the first colour swatch to a light grey blue and the second to a blue grey colour. I then adjusted the gradient so that the lighter colour is on top. 

I then selected the other triangle and changed the gradient. the first swatch to a grey blue and the second to a dark grey blue colour. I then adjusted the gradient so that the darker colour is at the top.

Gradients Added to the Triangle

I now drew an ellipses that was 5px x 5px. I then filled it with an Linear gradient. I changed the first swatch to a light blue grey colour and a second swatch to a dark grey blue colour. With the ellipse still selected I created an offset of 1px. 

Offset of 1px on Circle

I then selected the ellipse and offset I made and copied (Ctrl + C) and pasted (Ctrl + V) it. I then selected each one with the Selection Tool  and moved them over the triangle into position. 

Circles in Position on the Triangle Hinge

I then selected all of the triangle and the circles in the Layer Panel and then moved the hinge into position on the claps with the Selection Tool.

Hinge Repositioned into Place

I then selected the original triangle and dragged it down whilst pressing Shift + Alt. I then changed the colour of the triangle with the Gradient and dragged the second swatch all the way to the white swatch, then changed the black swatch colour to 80% Black. 

Second Triangle with a Colour Gradient

I then went into the Layers Panel and changed the path so that the black triangle is placed before all of the paths the belonged to the hinge. This was because it is a shadow of the hinge, which I positioned with the Selection Tool. Here is how the Film Slate looks at this current point.

Slate & Clip so Far

Creating the Writing

Now to create the writing that is on the Slate itself. For this part I created a new layer, to make things easier to move items around. I added the new layer by going to the Layer Panel and clicked on the New Layer icon (post-it note like icon).

First off I selected the Text Tool (this icon has a capital T). I then clicked on the lower part of the slate and the little type line should appear. I then typed in the name of the media company 'Film Slate Studios'. 

Media Company Name Text Added to Slate

I then highlighted the text and changed the text colour to white by going the colour panel at the top of the art board and clicking on it. I then choose the colour I wanted which was white. I choose white because it really stood out, over the all blues, greys and black. 

I also changed the text font. I selected the text font Adobe Garamond Pro. I choose this font because it looks really professional, especially for the a logo for a media company, who would also be professionals in their job.

Font and Colour of Text Changed

I then opened the Character Panel on the left hand the screen, the icon looks like a Capital A with a type line next to it. I highlighted the text again and changed the font size so that the text fitted within the width of the blue box. If the text was out of place I selected the text via the Layer Panel  and repositioned it with the Selection Tool.

Whilst the text is still highlighted, I also changed the Tracking of the text. This is where there is space between the lettering. I changed it from 0 > 30. So the slate will look like this so far.

Finished Media Company Title

I then selected the Text Tool and clicked on the middle of the blue part of the slate. This time I typed in the letter 'F'. I then highlighted the letter and changed the colour of the text white again, I also changed the size of the text to 130pt. I also changed the text font to Georgia I choose this font from the original tutorial. I kept this font because I thought it looked really effect and looks really professional but I also liked the curling brackets at the end of the straight lines.

Here is the finished Media Logo for Film Slate Studios. 

The Finished Media Logo