Netprotocol Banner designed for Legal IT Show

POSTED AT 10:52 on 13th February 2008

As part of an annual event, the Legal IT Show which is Europe’s premier software and services events for the legal profession, I was asked by Netprotocol to design for their stand the artwork for their banners. Below is a photograph of what was produced:-

EyeMagineMedia Advert / Design Process

POSTED AT 12:51 on 29th January 2008

This post looks specifically at a quarter page print advert I designed for myself and the thinking behind the design process that made the final published advert. The nature of the advert was that it was going to be placed within January’s edition of a local magazine in the area which promotes other businesses and what is going on within the community. My purpose for the advert was mainly from a marketing point in terms of making people aware of my brand and the services I offer.

The Initial Design

The initial design was based upon existing branding that I use on all artwork I produce for myself. In using the artwork I have already produced on other designs I would be maintaining consistency, yet also I knew with the vibrant and bold colours that I use it would make my advert prominent within the page. This was important as since the advert was only quarter of a page I knew that I would be sharing the page with 3 other adverts and that therefore I would be competing with others.

The key elements that I felt needed to be used when creating the advert were the brand, the key message, the slogan and the contact details. I necessarily began by working in photoshop in order to get a general layout in place that I could build upon. Admittedly my first attempt showed that I still had alot of work that needed to be done.

Fine Tuning

Moving on from the initial design I then began to work on analysing what was there and looking to refine it.

My first thought when looking at the design was that it definitely contained too much text within it. Whilst a nicely designed advert is key to getting noticed, content is very much king. You have to consider that the audience is likely only to spend seconds glancing at the advert so getting your point across is paramount. A consideration also had to be made on the size of the advert as a quarter page advert on A5 doesn’t give much room for lengthy paragraph. From looking at my key message on the page I changed it to “2008 Time For A Change” which I felt was better as it provided a “call to action” statement instead of just being a greeting.

The next problem I had was with my slogan, as baring in mind my brand isn’t establised as opposed to something like Adidas, Coca Cola, McDonalds, etc I had added the slogan as a way of letting the audience know what I do. I worked on different variations of condensing the slogan which basically used the keywords, web, print and design. I eventually settled with web | print | design as I felt that this worked in terms of the best order and was less wordy than web design | print design.

At this stage I began to work more on the colour, size, positioning and the layout of the elements. Admittedly I left the positioning of the elements unchanged (key message, logo, slogan, contact details) as this was in terms of a hierarchy how I saw the elements in terms of importance. By creating the key message in a larger font, using a colour that produced high contrast and the fact I used capitals was the way I was going to draw the readers attention to this first. Then by decreasing the other elements in terms of size and colour this would help the eye to flow down the page.

I necessarily at this stage played around with many versions of the advert trying to get it to look right.

The Finished Advert

My final tweaks before it being published was to change the size of the key message to reflect the same size of text as the logo. By doing this I rearranged the elements to have much more room around them which would then appear more spacious and better on the eye. I also removed my email address and just displaying my web address which would be adequate for readers if they wanted to find out more or how to get in contact further.

Another tweak was to add drop shadow to 2008 within the key message. I did this specifically as at the time of it being published in 2007 people wouldn’t be used to seeing 2008. Therefore by highlighting it more it would bring the year more to the attention of the reader.

Conclusion

At this time the advert has recently been published/distributed and I feel pleased with the end result. I feel the key to producing the advert is by using good design in order to attract the readers attention whilst also using techniques to help maintain it and by being clear and concise with the content in order to give them all the information they need without having to work hard and spend lots of time on it.

How to create a screenshot with a border and rounded edges in Photoshop

POSTED AT 11:10 on 21st November 2007

This post is inspired by a colleague of mine who wanted to know an easy way in which to get a screenshot to have rounded edges to the screenshot and a border around the image also. As I have learnt throughout the years there are many ways in which to do things within Photoshop, in my opinion its not a case of which is right or wrong yet basically whatever you feel more comfortable with. This is a tutorial on how I would achieve the following question:-

1. Create a new canvas

The brief within this particular scenario was that the box needed to be 100px x 100px yet potentially you just need to create the canvas to the size in which you want the box to appear in.

2. Add the rounded rectangle

Using the rounded rectangle tool within the left hand toolbar I basically filled the canvas to fit the rounded rectangle.

3. Create new layer

The next step is to then create a new layer above the existing layer created. The important thing to remember doing when carrying this out is to check the option ‘Group with Previous Layer’.

4. Paste screenshot or photograph

Once the new layer has been created, find the screenshot or photograph you require from a separate file and then copy and paste this picture within the new layer. What you should notice is that the rounded rectangle works as a template for the photograph and therefore is what produces the rounded edges.

5. Add the border

The final stage requires you to select within the layers area the layer which contains the rounded rectangle created earlier. Once you have selected this layer, right click and select blending options. All you then need to do is select the Stroke option, selecting the position to be inside and stating a value for the size of the border and a colour.

Conclusion

What you should find by the end of this tutorial is something that looks like the graphic above.

Why size images correctly in Photoshop rather than using HTML markup?

POSTED AT 19:39 on 19th November 2007

This question seems to come up time and time again so I thought I would provide an answer to it. Have you ever been to a website whereby a tiny thumbnail has taken ages to download or possibly an image appears distorted whereby you can tell that the image has been squashed either vertically or horizontally in order to fit into the page structure? These are 2 errors that are quite commonplace on the web yet needn’t be.

Downsizing Graphics 

The first issue ie whereby a tiny thumbnail has taken ages to download is something I usually find when people use content management systems and have the ability to upload images to the server. The problem occurs because they upload the graphic and then use the controls in which to manipulate the width and the height of the image. See the 2 graphics below:-

The first image is the picture of a padlock yet was 500px x 333px in size yet has been reduced to 200px x 133px. The other image next to it is exactly the same image yet has been reduced using photoshop, saved and uploaded as an image which is 200px x 133px. When looking at both images you should notice that their is a difference in terms of picture quality. The first image appears to be more distorted which is down to the way the browser handles resizing the image. The other key point is within the difference of file size whereby the first image is 63Kb whilst the second is 13Kb. The reason for this is that although the image has been resized to look smaller the file itself doesn’t lose any file size, therefore this means it will take almost 5 times as long to download the first image than the second. This is an important factor when you consider that if you’re site contains many images within them, then not compressing your images properly could cause the page to take longer to load then it really needs to.

Made to Fit

The other issue I want to look at is whereby an image used appears distorted in terms of size ie like it has been squashed. This kind of issue I’ve seen is mainly within ecommerce or catalogue sites which require images to be uploaded to specific proportions. I’ve also seen it when someone has decided to try and get something to line up nicely so they try to decrease some pixels off the width or height so that it fits. Personally I think that there is nothing worse than seeing an image which has been distorted out of all recognition and basically looks unprofessional. I have created an example showing the above image made to fit to 100px x 100px

If you can imagine the above images used within a site, surely it is better like the second image to crop the image to the correct sizing and lose some of the image as opposed to trying to squeeze everything in there like the first image which gives an incorrect view of proportion, again provides distortion and also there is a difference again in file size.

Basically both of these 2 examples above illustrate the need to size images correctly. Although it takes slightly more time to implement as opposed to quickly changing the code, the benefits of doing so in my opinion is so much better and certainly helps to a more quality image as well as a more professional look to a site and is beneficial in terms of document weight.

Create a simple text reflection using Photoshop

POSTED AT 12:25 on 12th November 2007

This post is a simple tutorial on how to create a simple text reflection with Photoshop ie something similar to what appears on the EyeMagineMedia website. This tutorial assumes that you have some basic knowledge of using Photoshop.

Step 1

Create a new document ie go to File > New then chose width and height ie i chose width: 300px and height: 100px and then add some text using the normal text tool within that area.

Step 2

In the Layers window right click on the text layer just created and select to create a duplicate layer.

Step 3

Proceed then to go to the top menu and select Edit > Transform and select the Flip Vertical option.

Step 4

If still highlighted on the new text layer created, use the horizontal keys to align that text below the original text created. At this point within the layers window select the lock transparent pixels option to that layer. Also right click on the layer and select the Rasterize Layer option.

Step 5

Then using the Gradient option from the left toolbar (you may need to click on the Paint Bucket Tool in order to grab this option) making sure that the foreground colour matches the text and the background colour matches the background and then vertically add the gradient by clicking from the top of the lettering and stopping when you reach the bottom of the lettering.

Step 6

Finally whilst the layer is still selected in the layer window, play around and change the opacity of that layer until it looks faded practically into nothing.

That is all there is to it. You should find you end up with something similar below.