Hemi Trenholm Banner

Tinkering with Photoshop

Hi again ūüôā

Bit of background – I have never really used Photoshop. In fact, the only thing I know how to do is re-colour things using the colour overlay option for blending layers. However, I do want to learn how to use the Adobe Suite as it seems to be one of those things the industry expects user experience personnel to be proficient in. Today I got tinkering with Photoshop and thought I’d share what I did.

I never intended to end up in Photoshop. Earlier in the week Moo sent an amazing sample of their new tailored business cards where I work and on a lazy Sunday afternoon I found myself browsing their site. I ended up downloading their Photoshop template and set about trying to design a card (which later I ditched in favour of a blog banner).

I started by colouring the background using the paint bucket tool and then created a new layer for some text. I love beautiful typography and get inspiration from Pintrest on a weekly basis, so it was only natural that I was going to grab a font from my board. I wanted an accent font that followed the brush script trend and eventually settled for Beacon. Then I tweaked with the rotation and spacing of the words until I was happy.

Work in progress

Background and accent font

Next I added another layer for my supporting text (another excuse for more typography hunting), and selected the simple Raleway. This is where I then had a ditsy moment, I couldn’t work out why I couldn’t see my text.

I had selected a light grey, which was¬†a different colour than what I had used for the background and positioned it so that it was the¬†top layer, but still I¬†couldn’t see it. I¬†ended up having to¬†ask my partner and he took a look and discovered that it was a simple problem caused by¬†lack of contrast. The grey I had selected was too similar to the background! After pumping up the contrast it was a simple job of aligning once again.

Work in progress

Adding the main font for header and body

That was all relatively simple but I was getting stuck in now so decided to try something else. I really love the gold foil effect at the moment (I blame Pintrest again for that) and hunted around on the net for a tutorial on how to make gold foil typography in Photoshop.

Work in progress - gold foil

Tweaking the gold foil effect

I stumbled across this gem from Dustin Lee and quickly began following his easy steps. However, I hit a stumbling block when my Filter Gallery was greyed out. After a quick Google I changed my colour mode from CMYK to RGB and I was away again.

After using the clipping mask, arranging my layers and final layout tweaks I ended up with this which I turned into a banner for one of my previous posts. I’m still not 100% sure about the placement of the secondary text and will probably tweak it a thousand times more but here it is for now…

Style Guide Banner

Style Guide Part One

I had great fun doing this and it’s definitely made me a lot less apprehensive to tinker around on Photoshop again. As you can see from the featured image I later went on to make a silver foil and am going to use my new skills to design my best friend’s bridal shower invites.

If you have any idea on how to use the Filter Gallery in CMYK mode or any other tips, leave me a comment below!

til next time
Hemi

Advertisements
Storyboard Re-design

Transforming Icons

Nearly ending my time at University and thought I would share with you a little something from my final year project, HexaPlauqe, that I completed with Alex Hussey.

One of our deliverable’s was to create a poster that showcased our idea. We decided¬†to create a storyboard to represent the¬†user’s story with icons. This is how we went about it:

  1. I decided to keep it simple with ready-made icons from The Noun Project where you can download icons for free with Public Domain and Creative Commons licences.

    Icon Attribution's

    Icons used in this project sourced from The Noun Project

  2. Then we edited the images using Photoshop, adding a Color Overlay to them.
  3. The first icon was ‘new city’, which¬†needed to convey wandering around a city and discovering places. Alex suggested a map based approach as seen below.

    Original New City

    Original New City Icon

  4. The next one to be created was ‘share your story’. Alex chose to overlay text on a building.

    Original Story

    Original Story Icon

  5. Then a ‘connect and explore’ icon which represented the user being able to read other people’s¬†stories about the place which¬†they¬†had just written their story for.
    Original Explore

    Original Explore Icon

    Learning how to make curved lines in Photoshop turned out to be very challenging. In the end we settled for creating curves in Keynote and placing them as images in Photoshop.

  6. Next up was a ‘favorites’ icon where users can choose 6 places they have previously connected to, to re-populate their home page.

    Original Favourites

    Original Favorites Icon

  7. A ‘see your connections’ icon which demonstrates the home page functionality of the app.

    Original Connections

    Original Connections Icon

  8. Finally there was a ‘discover places’ icon. At this point I spoke up and voiced my design ideas and came up with this:
    Original Discover Places

    Original Discover Places Icon

    This icon was very different to the other 5. Having looked at them I thought the background blue hexagon was acting as a frame, rather than being part of the icon. I didn’t think this looked right, the little hexagons inside looked lost, so for the last¬†icon, I¬†scaled up the white hexagons and had them bleed.

  9. This then prompted Alex to ask for my help re-designing all the other icons so they matched this new style, including adding captions.
  10. For the ‘new city’ icon I decided to mimic a street view, depicting perspective with positioning and re-sizing of the white hexagons into an arrow.
    Original New City

    Original New City Icon

    In a New City

    After: In a New City Icon

  11. For the ‘share your story’ icon,¬†Alex opted for a quick fix of just adding the caption, however, I still don’t like this one. It doesn’t ‘fit’ with the others because the inner hexagon is too uniform. By that I mean it makes the outer blue hexagon look like a border, rather than being part of the icon. Also, the text of the story doesn’t have an equivalent in any of the others, so again, looks odd.
    Original Story

    Original Story Icon

    Share Your Story

    After: Share Your Story Icon

    If I was to re-do this one I think it would look something like this:

    Share Your Story

    Future: Share Your Story Final Icon

    Here the inner hexagons bleed, filling the outer hexagon making it look all part of the same icon. Then I’ve opted for 3 images – the user, the building and a story being written. Hopefully this conveys the message and fits with the other designs. What do you think? How would you redesign it?

  12. This one reminds me of a football, but hey, I think it works a lot better! By re-sizing and re-positioning, the content now fills the outer hexagon rather than being dwarfed by it.
    Original Explore

    Original Explore Icon

    Connect and Explore

    After: Connect and Explore Icon

  13. This ‘favorites’ one just needed to be bigger to fill the space and have its¬†overlay and caption added. The 50% blue overlay really helps to tone down the white, and once again make the content feel like it belongs to the outer blue hexagon. Also tweaked the rotation to stop it from becoming too uniform (hexagon inside hexagon), so¬†now the content¬†benefits from¬†irregular spacing around the outer edge.
    Original Favourites

    Original Favorites Icon

    Choose Your Favourites

    After: Choose Your Favourites Icon

  14. This one I decided to re-arrange the positions of the hexagons to give a more organic feel which is more representative of the app’s home page.
    Original Connections

    Original Connections Icon

    See Your Connections

    After: See Your Connections Icon

  15. Since we added captions to the others we changed the action ‘buzz’ to ‘discover places’ so it fitted with the collection.
    Original Discover Places

    Original Discover Places Icon

    Discover a Place

    After: Discover a Place Icon

Here are the collections in full so you can see the transformations!

The Original 6

The Original 6

The Final 6 Filled

The Final 6

These were then used on our first draft poster which was changed many times so unfortunately these icons don’t appear on the end storyboard. However, I hope this post showed you how a little re-sizing and re-positioning can transform your designs in a matter of minutes! Let me know what you would have done differently ūüôā

til next time
Hemi