Archive for February, 2008

Pulp Fiction typography wallpaper

Posted in freebies, work with tags , , , , , , , , , , , , on February 21, 2008 by petemarshall

Pulp Fiction header image

The latest piece out of the studio is an experiment with typography, inspired by Quentin Tarantino’s movie, Pulp Fiction, and the superb typography animation of What Does Marsellus Wallace Look Like? on YouTube.

The text in the image is a excerpt from the script, and you can gauge the tone and volume in which Samuel L Jackson performs each line by the emphasis placed on the typeface.

I’ve produced this as a wallpaper and created range of sizes to suit the majority of screen resolutions for use as wallpapers, if you’d like to use it on your desktop feel free to click your screen resolution below to open the image in a new window.

PC users can right click the image and select Set as Wallpaper, Mac users can drag the image over to their hard drive, Ctrl click on the desktop, select change desktop background then find and select the image from the hard drive.

Normal Screens:

1024 x 768

1280 x 1024

Widescreens:

1440 x 900

1920 x 1200

Hope it looks as nice on your screen as it does on mine.

iPhone photoshop template

Posted in freebies with tags , , , , , , , on February 15, 2008 by petemarshall

iPhone header image

Download the PSD source file.

Well it’s pretty late on a Friday night and I really should be out drinking but I’ve just got my internet sorted in my new house so thought I’d take the opportunity to post this photoshop template for you all which I created earlier today.

I saw a site a while back when the iPhone had been recently launched which allowed you to type in a url and it would show you how the site looked on an iPhone, pretty cool. Once I saw this I thought it could be an interesting way to present design concepts for mobile sites to clients, or to put a photo of me or my family in and make it into a desktop wallpaper.

The easiest way to do this would be to just overlay a photo on an existing shot of the iPhone, but you wouldn’t get all the date and time overlays which would add that realistic polished effect, so finally I’ve got round to creating a PSD where you can simply replace the masked image and export to any file type you like.

Download the PSD source file.

Once you’ve downloaded the psd, to change the image on the screen of the iPhone simply paste your image onto the layer highlighted below.

layers example

Hey presto your design, photo or any image you like is in and can be exported to any format you wish.

Why not put a slide show in there?

If you have some very basic flash skills it is easy to put a slideshow or flash movie into this template too.

Simply turn off the background layer, green mask and editable image layers and save as a 24 bit png (WITH THE TRANSPARENCY BOX CHECKED), import this into flash and create a mask the size of the iPhone screen on the layer below and put your movie into that mask.

Good luck and I hope this template will be of use to some of you, if it is let me know and add links to your results in the comments.

8 Steps to crafting a great portfolio

Posted in Articles with tags , , , , , , , , , , , , on February 8, 2008 by petemarshall

folio image

Whatever field it may be, graphic, web, interiors or art direction, a designer is only as good as their portfolio, I’m sure you’re most likely aware of this else you wouldn’t be reading this post. I’ve seen a fair few portfolios in my career as a designer, some breathtaking, making me green with envy, some appalling, making me wonder why some designers are in the game at all.

Your folio, book, reel, or whatever you like to call it is your chance to shine whether it be in front of a potential client, an interviewer or friends, your primary aim should be to impress. If your folio isn’t getting you much work, you’re turned down from every interview you go to or you just feel isn’t up to scratch here’s my 8 tips which will help add some polish to what should be your pride and joy. I’m not saying these will guarantee you getting work but they will certainly add some strength to your folio.

Most of these tips are based on the principles used in creating my own portfolio which can be found at DesignFreedom

Step 1: Let the work do itself justice

I’ve seen many folios where it is evident that more time has been spent on the folio itself than the work within it, this tends to apply more to the digital area than any other.I’m a firm believer that when presenting designs they should have their own space, if you have an over stylized portfolio it is likely that not every design you will produce will look right within it. Let the work do itself justice by not giving it a fussy casing to sit in.

As designers we are always telling clients not to be afraid of white space, here’s a chance to practice what we preach.

Step 2: Simply the best (It’s quality not quantity)

We all know first impressions count which is why and it sounds obvious, a portfolio should only contain your best work. I’ve seen many an overloaded folio which has some great pieces that have been padded out with average work just to make it look bigger.

In my opinion this drags the better pieces down, I’d much rather just see 3 great pieces of work than have to trawl through a load of mediocracy to find them. Take pride in your best pieces, present them cleanly and discard your mediocre work.

Step 3: How many pieces?

There is no reason why a folio should contain more than 10 pieces, by all means every time you update your folio archive your work and have it ready to show if anyone asks for more, but you are never going to talk through more than 10 pieces and give them justice in the space of an interview or meeting.

Some people wont want you to talk them through your folio or you wont be there when they look at it, and 10 carefully selected pieces will provide enough to wet their appetite to know what you’re about, leave them wanting more and they wont get bored flicking through loads of pages.

Step 4: what order to put them in

This is a little bit of a tricky one as it will depend on what format you are presenting your work in, if it’s in a printed folio then I’ve always been brought up on the principle of placing your best pieces first and finishing with one last ‘hot’ piece which seems to make sense, first impressions count and leave them wanting more.

If your folio is online then its a little more tricky as the user has a lot more control over the order they choose to view your work, I’ve displayed mine with thumbnail teasers to each piece enticing the user to click on something that interests them, others I’ve seen organised chronologically, others by brand. As the user has so much choice the key thing is to make the folio simple and easy to navigate.

Step 5: Be contactable

If the person looking at your folio is anything like me they will have cast an eye over your C.V. (if you’re lucky) and cast it aside to browse your work, which is why it is critical your portfolio has your contact details on that are easy to read. In a printed folio they should be at the beginning and the end and also on the casing. At the bare minimum there must be an email address, and a phone number is a good idea if you don’t have constant access to your email. You want to make it as easy as possible for a potential employer or client to get in touch.

Step 6: Explain your work

Whilst designs need room to breath and be presented simply they do need to be put into context, I’d suggest including with each item a text based description, stating the client, the project, the brief, and why the solution fits the brief.The key is to keep this short and sweet, no one wants to read reams of text, I’m amazed you’ve stuck with this article to step 6, (thanks for riding it out) a brief description will allow whoever is viewing the folio to get some understanding of why the design is as good as it is rather than just saying ‘My, doesn’t that look pretty’. This is especially important when you aren’t present to explain the thought process behind each piece.

Step 7: Credit where credit is due

The chances are you’ve worked as part of a creative team on a piece of work particularly if it’s in the digital sector. Don’t be afraid to include these projects however ensure you make it clear which part of the project you were responsible for and credit the agency you were working with when it was produced. People like to see you are able to work as part of a team.

Step 8: Keep it up to date

This is probably the hardest step, but finding the time to keep your folio up to date is crucial, so as when you get that call or your dream job pops up out of nowhere, you wont have a mad panic trying to cobble together your most recent best bits, you simply grab it off the shelf or email the link, meaning you are always confident that your best work is instantly accessible to anyone. I try to update my folio every couple of months, to keep regular visitors to my site interested, and keep a track of work that I am proud to have produced.

As mentioned this isn’t an easy thing to find the time to do but it really is worth setting aside a day every month or two to do this, it also offers the opportunity to take stock of what you’ve achieved and see how you are developing as a designer.

Links

One of the hardest tasks a designer faces is their own website, so here’s some folio sites I like which may provide some inspiration.

DesignFreedom

Hydro74

kokokaka

Dogo

Ripley & Ripley

Well thanks for reading, and good luck. Feel free to comment and share links to your great folios.

How to create a favicon in photoshop

Posted in tutorials with tags , , , , , on February 6, 2008 by petemarshall

ps tutorial

Online conversion tools for creating favicons such as Flavicon are useful and very clever, however they can be a little laborious, especially when you can create one straight out of photoshop.

(I’m not going to go into animated favicons as personally I think they look pretty cheap and tacky.)

favicon placement

So you’ll need to install the Windows Icon (ICO) file format Photoshop Plugin which is available for mac and pc and you can download from Telegraphics, this will allow you to open and save files with the .ico extension.

If you already have a logo design, then create a new document 16px x 16px, place your logo onto the canvas and resize to fit, it’s tempting to make your canvas the dimensions of the logo but don’t do this as the browser your site is displayed in will stretch your icon and not please anyone, it has to be square. If your logo isn’t square then you will have to leave some whitespace to the sides or the top and bottom.

If you don’t have a logo designed or you are creating a specific favicon which is different to the sites logo then a 16px x 16px canvas isn’t going to be the easiest size to work with so create a document at 64px x 64px and create your favicon, once complete you can then go in the top menu, find IMAGE > IMAGE SIZE and scale your image down to 16px x 16px as the diagrams below indicate which were made for my portfolio site DesignFreedom

favicon example sizes

If you think your icon needs transparency simply unlock and hide your background layer, follow the next steps and it will save with transparency.

Once you have your 16px x 16px design go to save as command in the file menu and give the file the name ‘favicon’ and now that you’ve installed the .ico plugin the .ico (Windows Icon) option should now appear in your file formats list as shown below, select this and hit save.ico save image

Hey Presto, you have your favicon, to make it active on your site simply place in the same folder as homepage (index file) and let it hang loose, make sure you don’t place it in the folder containing all your other images.

This is all you will have to do for most modern browsers to display your favicon, however some browsers will need a helping hand so install this into the header tags in your html code <link rel=”Shortcut Icon” href=”/favicon.ico”> this will need to be done on all the pages you wish to display the favicon.

It’s worth mentioning that some older browsers won’t display favicons, so only users using more up to date browsers will see your beautifully crafted work, but it’s a simple and quick process so worth doing to enhance the appearance of your site for those users who do see them all the time.