Tag Archives: Graphic design

Making-Of series: Logo design in Adobe Premiere

In this post, I’ll be showing you how I made this:

This video was an extension of my ‘Making-Of series: Heads up!‘ post. I took the graphic that I had made for my header and turned it into an animated video. If you want to see how I made it, carry on reading!

Making your video

The first thing I did was load up Adobe Premiere Pro. The size of my work space was already predetermined by the size of my Photoshop layers, which was w:1920 x h:1080, which is the average size for television and video uploads. Upon opening the project, I immediately made a save file of my work in an appropriate folder area to make sure I always had the opportunity to save it quickly and could find it quickly if I needed to.

To actually make a project in Premiere Pro, you have to have already had different files saved via Photoshop. For example, the blue of my video was already a layer I had made in Photoshop. To do this, I simply put different elements on different layers so they could be turned on and off quickly to save my layers faster. It’ll be easier to show you this rather than explain it!

1

In the image above, you can see how I’ve split all of my text into separate layers. After I’d done this, I then saved each individual layer as a PSD file to then load into Premiere Pro. I added these files to Premiere Pro by double clicking on the ‘Project‘ box in the bottom left and loading in each individual PSD file. This was what my project work space looked like when I had loaded in my individual PSD files:

2

After I had done that, it was simply a case of dragging each individual file into the timeline on the bottom right of the programme. To control each component separately, you would have to put them all on different channels as shown below:

3

In the above screenshot, I had already adjusted the times that I wanted certain components to come in and how long I wanted them to be on the screen for. It was then that I started to add in certain effects, like changing the opacity. To do this, you simply add key frames in the ‘Effect Controls‘ panel at the top left of the programme. In the example below, I had added two key frames – the first key frame being an opacity of 0%, and the second being an opacity of 100%. This gave the effect of the N fading in. I did this on all of my other components to give a smooth effect. I have circled where the key frames for this channel start and end:

4

I continued to do this throughout my project until I got the desired effect, which was the letters fading in one-by-one and the bubbles fading in and out behind the text. With more practice and time, I could have done more to this but I feel like the animation itself is pretty minimal and simplistic!

Uploading your video

After you have made and saved your video, then it is time to upload it to YouTube and get the embed code for you to stick it on your website. To upload it to YouTube, firstly you have to have an account – this can be done using the sign up button or by using your Google account (if you have one).

To upload your video to YouTube, you have to press the Upload button on the top right of the screen. There, you will be able to choose your video and change certain aspects of it – here you can add royalty free music, choose the thumbnail and even add subtitles if you need to. Here is the place to customise your video to your hearts content!

After you’ve uploaded your video to YouTube, you need to get the embed code. This can be found underneath your video in the share section. Below is a screenshot of what you need to copy:

5

All you need to do then is copy this code and paste it into a blog post or a page and you’re done! You can find my video on my Logo Design – YouTube Link page!

Thank you for reading!

You can find me on Twitter here!

Or you can contact me here!

 

.

Advertisements

Making-Of series: Deconstructing a magazine

This is one of the more simple tasks I have done, but because of the intricate details I had to remove, it took me quite a while! In this post, I’ll be showing how I deconstructed and remade this magazine cover:

Original cover

Deconstruction 

The first thing I did was remove the text. This was the hardest part because of the amount of different patterns and textures that are in the image – the ocean was definitely the hardest part! To get rid of the text, I used Photoshop’s Clone Stamp Tool at various different opacity levels. The clone stamp can be found by clicking this button in the toolbox on the left or using the S keyboard shortcut:

Clone_Stamp.jpg

I struggled with the sea at the bottom of the image because the multiple amounts of colour in it, and some parts look slightly patchy and smudged but it doesn’t matter too much! After I had removed the text from the image, this is what I was left with:

Edited_Cover

Reconstruction

After I’d taken all of the text off of the image, it was time to put it back! Because I wasn’t sure of what fonts the magazine had used, I had to find some that were similar and edit them. The two fonts I used were Lemon/Milk and Times New Roman. Because the fonts weren’t exactly the same, I had to change the tracking, horizontal scale, vertical scale and the size of the fonts. Below is an example of some of the changes I had to make:

Character_EditCharacter_Edit2.jpg

I found the colour of the text by using the eyedropper tool to pick out the colours of the original fonts (shh, it’s not cheating if you admit to it!to then apply them to the text I had added myself. I also remade the black circle on the left of the page by using the brush tool at a large size on a new layer and adding text over the top of it!

After all this, this was my final result!

Edited_Cover2

Although it doesn’t look the exact same, I’d say it looks pretty similar! Take a look at the original and remake below!

As always, thank you for reading!

You can find me on Twitter!

Or you can contact me on my contact page!

Making-Of series: Heads up! (Part Two)

In my previous post, I showed you how to make a static header. In this continuation, I’ll be showing you how to animate your header!

Our last tutorial ended with our final image looking like this:

screenshot_8

Getting started

From here, we need to open up the ‘Animation‘ window. This can be done by pressing ‘Window > Animation’ – in some newer and older versions of Photoshop, this can also be called ‘Timeline‘.

Screenshot_9.png

Doing this will open up the animation window at the bottom of your screen. Initially, the window will open in a timeline view, but this can be changed to frame by pressing the small button on the right of the window (as seen below).

Screenshot_10.png

Making your image into a GIF

My image animates itself by flashing up the circles, text and spark points one at a time. The easiest way to get it to do this is to put each of your letters, objects, etc. into separate layers by duplicating the layer and removing different parts of it each time (pre-warning: this may or may not be a tedious task depending on how many things you want to animate!). This step is pretty easy so I won’t go into detail.

Once you’ve sorted everything into separate layers, you can start animating! The first thing you need to do is start off with the blank first layer. To do this, select your first frame in the animation window and turn off the visibility of all of your layers aside from the background one. In my case, I turned off all of my layers aside from the blue background and the line going across it.

To make your image animate, you have to add frames. To do this, you can press on the small drop-down box on the top right corner of the animation window (shown below) and click on ‘New frame‘.

Screenshot_11.png

To animate your image, keep repeating the process of adding new frames and turning on and off different layers until you feel that your animation is complete. To make my animation, I did the same thing but firstly made it so that the circles came up one by one from left to right, then the ‘N.Austin’ came up letter by letter from left to right, then the ‘Media’ came up letter by letter from left to right, and finally so the spark came up by each individual spike from left to right. This, as mentioned earlier, was a tedious task because I had quite a few things to animate, but with perseverance I managed to finish it.

To change the speed of your GIF, you can change the seconds each frame is shown by pressing the drop-down arrows beneath each frame. Doing this can make your animation faster or slower. Because mine has quite a lot of information on it, I chose to make it go quite fast but not too fast. This is my finished product:

header4

Have a go and comment with your GIFs!

Nicole Austin, Leeds Trinity University

Contact me here!

Find me on Twitter here!

Making-Of series: Heads up!

Want to know how I made this?

header4

If so, read on!

In this making-of, I’ll be showing you how I made the animated header at the top of my page. For this tutorial, I’ll be using Adobe Photoshop and its animation (also known as timeline in some versions of Photoshop) feature. This tutorial will be split into two parts, so make sure you read part two to find out how to animate your header!

Getting started

The first thing I did was open up a new Photoshop file using the dimensions w:960 h:250 pixels and set the resolution to 72 pixels/inch. I did this by pressing ‘File > New’ and filling in the sections of the pop-up box and pressing ‘OK’ when done.

Screenshot_1.png

Changing the name of your file is optional, but will save you time when you come to save the file later on!

Choosing a colour scheme

Choosing a colour scheme for me was easy – I am a huge fan of pastel colours, so instantly started searching for pastel colours that worked well together. From this search I found the powdery blue (#bad8f2) and white (#ffffff) combination and added in the black (#000000) as drop shadows for a dark and direct contrast.

Colour palette.png

Getting to work

After I’d opened my workspace and chosen a colour palette, I firstly coloured in the background using the ‘Paint bucket tool‘ and the powdery blue colour. This can be found on the left of the screen, but can only be found by right-clicking on the gradient tool (see below).

Screenshot_2.pngScreenshot_3.png

Here is my workspace after I’d filled in the background:

Screenshot_4.png

The next thing I did was add my large text. This was also an easy step so I won’t go into too much detail! The font I used was ‘Bebas‘ (which I downloaded from this website for free) at size 85.12 pt with the anti-aliasing method set to sharp. By using the ‘Character‘ toolbox on the right of the page (beside the adjustments toolbox), I changed the vertical scale to 87%, the tracking to 21 and the horizontal scale to 94%.

Screenshot_5.png

After I had done this, I added a drop shadow by double clicking on my text layer and choosing the options which I thought looked the best. Because the theme was ‘pastel’, I chose not to make the drop shadow too dark or too opaque.

Screenshot_6.png

The next piece of text beneath my main text was also done in a similar way. I used the font ‘Rage‘ which came pre-installed with my computer, changed the colour to black and the size to 40.11 pt. Using the same Characters toolbox, I changed the vertical scale 90% and the tracking to -30. The drop shadow was done in the exact same way as the first piece of text with the exact same settings – the only different part about this piece of text was that I added a stroke around the text – I did this again by double clicking on the layer, selecting the stroke checkbox and inputting these settings:

Screenshot_7.png

Adding fine details

After I had added the text, I decided to add some details to make it look less plain. Keeping in theme with the pastel idea, I decided to add a white line going behind the text to make it look like it was ‘flowing’. Instead of using the line tool on its own or the brush tool with a mouse, I actually drew the line with the brush tool but using my digital drawing tablet (Wacom Intuos Draw) with the layer opacity set at 85%, the brush size set at 2 px and the colour at white.

I also put a spark symbol above the I of my text. I found this on the Creative Commons by searching ‘Spark vector’. Because this was black when I first found it, I inverted the image by pressing ‘Image > Adjustments > Invert’ and then added the same drop shadow that I added to my text. To make it fit above the I properly, I used the polygonal lasso tool located on the left of the screen at the top of the main toolbox.

As an added extra, I placed different sized circles along the line in a new layer also on 85% opacity. The end result of adding the extra details was this:

screenshot_8

There is the final image! To learn how to animate your image, click here!

Nicole Austin, Leeds Trinity University

Contact me here!

Find me on Twitter here!