Design Development Documentation

Size: px

Start display at page:

Download "Design Development Documentation"

Katherine Atkinson
5 years ago
Views:

After creating the outline for this image I was then able to fill it using the paint bucket tool with the colour of my choice.

In order to achieve this goal I simply repeated the process of filling the image with different skin tone colours.

To do this within Photoshop, I first needed to ensure that I was on the correct layer, then I pressed ctrl+t, then right clicked on the image and went to rotate 90 degrees.

1 Design Development Documentation Preliminary Logo One For the first logo design in which I created I started off with a clipart image of a clenched fist in which I traced within Photoshop. I chose this image as I felt it expresses a strong message of power which I wanted to implement within the logo I wanted to create. After creating the outline for this image I was then able to fill it using the paint bucket tool with the colour of my choice. The idea for this logo was to create three of these fists, all filled with a different skin tone colour in order to represent antidiscrimination. In order to achieve this goal I simply repeated the process of filling the image with different skin tone colours. I then rotated each of the images in order to make them appear as if they were all coming together in the middle. To do this within Photoshop, I first needed to ensure that I was on the correct layer, then I pressed ctrl+t, then right clicked on the image and went to rotate 90 degrees. The screen print to the right shows the finished priliminary design in which I created. As you can see I also added some typography within the centre of the logo to convey a strong message and help the viewer understand. I used the font style Stencil Regular as I felt it was a font which looked appropriate due to its bold and striking appearance. Preliminary Logo Two The second preliminary logo design in which I created began with a simple stickman clipart image. The idea for this design was to create a number of these stickmen, but all of different colours to of course represent the different cultures and races.

In order to do this, I simply right clicked on the layer containing the stickman and went to duplicate layer.

I then used the paint bucket tool and selected the colour I wanted to use in order to fill each of the images.

In order to do this I simply highlighted the text and then went to the layers panel and decreased the opacity by 50% as shown in the screen print that I provided.

2 In order to do this, I simply right clicked on the layer containing the stickman and went to duplicate layer. I repeated this process until I had a total of five stickmen. I then used the paint bucket tool and selected the colour I wanted to use in order to fill each of the images. The screen print below shows the outcome of this process. I then felt that the logo needed to include some typography in order to convey a stronger message and help the target audience understand. I added the word Equality in Trajan Pro 3 Bold style font. I also decreased the opacity of the text in order to create a slightly faded affect over the image. In order to do this I simply highlighted the text and then went to the layers panel and decreased the opacity by 50% as shown in the screen print that I provided. The screen print below shows the final outcome of the second preliminary logo in which I created. Final Logo I began creating the logo for my final design within flash as I felt it was easier to trace the image that I wanted within this software. I used an image in which I found on google and imported into to flash in order to trace. I traced the image using the line tool by creating a straight line and then bending it using the selection tool in order to make it line up to the shape outline. I used a yellow outline initially

I then also filled it with black using the paint bucket tool.

3 in order for me to be able to see the stroke against the black image in which I used. After completing the outline of the image I was then able to use the selection tool in order to select the tracing in which I had done and then change the colour of it to black. I then also filled it with black using the paint bucket tool. Instead of tracing around two of these images I simply took the wing in which I created, duplicated it and then flipped it horizontally by right clicking on it and going to transform, then flip horizontal. Once I had the wings created within flash, I then copying them over into Photoshop in order to complete my design. I positioned the wings side by side while leaving a small space in the centre as shown below. I then added some typography above the wings in order to display the name of the company. In order to do this I used the text tool within Photoshop and began typing in the place where I wanted the text to go. For the text I used font Trajan Pro Bold and placed it just above the wings in the centre.

To do this, I first saved the image to my Hdrive and then opened it within Photoshop, and finally clicked and dragged it into the appropriate document.

4 After adding the text, I decided that the logo looked quite bare and I felt that I needed to add another element, something of colour. I came up with the idea to add a light beam between the two wings so I then got an image off google and inserted it within the logo. To do this, I first saved the image to my Hdrive and then opened it within Photoshop, and finally clicked and dragged it into the appropriate document. The outcome of this step is shown in the screen print below. The final element in which I added into this logo was some lines below the liberty text in order to add more emphasis upon it. I did this using the line tool and it was quite an easy affect to achieve.

Brochure In order to create the cover and the back of the brochure I used Adobe Photoshop. I started off designing this brochure by implementing a light blue background.

I then began to add elements of decoration within the corners of the brochure in order to enhance the appearance of it.

I then flipped the image and rotated it until it would fit appropriately within the top left corner of the brochure.

5 Brochure In order to create the cover and the back of the brochure I used Adobe Photoshop. I started off designing this brochure by implementing a light blue background. I then inserted the logo within the centre of the page and used grid lines in order to ensure that it was centred correctly. I then began to add elements of decoration within the corners of the brochure in order to enhance the appearance of it. I traced an image of some design swirls that I retrieved from google and inserted it within the bottom right hand corner. I then flipped the image and rotated it until it would fit appropriately within the top left corner of the brochure. After adding both of these elements I felt that I needed to add in some typography somewhere within the front cover in order to grab the attention of the viewer and to get the message across. For this text I used a variation of two different fonts. For the smaller text I used the font Bodoni MT Condensed and for the larger text I used Trajan Pro 3 Bold. I feel that both of these fonts work well together and the larger font allows the important elements of the statement to stand out. The final element in which I added into the front cover of the brochure was some dot decoration in order make the overall appearance of it more appealing. To create these shapes, I used the ellipse tool.

In order to ensure that each shape was the same size I duplicated each one to create a more professional look.

Then, in order to enhance the look and keep consistency between the front of the brochure and the back I included the design dot pattern at the

6 In order to ensure that each shape was the same size I duplicated each one to create a more professional look. Once I had complete the dots, I clicked on all the duplicated layers and then merged them so I could move the shapes into the position I wanted. When creating the back page of the brochure I kept it quite simple first of all adding a small logo at the bottom of the page along with some contact details for the organisation. For the contact details I used Arial font as it very clear and easy for the viewer to read. Then, in order to enhance the look and keep consistency between the front of the brochure and the back I included the design dot pattern at the top of the page. I also include a thick black line at bottom of the page to provide structure and balance. I created this elements using the ellipse and rectangle tool and used a black fill colour.

T-shirt Design In order to create the t-shirt design, I accessed a blank template from Adobe illustrator and then copying it over to Photoshop as this is a

This then opened up a blank templates folder in which I was able to select the t-shirt design.

Once I had taken the template into Photoshop I was then able to begin designing the t-shirt.

7 T-shirt Design In order to create the t-shirt design, I accessed a blank template from Adobe illustrator and then copying it over to Photoshop as this is a software that I prefer to use. In order to retrieve these template I went to file, then clicked on New from template. This then opened up a blank templates folder in which I was able to select the t-shirt design. In order to get this template in to Photoshop, I simply clicked on it until it was highlighted blue and then went to edit, and clicked copy. Once I had taken the template into Photoshop I was then able to begin designing the t-shirt. I started off by first changing the colour of the t-shirt to suit the company branding colours. I chose the colour light blue as shown in the screen print I provided. I then inserted the logo and placed it within the centre of the t-shirt. To do this, I simply opened up the logo in its Photoshop file and clicked and dragged it from one window, to the other.

The final design element in which I added onto the t-shirt was some black stripes along the bottom and

To do this I used the rectangle tool and then duplicated the layer in order to keep the size of width

Web graphics I created the web graphics for this assignment in Adobe Photoshop and used a number of

I then selected the tool that I wanted to use at the top of the page.

8 The final design element in which I added onto the t-shirt was some black stripes along the bottom and at the end of each sleeve. To do this I used the rectangle tool and then duplicated the layer in order to keep the size of width of each stripe consistent. Web graphics I created the web graphics for this assignment in Adobe Photoshop and used a number of different tools within it. In order to create the web banner, I used the custom tool shape. I then selected the tool that I wanted to use at the top of the page. I chose this particular shape for its curved edge and I felt that it would look appropriate for a web banner. Once I had added the shape, I then added a drop shadow to it in order to make it stand our as the light blue colour was quite hard to see against the white background. To do this, I right clicked on the layer that the banner was in and then went to blending options. The following options in the screen print provided then showed up to which I altered in order to create the shadow I wanted.

9 The next element for the web graphics in which I added was the company logo at the top left of the banner. I resized the logo by clicking on ctrl+t and then changed the size to what I felt was appropriate. I then began to add other elements within the web banner such as navigation buttons and a search bar. In order to include navigation buttons I simply used underlined text. Then in order to define each one, I used the ellipse tool to create a small circle in between each button. When creating the search bar for these web graphics, I used the rectangle tool and inserted some text saying search in order to make it look authentic. After creating the rectangle shape I felt it needed a border in order to refine the edge of it. To do this, I right clicked on its layer and then went to blending options and then added a stroke of 3px in the colour grey.

The next element in which I added within the web graphics was an image slideshow as shown in the screen print below.

slideshow. I then added some more images to the right of the slideshow.

This makes each of the images stand out and look more professional.

10 The next element in which I added within the web graphics was an image slideshow as shown in the screen print below. To create this, I used an image from google and then used the custom shape tool in order to create the arrows to make the image appear as if it is a slideshow. I then added some more images to the right of the slideshow. For each image I added a drop shadow that I created in using the blending options after right clicking on the layer. This makes each of the images stand out and look more professional. Beneath each of these photos I inserted rectangle shapes in order to contain the subheading relating to the image. After creating this shape, I changed the colour of it using the eyedropper tool in order to get them the same colour as the web banner. This keeps consistency and a colour scheme. Also for these shapes, I used a black outline which I created within the blending options of the layer.

Business Card In order to create the business cards I used the blank template within Adobe Illustrator.

11 The final elements in which I added for the web graphics was the social media icons and the copyright statement at the bottom. For the social media icons I used an image off goolgle and then inserted it into Photoshop. Business Card In order to create the business cards I used the blank template within Adobe Illustrator. This gave me a number of different art boards in order to create some different looks for the business card. I again used the light blue background for these cards in order to keep each design for the company consistent.

12 The first card in which I designed had a landscape orientation in which I inserted a large logo in the centre of. In order to insert the logo I simply copied and pasted it from Photoshop and resized it to be appropriate. I also added the contact details of the business using Arial font as it is clear and easy to read. I also centred the text in order to keep it in line with the logo. The last element of design in which I included within this business card is a black line at the bottom in order to provide structure and a professional look. To do this I used the rectangle tool within illustrator and then sized it in order to fit along the bottom of the card. For every other design in which I created I kept the theme and the elements I used much the same just using different layouts as shown in the screen print below.

13 Letterhead I created the letterhead for this assignment within Photoshop and used the custom shape tool. The shape in which I selected is the same as the one I used for the web banner and I selected this shape for the same reason which is for its curved edge at the bottom. I coloured this shape light blue and also added a drop shadow using the blending options in order to make it stand out. I then added the logo into the top right of the letterhead by clicking and dragging it from one Photoshop file to the other. The next element in which I added into the letterhead was the address of the organisation as this is a necessary part of any letterhead. To do this I used the text tool within Photoshop to write the information and then highlighted it in order to change the font to Arial.

14 I also added within the document that I created, a footer and a watermark in the centre as I felt this looked appropriate and more authentic in comparision to a real letterhead.

A Step-by-step guide to creating a Professional PowerPoint Presentation

Quick introduction to Microsoft PowerPoint A Step-by-step guide to creating a Professional PowerPoint Presentation Created by Cruse Control creative services Tel +44 (0) 1923 842 295 training@crusecontrol.com