Going back to Typography

I have been working on the second project and realised that I wanted to completely finish my typography work so went back to it and started to redo the hands.

I print screened how I did it this time, I had a little problem last time because when cutting out the back ground I took the easy root of using the “Magic Want Tool”. Where as this time I used the pen tool and pointed the parts of the hand singly then used the path tool which cut the background out. Then I edited the hand its self and made sure it was plain and had no wristbands or tattoos, this was the same as I did it last time, then this time to change the colour I simply just used black and white the automatic version and then saved it as a png so it was still transparent.

Screen Shot 2015-11-10 at 16.08.52 Screen Shot 2015-11-10 at 16.10.33 Screen Shot 2015-11-10 at 16.11.03

The second part of how I put the image on to the actual letters, at first I soon realised the letters were still a font and I had to change the font to an outline. That way I was able to have the image inside of the letter which will look professional and what I would like it look like.

Screen Shot 2015-11-10 at 16.17.11 Screen Shot 2015-11-10 at 16.17.39 Screen Shot 2015-11-10 at 16.18.08 Screen Shot 2015-11-10 at 16.18.21 Screen Shot 2015-11-10 at 16.18.29

In more detail to the pictures, firstly like I mentioned I had to make the font an outline, then duplicate the font. I copied the letter then paste in place so it was perfectly inline with the other letter, I then had to make sure the image was in the right place where I would like it to be in the letter. After making sure it was in the correct place, I arranged the image to be at the back of everything and held down cmd and clicked on one of the letters. That way I could then right click and “Make Clipping Mask”, which gave me my final result of my sign language typography.

Up to date!

Screen Shot 2015-11-08 at 22.35.35

So this is my most recent piece of work that I have been working g on and it may not actually seem like I have done a lot but I’ve been looking at small details such as colour for children to enjoy the website its self.

Although I’m currently working on photoshop with this I have been saving the images and parts I want to use for the final piece.

Mock ups!

So at first I thought you had to pick one of the following; A2 poster, Mobile Device and Website. I started to create a rough of my infographic for the poster and mentioned it in my last post, but after realising what I had done I started to look in to some mock ups for the other ones I needed to do.

I found a mobile and computer mock up which started like this,

this is what I found online and will use for my final project.

What I will be putting on the mock ups though, I’m not one hundred percent sure yet.

I started to think about what I was going to put on the computer mock up, I was not sure whether to just make a website on there, obviously a child style website with all the bits like the website. But rather than trying to create my own safari I thought as I’m using a mock up already may as well take advantage of it. So I placed a safari website on the computer.

Screen Shot 2015-11-04 at 16.29.36

 

I just changed it a little like took the words out and made the website black to make it look more like a science website, then I started to add a logo and a menu bar which started to look more like a website. The challenging part I then found was how to make sure I show the website is for children, educational, entertaining and show its about the theory of relativity.

So far this is what I have created with just a little play around and is something rough,

Screen Shot 2015-11-04 at 16.32.39

 

Screen Shot 2015-11-04 at 16.33.46

Screen Shot 2015-11-04 at 16.34.31

 

For my mac website mock up, I was looking online for websites that are educational, fun and for children. I found websites such as; http://www.sciencekids.co.nz and http://climatekids.nasa.gov both website was full of images and colour. On climate kids there was a little gif butterfly flying across the screen, I already had a similar idea because I used the idea at college when creating a website and having a gif moving across the screen. So I thought about having a gif such as a rocket which will explain the theory to the children, its fun and can help the children remember.

Second Project!

In my last workshop we was told about our new project we need to work on and then we got to do what we wanted in the rest of the lesson. So most people asked for some help with previous work and then started to look at the new project. Everyone left after about an hour and I stayed till the end to try and get some work done from my first project and to start looking at the new one, Chris helped me when I showed him the hand photoshop drawn image, I was not to sure how to go about it at first. Chris said to draw round the main areas of the hand as it would be a lot easier, the only problem I had with that was I don’t have a steady hand to draw round an image on photoshop. Chris was helpful but I just couldn’t do that option, after he left and everyone else left the workshop I started to do some research for new project.

The new project is an infographic on any target audience that I pick and the tone of content that will be in the infographic. Straight away I knew who I wanted to aim mine towards and used that to start researching some ideas online and on websites such as Pinterest and google.

My target audience is children and for educational purpose, the project is to produce a response to Einstein’s theory of relativity on an infographic. So from reading the brief I started to look at infographics that were already made for Einstein, there was lots of amazing and out the box ideas on infographics. So I started to create an idea for mine,

9d3e80cb2a586a9735d07476909890ae

 386b26fc1e8d118540d030899257538frelativity-how-it-works-150304e-02You need to click on the images to see the457c11cc224ba27e7fb2486aea2063f8 quality and it bigger than it is on my blog, the first image is all about how to not make a bad infographic. Its very interesting and helpful because I’ve not actually ever made one for myself, the first area I came across when reading this infographic is that the colour makes a huge impact on the overall look of an infographic. Knowing that mine is about science Im going to stick to basic colours like black, blue, white and maybe some light colours, the second area is the typography. Of course the size and font is going to have a huge part to play on an infographic because you can’t have a science infographic and the font be really small and fancy because it would not suit the style. Lastly when looking at infographics before in the past I already knew that blank space works for an infographic, so for mine I was thinking about having a space effect and the main colour as black and then a big picture either at the top or bottom of earth, that way I can create blank space without it look weird or bad because the universe has lots of space so it will look normal on an infographic.

Screen Shot 2015-11-01 at 16.12.26

This is my rough idea, the image at the bottom obviously being earth and then having an image on the right and maybe a few more around the page. This is only the first page though, I’m not sure how many pages I will be doing. after looking at the other infographics I found they had a timeline type effect going down the page making it look more effective to have information on it, so I took that in to count and have the line going down with information in-between it all. I need to think about what page will have what information to actually be able to start thinking about the layout of the pages.

Hand photoshop!

So I have been having a little trouble with trying to find the best way to make my pictures look like a drawing of the sign language alphabet. I firstly took the pictures which are not the best quality, I did think about taking them again but then came to the conclusion that the images will be very small and you wouldn’t even notice the little detail on them.

After playing around on photoshop, I made a few letters different using a different technique of black and white and desaturate. I wanted to make it look like I had a drawn hand but felt it was to hard for me so finally found a better and easy way to create a drawn like look.

Screen Shot 2015-11-01 at 14.11.05 Screen Shot 2015-11-01 at 14.11.12 Screen Shot 2015-11-01 at 14.11.21

 

These letters are A, B and C, I prefer letter B I feel like it looks more drawn than the other two. A looks really odd the outline is standing out to much to the rest of hand, C is just black and white but look to dark to go on the black font, so the best thing to do is the letters like B.

How did I do it?

Firstly, opened the file and made sure I took the pad lock off. Any editing that was needed like in the pictures I had taken there was a tattoo and wristbands on so they needed to be edited out. Once they were done I duplicated the layer and went to adjustments then Desaturate, this makes the image black and white and removes as much colour as possible. I then duplicated one of the layers again but this time the newest duplicate I inverted, then the inverted layer was changed from normal to colour dodge. Once doing this the layer fills with white the image is still there but just nee to add an effect to make it have a sketch look. To do this I go to filter and Gaussian Blur which then opens up a box and gives me the option to adjust the sketch effect to add more if need be or less.

Now this has been made into a sketch type look I then just need to cut the extra edges that are not needed so they fit perfectly in the font.

This is the before

Screen Shot 2015-11-01 at 15.48.32

and this is the after

Screen Shot 2015-11-01 at 15.48.21