April 29

Tags

Portfolio Design! Who, What, Why?

This was originally written for my original portfolio design, which was substantially different to the one I have now. However, the same theme and colour palette is still in use, as well as the same logo, so this post still is relevant!

You can check out a newer post, which looks at the different styles this portfolio went through, by clicking right here!

I’m a stickler for consistent design and themes when it comes to websites and indeed anything I make. Therefore my portfolio had to be no different! But there is actually somewhat of a story behind the design, and of course a lot of thought processes went into the final product.

LilPanda
It’s a red panda, btw.

Where did this come from?

Back at University we were tasked with creating a small Indie studio and pitching a game concept for one of our final projects. During this group project I functioned as the Creative Director of the game itself, as well as Lead Artist in creating all the art assets for the project and for the company itself.

While sat in Pandon Basement trying to think up of a company name and logo, I wanted to do something relatively unique and different. And so I thought about what animals I like. But during this process I was alerted to something quite extraordinary, sent to me by man I will one day thank for any/all success I ever have.

Bears. Waving. It changed my life.

From there, I was able to cobble something together, combining the 3 of us in the group with some creative flair and the fact we wore glasses and Bears In Glasses was born!

smalllogo

Notice a similarity?

It took a relatively short time to create using Adobe Photoshop and Illustrator, and that logo and general colour scheme would become the backbone of the entire project, with us going so far as to order t-shirts with the logo on to wear while delivering our presentation. It was partly inspired by Converse logos, a Varsity theme, as well as myself liking the idea of a “sticker” in the corner of our work.

I loved the concept and our tutors found it humorous as well. And all was good!

Now cut to now, when I was designing my portfolio. I still loved (and continue to love) the name and art of Bears In Glasses, and so my portfolio emerged as “Bear In Glasses”, and thus the overall premise was solidified.

LogoTest2

A bear in glasses. See what I did there?

What is it?

I suppose “it” means the little guy in the centre of the logo. That would be a red panda! Which I feel is an animal which describes me very well; it’s small, orange, and if you have a banana then I will slowly climb up your leg in order to get it and then eat it while sat on your shoulder. I should stop doing that but I just really like bananas…

The colour scheme came from a colour scheme I initially enjoyed back when I wrote my Dissertation for University, which was the bright orange against basic dark greys and light greys. I liked the bright contrast of the orange, but it didn’t get in the way of the content being easy to read and consume. So I wanted to continue that colour scheme here.

How did you make it?

I created everything you see in the portfolio using a combination of Adobe Photoshop and Adobe Illustrator, and every image was created with a “template” in mind to allow fast and easy creation of additional graphics without them lacking the same general theme.

The actual red panda himself (who I will have to give a name eventually…) was created by using the tracing feature of Illustrator to convert the quite small bitmap into a vector, which enabled me to scale it up in size. I did the same for the glasses.

The rest was then done in Photoshop. I started by making a basic polygon circle and added a border on the inside of it, and on the outside. I then duplicated it, made the duplicated circle the orange colour, and halved it to create the two-tone background of the sticker.

When it came to the actual content, I used a colour overlay on the panda, making him entirely orange, and added a 5 pixel white stroke. I did the opposite of this for the glasses; the overlay was white, and stroke orange. This allowed me to move and re-size the images freely and they slotted quite well into the already created background.

layers1

A quick look at some of the layers, all sharing the same stroke/overlays.

This colour overlay and stroke was done, as mentioned above, so that no matter what was moved around it would always look like it fit in the image rather than, say, erasing the area around the panda to give it the white outline which would have caused problems if I moved him.

The image was relatively complete but missing something. Therefore I did the stripes you see now, coming from the center, and did the same overlays and strokes on them and reduced their opacity to just 20%. This gave the icon a little more “oomph”, but not too much so as to look cluttered.

Finally the text was added using the same styles, but the top half of the image was impossible to add text to without it being blocked in a manner that would have been too large. A basic arc of 100% was added to the top text to make it curve; I knew 100% would make it fit perfectly as the circle itself is a perfect circle.

warptext1

Warping Text is the new Wordart

The last thing I did was the sticker portion. For this I applied the image and duplicated it into another canvas, made a basic block and placed it diagonally against the image. Then it was just a cut, and then flip both horizontally and vertically in order to position it perfectly. I simply had to use an eraser to get rid of small artifacts left behind.

And voila!

And the rest?

I then started to make a variety of templates for different headers and ensuring they were easily customized and it would not be difficult to create more. This was very important! So I began with headers, creating a very simple template that could be used, and then this was kept as a priority top layer and then all design can be added underneath.

I also did the same for game reviews, which is something I am looking to do. So this was, again, about creating a template and enabling the creation of consistent headers be made very easy.

You can see the template consistently on the front.

To create the additional images that you see, this was done in the same way that the panda was created, with just colour overlays and turning them into vectors to ensure a smooth design.

And after changing some of the basic colours of the website, that is my portfolio’s design completed!