Tag Archives: Step-by-step

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: How to set up your own WordPress

If you’re reading this, you probably already have a WordPress. However, if you don’t, then this post is perfect for you! In this post, I’ll be talking about how I started my WordPress and I will show you how to make your own!

Making your WordPress

The first thing to do is to go to the WordPress.com site! Here, you will see several different options – the easiest one to click is ‘Get started‘.

 

Screenshot_2.png

After clicking ‘get started‘, you will then be led to a page with four different boxes. These boxes have different design layouts for your WordPress site. Because I have a lot of large images with a lot of text on my blog, I felt like the first box would be more appropriate. This option is completely up to you!

You are then led to a page which tells you to pick a theme. I chose theme ‘Twenty Sixteen‘ to start off with because I liked how it was set out, but you can choose any of the other themes available for now (or skip this step completely by pressing ‘Skip for now‘ at the bottom of the screen!)

Screenshot_3.png

The next step is to name your WordPress site. Here, again, is where you can pick anything you want! Although, it’s probably a good idea to make sure it isn’t something ridiculous! I named mine mindofaustin because the site is going to be about things that I make and publish, and is stuff that comes from my mind – therefore, mindofaustin seemed the most appropriate.

Screenshot_4.png

When making your WordPress site (unless you are willing to buy hosting) it is best to choose the first option (highlighted) because it is completely free!

Screenshot_6.png

The last step involves you putting in some information to make your WordPress actually belong to you – this is where you put in your email address, your username and a password. I won’t be showing these for obvious reasons!

Screenshot_7.png

Accessing your WordPress site

After signing up and confirming your email address, you will then be able to log-in to your WordPress account. This will bring you to the ‘Reader page – from here, you can see the posts of any other blogs you follow. To actually get to your WordPress dashboard, in the address bar at the top of your browser, you have to type in the name of your WordPress site with ‘/wp-admin‘ at the end – for example, mindofaustin.wordpress.com/wp-admin.

From your dashboard, you can make posts, approve, spam or trash comments made on your blog posts, manage media and change the settings of your dashboard. Also, from here, by clicking on ‘Appearance > Themes‘ you can change the theme of your site. I’m using free the theme Twenty Twelve because it suits the layout of my posts the best!

It’s all up to you from here! From your dashboard you control everything that happens with your WordPress, so feel free to explore! If you’d like me to look at your newly set-up WordPress blog, leave a link in the comments!

Nicole Austin, Leeds Trinity University

Contact me here!

Find me on Twitter here!

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!

 

 

 

 

 

Making-Of series: Levels & Colour Adjustments.

For my image creation course, I was given the task to take six photos and edit them using the ‘levels‘ and ‘adjustments‘ sections of Photoshop. The photos I took outside are local to where I live, and some are from my own home. Below are the photos before I edited them (click to enlarge);

Levels

Getting started

The first thing I did was open up my image in Photoshop by pressing ‘File > Open’. I located my photos easily with help from my structured folders (see my previous ‘Making-Of’ series post on folder structure!)

The first photo I’ll be editing is the old youth club photo. Here is a screenshot of my workspace before I start editing my photo:

Screenshot_1.png

Getting to work

The first thing I’ll be editing in the photo is the ‘levels’ – the levels tool changes the black and white tones in the image depending on how you move the cursor across the bar. Because this photo has some very light tones but also very dark tones, I will have to be careful when changing the levels. The levels tool is located on the far right of the screen under ‘Adjustments‘.

Screenshot_2.png                                                    screenshot_3

Clicking on the levels button will bring up the levels toolbox (as shown above) – this is where you can change the values of black and white in your image. In the above image of the levels toolbox, the levels are on their default setting. After playing with these settings, I decided that these are the settings that looked best to enhance my image:

screenshot_4

Below is my image before and after I added the levels layer:

Color adjustments

For this step, I will be editing the after levels photo. This adjustment follows on directly from the levels layer. The tool I will be using in this step is called the ‘Hue/Saturation‘ layer. This tool is found in the same place as the levels tool on the right of the screen in the adjustments section.

Screenshot_5.png

When using the hue/saturation tool, it can be easy to make your photos look too strongly coloured or even sometimes quite ‘tacky’ – when editing this photo, I aimed to make the greens of the grass brighter and the blues of the sky more noticeable but not drown out the whole photo in too much colour. Below is the settings before I changed them and the settings after I had played with them to make my photo look more crisp and bright:

Screenshot_6.png                                                      screenshot_7

Below are three photos – the first photo is my original image, the second is my image after I had added a levels layer, and the third is after both the levels layer and the hue/saturation layer.

 

Nicole Austin, Leeds Trinity University

Contact me here!

Find me on Twitter here!

Making-Of series: Folder structure 101.

For my university course, I had to create a folder structure in order to keep my work organised properly. To make a folder, simply right-click an empty space on the screen and choose ‘New > Folder’, or for an even simpler way, choose the ‘New Folder’ at the top of your document window (may be in different places depending on which version of Windows you have – I have Windows 10). Below I’ll be explaining step-by-step how I made my folder structure!

Step one

Firstly, I started off by creating a general folder structure for the whole of my university course. Below is a screenshot of my folder structure for all three levels of my course inside my ‘University work‘ folder.

1.png

Step two

Because I am studying at Level 4 currently (first year of university), I created my sub-folders inside the L4 folder. The subfolders I created are all modules that I am studying at university. For this tutorial, I will be showing my ‘MFC4342 Visual Branding‘ folder (highlighted) because it is the folder that contains the most work.

2

Inside this folder, I have two more folders labelled ‘Assignment 01‘ and ‘Assignment 02‘ which are specifically labelled for the two assignments that I have to complete in my first year of university. For the next step, we’ll be opening up the ‘Assignment 01‘ folder.

3

Step three

After opening the specific assignment folder, I created individual folders for the programmes that I would be using throughout the year. Doing this made sure that my work was organised, and this helped me when I was trying to find the file when doing work so I could open the specific folder instead of searching through hundreds of files aimlessly.

4.png

Below I’ve put a few more photos – these are extra screenshots of some of my folders with work inside them to show how they are also arranged into smaller subfolders (click to enlarge!)

Nicole Austin, Leeds Trinity University

Contact me here!

Find me on Twitter here!

How do you arrange your folders? Leave a comment!