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

THINKLINK – My First Attempt

If you click on the image white dots show up if you hover over there is text which explains how I created the infographic. This I will be submitting for the website and as a part of my own initiated project. There are many reasons why I chose the elements you see but that will be explained in the next post.

Thinklink is a fantastic open sourced app that allows individuals to create depth to an image and allows users to have a more immersive experience. This is because they can hover over the dots and find out more information. It is not just information, it can have sound bites and links out to other relevant websites.

Thinklink, in my opinion, is fantastic and will help me to add more dynamic to my work and hopefully make my work stand out more.

Art Work Created for My Double Page Spread

Screen Shot 2016-04-28 at 23.09.14.png

This is the start of my double page spread. I create the Type, Shadows and Strobe lights in Adobe Illustrator and Photoshop. Next I will add a small amount of text to the page as I don’t want to overload the audience with too much information. I will spread the content over a few pages just to make it more audience friendly. The colour schemes I will follow is the American theme: Red, Blue, White and Black. This is fitting for my chosen topic as it was about Americans.

 

Here is a picture of Richard Nixon he was president and was a huge part to the Watergate scandal. It resulted in him resigning in his role and became hated by many people. I wanted to make the picture more subdued and more isolated. By stripping it of all colour it makes the image more of that century and more journalistic of the time. This gives my double page spread more grounds to of reflecting that of the time. I also made the background transparent and played around with the levels of dark and light tones until I was happy.

Above are two different picture elements, I printed each one onto card paper the ripped the stripy paper, this gave the image a more dynamic view. I then placed it over the top of the blue star’s paper, leaving a section in the centre revealed.

It appeared like this once scanned in, I also placed it into Photoshop and used the Hue and saturation tool to manipulate the colour balance. I also gabbed a paint brush and turned the colour to white, The brush was a scattered style. This allowed me to make more texture on the page to make it reflect that of a flag. Once it was something like what I wanted, I then made shadows to make more depth within, my art pieces. I also used the burn tool to make the graphic darker and reflect that dark period in american history. it added more depth and tied into my topic.

I then applied this within my InDesign project and added things like headlines and subheadings.

Reflection on Online Immersive Websites Presentation

Online Immersive Websites

On the 27 April 2016 each person in the group was expected to produce a presentation on what they believe to be an immersive website. We had to conduct research to find 5 different websites in which fitted the task. Once all 5 websites were picked we then had to create a visual presentation and deliver a professional standard presentation. I believe that my presentation went extremely well on the day. I felt that I really understand what an immersive experience are now.

Researching I found interesting as you stubble across many weird and wonderful things. It was evident that some people used the same websites as others. For instance, in mine I used the Latvian Holocaust Mueseum and I think a few others did too. I personally don’t feel this was an issue as it must be affective and must showcase that it is a very engaging and immersive website. I wish looking back now, I picked some of the other websites I had seen when conducting research as people may not have come across them before.

I only used my presentation as a visual aid, there was only bullet points to back up what I was talking about. Lots of images where used within the presentation. I really took on board all the information gained in the previous sessions about how important it is to know your content, how to present well and how to create a PowerPoint slide which isn’t to heavy for the audience. This is my presentation. Click on the link if you want to see.

Immersive Online Experiences – Copy

The main thing that I feel stood out on my presentation was the fact I incorporated screen recordings. Each screen recording was done before the presentation. The screen recordings where of each website, I recorded myself moving around the screen, clicking and hovering over key parts of the website. This was done so that I didn’t have to rely on the hyperlinks and the internet connection to load each page. Especially, within the location we were in, is not a reliable space for internet connections and fast broadband. The screenshots allowed me to not have to jump in and out of the presentation, this allowed me to deliver a much smoother presentation with no hassle. There were limitations in doing this. It didn’t capture sound bites when on the website. The sound would have given the moving image more of an impact. This was not the end of the world because it allowed me as the presenter to talk and explain things without getting distracted. I didn’t feel that I needed a script or cue cards as I really planned out in my head what I wanted to say. I feel that it comes much more naturally when not using aids. As I had practiced I didn’t feel as nervous or anxious to do the presentation. Also it was a very fun task which made things easier.

I really enjoyed this task and the overall brief as it allowed me to full understand what immersive means. In the other section of the brief it really allowed us to use content we found interesting and produce an interactive and immersive online presents. This was really enjoyable and stimulating. I feel the research into immersive online websites really helped with this section of the task as it allows us to see first hand what has already been produced and what the most common elements to making an interactive website succeed and draw viewers in, whilst keeping them engaged with the content. Over the next few years I hope to carry on developing a creative flair to my work as it makes the work so much more alive. These skills learned will be evident in my work from now on because I have to consider, who and where I want my content to be seen. If it is done well then it will help me to become trusted and more well known.

 

Developing the Brand Identity Further

If I was to continue to develop my Brand identity further, I would;

  • Make the CM flow better, by getting rid of the centre part of the M graphic
  • Make the M Graphic Just black instead of having the same graphic as a tire.
  • Consider different fonts and look at more colours

I think for my first attempt the brand is of a high quality but with these changes it will make it more simple and visually more professional.

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.