Frog's Digital Design Blog » photoshop

What is the difference between a Font and a Typeface?

Gary Hartley — Tue, 15 Dec 2009 22:01:59 +0000

Aren’t they the same thing?

After being shot down by an over enthusiastic designer for calling a typeface a font to a client over the phone this particular developer would now disagree. You see to Joe Bloggs A type and a Font are the same thing, to a developer it’s like saying a Gerbil and a Hamster are the same thing. To them they’re both a small, furry and sometimes smelly caged pet. A designer of the other hand is a little pickier when it comes to detail, after all they are trained to look at the smallest details. He would say to the developer..

“A Gerbil is nothing like a Hamster, Hamsters for a start like to live alone and seem to wake up when you go to sleep. Gerbils on the other hand are the complete opposite, they are happiest in groups and love being active, chewing and gnawing at the bars till you play with them.”

So yes, fonts and typefaces are technically different though relate to the same thing.

What is a typeface?

Think of a typeface as the ‘design’ of the design of the alphabet, the shape of the letters that make up the typestyle. The letters, numbers, and symbols that make up a design of type. So when you say “Arial” or “Garamond” you’re talking about a set of letters in a specific style, a ‘typeface’.

What is a font?

Think of a font as the digital file that contains/describes the typeface. Think of the font as a little piece of software that tells the computer and printer how to display and print the typeface.

Adobe’s type glossary description

According to Adobe’s type glossary: “A font is one weight, width, and style of a typeface. Before scalable type, there was little distinction between the terms font, face, and family. Font and face still tend to be used interchangeably, although the term face is usually more correct. A typeface is the letters, numbers, and symbols that make up a design of type. A typeface is often part of a type family of coordinated designs. The individual typefaces are named after the family and are also specified with a designation, such as italic, bold or condensed.

F*** you designer snob!

Next time you encounter a stuck up designer who likes to take every opportunity to correct you on design related jargon, just think, here’s one small dollop of typography info to counter his attacks. I’d be so blunt as to knowingly misdescribe the font/typeface then counter his verbal nonsense with your new found knowledge.

Time to brush up on your typefaces

Check this out…Typeface Periodic Table

What’s your favorite Typeface and why?

Now if you don’t comment below we’re going to presume it’s Comic Sans and you wouldn’t want that would you?

Quick Photoshop Tip: Save Space By Turning Layers Off

Gary Hartley — Tue, 15 Dec 2009 07:52:53 +0000

Photoshop files (PSDs) can be huge in file size, especially if you are working on a large format high resolution file. Here’s a quick tip that can save you valuable HD space, anywhere between 10% – 90%, simply by turning off layer previews when you save.

Before you save

It’s best to organise your layers in groups and delete any unwanted layers before you save. This isn’t a crucial step but it can drastically reduce the size of the PSD when saved. To do this header on over to the layers palette, click the icon in the top right corner and click ‘Delete Hidden Layers’ (shown below).

Turn layers off

Now that your layers are tidy and organised it makes this next step easier. To the left of each layer you should be able to see an icon of an eye (shown bottom left image), simply click on each eye icon to hide the layers (shown bottom right image).

Compare file sizes

In theory the PSD with layers hidden should be smaller in file size than the same file but with layers shown. The graphic below is an illustration showing the same PSD with and without layers shown. In this case the file with layers hidden is over 50% smaller in file size than the same file showing the layers.

Is it right for you?

In most cases yes. Personally I use the approach on backup versions of a design only. I tend to keep the layers in an active working copy shown for speed. If I get to version filename-01F however, I’ll use this approach in all previous files, A through to E. Finally once the project is finished I will ZIP up the folder, after erasing all unnecessary layers and archive them away. On one project alone I ran through 13 PSD versions and saved a total of 2.3GB in disk space with this technique.

If you have any questions please feel free to leave them in the comments below, I’d be more than happy to answer them.

In the spotlight: Irene Zeleskou

Gary Hartley — Sun, 12 Apr 2009 19:48:46 +0000

Continuing our In The Spotlight series, where we showcase the talents of others, we present to you Irene Zeleskou, or as her fans know her as FTOURINI on Deviantart.

We focus on a recent collection she has just finished called Zodiac Eye Calendar where she demonstrates a professional skill of makeup artistry mixed with a blend of Photoshop trickery. If you like the calendar you can purchase it from the Deviantart website for a very reasonable price.

Zodiac Eye Calendar Series by Irene Zeleskou

Click thumb to enlarge

Want to be featured? Write to us by emailing frog @ thefloatingfrog.co.uk with examples of your work.

New Photoshop Interface Revealed

Gary Hartley — Mon, 26 Jan 2009 12:06:04 +0000

Adobe revealed their new ‘traditionally themed’ Photoshop interface this week at their annual AdobeExpo. The drastic redesign has come after months of highly publicised campaigning by angry Anti-Adobe protesters who state that their current interface is “harming our planet”, and “is turning our young generation into mindless web2.0 obsessed vombies”.

A spokesman from Adobe said “This new redesign will revolutionise the way we design in the future. The new sophisticated layout and intuitive panels will help modern designers leave the world of Web2.0 behind and thrust the web into a new place, a place where animated GIFs will live happily with PNG’s and Serif fonts.”

Bill Bates, leader of the Anti-Adobe interface movement said… “It’s about time! I’ve always been a fan of Adobe in the past but when their new interface was released in 2002 I knew this would cast dark shadows over the traditional design era. Web 2.0 on the web is a direct result of that interface so we knew it had to go!”

He continued…

“Next is Microsoft 8′s new interface, it just sucks, and if left to spread amongst our unprepared nation we’ll all turn into f***……” *Interview cut short.

Let us know your thoughts, can this new interface really eradicate Web 2.0 from the web? Can this new interface really improve the quality of designs. And most importantly, would you pay £1,250.00 for the luxury?

Click to enlarge

Credit:Advertising Agency: Bates141
Creative Director: Hendra Lesmono
Art Directors: Irawandhani Kamarga, Andreas Junus
Copywriter: Darrick Subrata
Photographer: Anton Ismael
Published: August 2008

If Cadbury merged with Nestle

Gary Hartley — Wed, 21 Jan 2009 14:58:13 +0000

In a messed up world what would happen if Cadbury merged with Nestle. Even better, what would the packaging look like if you merged them… well! If you like please share this with your friends

Original source found by readers so we can now give full credit to the source.

The Global Credit Crunch – it’s not all bad news

Motivational Posters made easy with this Photoshop Action

Gary Hartley — Wed, 31 Dec 2008 10:47:24 +0000

You’ve seen them before, funny motivational posters that make you ‘ROFL’, ‘LOL’ or erm…. just giggle… yeah well here is your chance to make your own. This easy Photoshop Action turns any plain picture into one of these posters, with the same styling as the one below. Once complete simply enter your own title and text beneath and you’re done. If you need to know how to install a Photoshop Action read this tutorial.

Photoshop Action Preview

This is one I created earlier of my partner Zoe.

Download Motivational Poster Photoshop Action >

Credit to Action creator: Bellorinna on DeviantArt

Using Actions in Photoshop

Gary Hartley — Tue, 30 Dec 2008 17:21:37 +0000

This tutorial will teach you how to use actions in Photoshop CS. An action is a set of commands Photoshop will execute once you click the play button on the actions palette.

Depending on the action you can achieve results automatically by doing little or nothing yourself. Photoshop comes with a default set of actions that you can start to experiment with but you can download others from the web by performing an appropriate search for them.

Step 1

To open the actions palette, go to Window and click on Actions or press Alt + F9. This will open a new palette.

Above you can see the Actions palette. Mine doesn’t have the standard set but yours probably will if this is the first time you have opened it.

Step 2

Actions are organised in folders, each folder can contain multiple actions. To see what’s inside a folder you click on the arrow in front of the folder icon. A list will drop down showing all the Actions.

Step 3

To execute an Action you must first select it in the list of Actions. Then you click the Play button and the action will be executed. Make sure to use a copy of your image before trying out an Action.

Step 4

So you have downloaded some new Action sets but now you need to get them into Photoshop to use them.

If you want to load Actions you have to click on the little blue round button with the arrow in the Actions palette itself. Now you are shown a drop down menu like the one on the right. From this list select Load Actions.

A navigator window will pop up where you can select the downloaded Actions from the download location. A Photoshop Actions set always uses ATN as it’s extension. Now select the Action and click Load.

Once you have down this a new folder will appear in your Actions palette which you can select and use. That’s all folks, enjoy!

Fresh new design, come and have a look

Gary Hartley — Mon, 01 Sep 2008 11:41:17 +0000

We stayed up into the early hours of the morning to bring The Floating Frog a swanky new design. It’s a bit brighter, a bit wider and has a few more features. Let us know what you think

WordPress theme for piggynap.com

Gary Hartley — Fri, 22 Aug 2008 08:01:19 +0000

This evening I finally got round to implementing a new WordPress theme for piggynap.com. It wasn’t a full theme build this time but it still took up the best part of my evening. I’ll be interviewing the owner of piggynap.com over the next few days so watch this space.

St Annes Community Services

Gary Hartley — Wed, 30 Jul 2008 20:43:10 +0000

As a designer I’m sometimes asked to design speculative concepts to accompany quotes and tenders. This is work we are simply pitching for so the design has to impress the potential client or else we simply won’t get the job. These jobs can be quite tricky because not only do they have to look good, you have to balance this with how much time you can spend on it, after all it’s unpaid work.

The client?

St Annes Community Services

St Anne’s was formed originally to work with people who were homeless and excluded. Our first service was shaped around what these people said they needed. This focus on service users being central to what we do and how we develop is core to what we do today.

We now provide a range of services for people who have experienced homelessness, mental health problems, problems with substance misuse or who have a learning disability throughout Yorkshire and the North East of England.

From our small beginning in 1971, the organisation has grown and developed to become a major provider with a turnover of some £30m and employing approximately 1200 staff.

Well it ok really. Sure it’s seen better days but all in all it’s not doing the charity any harm. They already have a logo which has to remain, their color scheme is blue and yellow which also can’t be changed and they have alot of copy and images I can play around with. Not bad to start with at all.

Frog's Digital Design Blog » photoshop

What is the difference between a Font and a Typeface?

Aren’t they the same thing?

What is a typeface?

What is a font?

Adobe’s type glossary description

F*** you designer snob!

Time to brush up on your typefaces

What’s your favorite Typeface and why?

Quick Photoshop Tip: Save Space By Turning Layers Off

Before you save

Turn layers off

Compare file sizes

Is it right for you?

In the spotlight: Irene Zeleskou

Zodiac Eye Calendar Series by Irene Zeleskou

New Photoshop Interface Revealed

If Cadbury merged with Nestle

Motivational Posters made easy with this Photoshop Action

Photoshop Action Preview

Download Motivational Poster Photoshop Action >

Using Actions in Photoshop

Step 1

Step 2

Step 3

Step 4

Fresh new design, come and have a look

WordPress theme for piggynap.com

St Annes Community Services

The client?

St Annes Community Services

The design