Creating Website logo

Today, in a group chat with the people who turned up, it was identified that we still needed a logo for the name and byline of the website. I volunteered to do some designs for this because I enjoy the creative side of the course. Also with me having time off recently for ill health and my surgery, I wanted to show that I am back and ready to step up and work as a part of the team.

The agreed name of the website is: “Out of the Shadows” and the byline is: “Shining light on Modern Day Slavery.”

When creating this logo I know that it has to reflect that of a professional standard and has to also reflect the brand identity of the site. This will help to draw people to stay on the site and deem it as a highly well designed and thought out. Professionalism is key as it then makes the audience see content as reliable.

Whilst I know the text that has to be included in the logo, I am not entirely convinced on how the layout should look. To help me narrow down on a few different designs I roughly sketched on a piece of paper some ideas.

image_6483441 (1).JPG

Once I was satisfied with three designs I then started to build digital versions. This will help me to see what works and what doesn’t. Also, it gives the group more designs to choose from. To build the digital versions I will and am still going to use Adobe Photoshop as this is a great tool and I have previous knowledge of the software.

For the first design, I wanted to create a spotlight effect. In order for me to do this, I referred back to old notes and spoke to Dave Eccles who taught me in the first year. He explained the steps that I needed to do and this really helped to refresh my memory. As he spoke I made notes in order for me to remember everything so I didn’t make a mistake.

Here is how you create a spotlight effect

Step 1: set up a blank document with a black background. set the canvas to 10 by 6 and 75 dpi. This can alter depending on the size of the file required.

Step 2: create a new blank layer, with that layer selected then click on the rectangular marquee tool. With this draw, a narrow selection in the middle of the canvas but all the was down to the bottom of the canvas. After this either click Shift and Delete (mac) or Shift and backspace if you’re using a windows system. this brings up the fill palette, set this to 50% grey and click ok.

Step 3: Go to the filters drop down menu and hover over render then select fibres. The fibres tab will appear. zoom the rectangle image out to 33 % so you can see the fill image set the variance to 4 and the strength to 30 then click ok.

Step 4: Next open the levels tab and the 3 points change to 16- 1.00- 138 then click okay. This will help with the contrast.

Step 5: After that go to the filter menu go down to blur then click on motion blur set this to 90 degrees up and down and set the distance at 250 pixels. click ok then add a layer mask onto the layer. use the gradient tool and in the pallet pick the 2nd item in the first row. This is the foreground to transparency. Set the colour to black.  Press Shift and drag from the top of the rectangle downwards. Now you can delete the layer mask and click apply because that will keep what you have done on the actual layer itself.

Step 6: Press command, control and t and rotate the object to a make it angled off the corner of the page. whilst still highlighted click control and right click then pick the option to distort. push and pull the points to make it closer together at the edge of the page and open up the other points to represent that of a light beam.

Step 7: click control and the hue and saturation option the tab will open up. tick the box that says colourise and slide the points across until you get the colour that you want.

Step 8: create a round element by selecting the elliptical marquee tool and create a narrow oval shape. This shows the bounce of the beam on the floor.

Here are my efforts

The next design was more simple to create but still had a few steps, this time I wanted to use thicker text and smoke.

For the font of the text, I used Haettenschweiler. I thought it was bold and it makes a statement and was easy to read for the audience. Next, I wanted to use smoke but that is something I wasn’t sure how to create so i used an image from Creative Commons which is a royalty free site. This protects me and the project from legal issues with plagarism and copyrights.

The image was set as the background and I duplicated this layer and placed it higher the text layers as I wanted the image through the white text. To do this you go to layer create clipping mask. This has been successful on two words but having issues with the two other words I want the same. I don’t know what the issue is so I will ask Dave when i next see him around HSAD.

Here is my attempt so far

smoke.jpg

Digital Versions of My Sketches

After coming up with some ideas, I then produced digital versions so see how well they came out. There where designs that didn’t look good at all when I produced hem and others looked more appropriate for the task.

The Bad attempts 

Screenshot (10).png

This one looked wrong and didn’t seem to be a brand that would be catchy or remember-able. As I didn’t like the digital version I ruled it out and decided to move on.

Screenshot (9).png

This next design was a complete failure as I tried to create an Additions logo. This used typography as well as a picture. This would not be a brand identity as it is too much and at different sizes will become unreadable and not good at all.

I ruled this one out and decided not to try and develop it further as it wasn’t going to become my brand.

OK Brand Ideas

Screenshot (8)Screenshot (12)

This logo was better then the ones above, however I didn’t feel it was creative enough. It is very basic and not that what people will remember. My design has to be more creative and so that I stand out amongst others. This logo was that what reflects that to what’s already out on the market. Journalist generally just have there names simply done. I want to push boundaries of what is the normal for people in the Journalism field. The second logo with the black, white and yellow is designed that way as these are my sporting colours. In both of these logos i have designed each letter used in Illustrator.

My favourite brand ideas 

Screenshot (11)

This design is my favourite by far. it really reflects me. The ‘C’ and the ‘M’ are made from wheelchair tires. This is key as i am disabled  and not ashamed to represent this aspect of my life. The wheels are symbolic as they showcase my personality. The chair transports me around but I am the individual. some people say they don’t want to be defined as a wheelchair user but I see it that its a part of me and why be ashamed.

This design is the building blocks which i want to work from. I want to make it flow better and to make the ‘M’ a continuous flow. The ‘M’ to me looks to much like the McDonalds ‘M’. This could get me into a legal issue if kept this was so by making it flow better and get ring of the central piece of the ‘M’ will help to make it less like the McDonalds brand. The brief states it must work in colour as well as black and whites. My chosen colour scheme will have dark reds or golds.

THEORIES IN TYPOGRAPHY & DESIGN PRINCIPLES

As a part of my research I wanted to develop my understanding of typography and design principles. I came across some theories that was really insightful. A theory I learned about:

Gestalt theory

This theory explains the ideas of how powerful the mind is. This focuses on cognitive behavior’s and explains how the mind deals with a lot of visual data. Visual confusions is seen in our everyday lives. People sub-consciously tries to make visual data much more simplified and easier to digest. The mind efficiently simplifies the parts by making it into a single object.

For instance, if I was to say to someone explain to me what a human face looks like. They will be able to depict the key shapes and parts. Such as; eyes, nose, ears, mouth etc. It makes a design stripped and much more generic. The mind designs a face by bringing them together and manages to register a face.

Five design principles derive from the Gestalt theory: proximity, similarity, continuity, closure and figure/ground.

  • Proximity – the space between objects. If close together can be seen as one or a group. If too far away then will be perceived as separate pieces of data. My example below.

proximity.jpg

  • Similarity- this part of the theory that explains if there are elements that have similar characteristics on the same page then there will be a relationship built. My example is of two different breeds of cats. Even though these are a different breed of cat they don’t have a lot of similarities.

similarity.jpg

  • Continuity – The ideas that type follows in the same direction until it comes across the next piece of design. My Example

direction.jpg

I really think this theory is incredibly important to me within my chosen career as designs are apparent in everything we see. Simplifying things is key when designing something as it allows the information to be digestible and understood. If I apply this theory to my own practice then I will be able to create unity within the piece. I will gain better communication of the piece if the relationship between the shapes/elements are strong and come together. This theory helps the designers influence, how the design is viewed by the target audience. This is the preferred reading. It is up to the viewer to decode the piece.

Bibliography

Gestalt Theory of Visual Perception. 2016. Gestalt Theory of Visual Perception. [ONLINE] Available at: http://www.users.totalise.co.uk/~kbroom/Lectures/gestalt.htm. [Accessed 20 March 2016].

Principles of Design – Graphic Design Theory. 2016. Principles of Design – Graphic Design Theory. [ONLINE] Available at: http://www.slideshare.net/EngineeroBono/principles-of-design-graphic-design-theory. [Accessed 20 March 2016].

Design Principles: Visual Perception And The Principles Of Gestalt – Smashing Magazine. 2016. Design Principles: Visual Perception And The Principles Of Gestalt – Smashing Magazine. [ONLINE] Available at: https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/. [Accessed 20 March 2016].

 

 

Reflection on 3 types of Visual Identity

Branding is so important to get right, there has to be a thought process behind the chosen design as it is a reflection of yourself. Everyone will make a judgment about you on how you present yourself. So your individual house styles need to be incorporated into the brand.

Many designs are different and may consist of one or more components. These can be things such as images, colours, slogans, words – typography, shapes etc. individual typefaces are so crucial in how you make yourself appear. Some people go for the professional feel and some that are more creative and break the mould.

Having a visual identity can be as vital within your life as humans work best with visuals once they get to know a brand, it creates a brand loyalty and a sense of respect.

There are three main factors when considering a brand identity

  1. Logo (pictures/shapes)
  2. Typography (text/numbers)
  3. Addition (logo and typography together)

When thing about my own branding I want to create something that is fairly simple but not to formal. This is because I really feel less can speak volumes and appear of the higher quality. Formal isn’t me, I’m a student and still finding my feet within the industry. This is something I want people to know as I’m not perfect but is willing to put my all into anything I do. I really enjoy type so think my end brand will have this as the main feature. I am still coming up with concepts so this may change.

Once I have a set design for my brand I would really like to create a series of different styles, different colour schemes and typefaces in general. This is something I want to investigate as I seen how well major companies have adapted there brands. Great examples of brands that have done this are: apple and coca cola.

FINAL HEADLINE FOR INFOGRAPHIC USING ILLUSTRATOR AND PHOTOSHOP LIGHT WORK

Before, I began I familiarized myself with the processes using a smaller amount of letters. This process took me a while to get the grips of but the end product looked of a high standard. This to me was a technique that was transferable to other pieces of my work. This allows me to uses the skills to improve and develop my creative flare.

Final firstfinal practice.png

For my info graphic design I will be representing the Paralympics from London 2012 using key data along the way.  The word Paralympic is very under rated in accordance to that of the Olympics therefore I wanted to make it stand out and have a bold and eye catching impact for viewers to take notice.

First of all I started of in illustrator and developed the key shapes of each letter, along the way making sure that there were no over hang. To make sure that there was no over hang I clicked (CMD + Y).

para

I then added colours into each segment of the letters, I decide I wanted to use gradient and as I was transferring it to Photoshop I knew I could add colours in using overlay so at this moment kept it blacks and whites. This makes areas dark which will be unseen in the final product. Once this was done I then added texture stroke lines into the letters, this creates more depth to the product.

Screen Shot 2016-01-15 at 11.58.16

After putting it into photoshop, I then worked on the letters even more creating layers and new folders, this helped to keep it organised. The first folder created was the background layer, the background of choice was black this helped the dark areas to blend in, creating the contrast. I then created another folder for text light this is where I used the pen tool and selected points in the letters to create shapes. Once enough selections where made I then clicked the black pen tool and selected them so that they were all highlighted.

Screen Shot 2016-01-15 at 11.58.41

Once this section of the process was complete i then started on creating directional lines, from the first attempt i gained the knowledge on how to achieve the same style. this skill was transferred into my new project once all the directional light layers were in place the project looks like this.

Screen Shot 2016-01-15 at 11.58.57

the next stage of my process was to add curves, to the text the brought out and emphasised the curves within the shapes. This gave the graphic a different element.

Screen Shot 2016-01-15 at 11.59.11.png

other stages of the process included, adding colour layers and adding orbs. this made areas of the text stand out and shine. This is symbolic as it could have connotations to the athletes themselves as they all shined to get to the worlds competition and represent there country. This is a proud moment for all individuals that participated and would be the highlight of there life whether they win or not.

Screen Shot 2016-01-15 at 11.59.47.png

The end product in my opinion works really well and definitely stands out. There are things that i would like to have done better but for only my second time using this technique i am really impressed how well I’ve picked it up. This skill will help me to create other high professional products.

End product

Screen Shot 2016-01-12 at 20.44.27.jpg

 

Practice on Technique using small amounts of letters

Before starting my infographic I wanted to learn a technique that I had recently seen, it uses illustrator and photoshop with light work. I wanted to use this skill once I have had a practice as it is a transferable skill that looks impressive.

Screen Shot 2016-01-12 at 21.27.26

In Illustrator, i created letters using shapes. Once the letters where created and all looked fairly uniform, I then inserted the gradient colours and set it to black and white. The dark areas will blend into the background once in Photoshop.

Screen Shot 2016-01-12 at 21.40.15

When in Photoshop I created two different folders and inserted layers in each one. I renamed the folders one called background and the other text light. I set the background to black on a layer and moved on the text light layer, and started to use the pen tool to start picking points with in each letters.

Screen Shot 2016-01-14 at 20.04.07.png

Here I was using the path finder tool then clicked the centre point and clicked Alt and it deleted the anchor point then I could move on to the next point. This part of the process I struggled with as I was unsure how to delete the anchor points.

Screen Shot 2016-01-14 at 20.07.29

After, the is stage i then moved onto adding in directional light

Screen Shot 2016-01-14 at 20.09.30

In the image above, I used the select tool and made a rectangle shape filled it with white. Place them around my text. i placed a filter over the top of the rectangle shape called gaussian blur.

In the images above show the type with colours added in this makes it look shiny and adds much more depth. i added different yellows and oranges and used the burn tool to darker areas.Screen Shot 2016-01-14 at 20.57.21