Monthly Archives: April 2017

Ultimate Web Design Workspace for Photoshop

The Ultimate Web Design Workspace

In this post, I outline how I have personally set up my web design workspace and why I have found it to be the most productive layout for producing web work since I’ve started using Photoshop. Take note that I am using a 27″ monitor at 2560×1440 resolution though this layout should work on monitors 17″ and up.

1. Document Set-Up

This is where the magic happens, the blank canvas. I usually start with the 960 GS and set the width at 1400 pixels. The main Photoshop tools are still on the left (by default) with the canvas in the middle and the other windows on the right of the screen.

2. Layer Comps

If you’re not using Layer Comps already and you’re working as a designer, you’re mind is about to be blown. This isn’t the place to give a tutorial on them but having them in your workflow is pretty much essential, as it saves hours of time. Layer Comps are also very handy for putting together a presentationsvia the ‘Export Layer Comps’ script.

3. History & Snapshots

The History window allows you to go back in time based on every change you make. I usually have my history settings set at the default of 20, but often take ‘Snapshots‘ so I can easily come back to previous states with a simple click. Take note that snapshots do not save with the PSD.

4. FontShop & Extensis Web Font Plugins

FontShop & Extensis allow you to view and use web fonts right within Photoshop. I only click this icon when needed as it often can slow PS down. Also, take note for Extensis you will need the Suitcase Fusion font management software, which is available for 30 day trial.

5. Folders & Layers

A large Layers window allows for easy scanning and organisation which boosts productivity while designing. I break down each ‘page’ down into 4 general folders; Header, Content, Footer & Background.

I also have ‘Auto Select’ set as ‘Layer’ and the ‘Show Transform Controls’ checked on. See the very top left toolbar in the screenshot to toggle these to your liking.

6. Swatch Palette

The Swatch palette ensures that the colors you use are consistent through the document. Simply add colors to the Swatches palette and then when needed, highlight your text or layer and change the color.

7. Styles Window

Similar to the Swatch window, the Styles window allows you to easily change colors and add effects to elements throughout your document. Handy for buttons, forms, rectangles, navigation, etc.

8. Character

The Character window allows you to easily change the most common text settings on the fly such as the font, size, leading, tracking and color. Pretty much essential for web layout.

9. Paths / Channels

I break up the Character and Paragraph windows with Paths & Channels as a personal preference so the type tools don’t seem so cluttered. The Paths window allows you to easily create paths, shapes & selections and Channels is mainly used for photo editing.

10. Paragraph

The Paragraph window controls the justification of text, as well as margins, spacing, hyphenation (set this as off by default) and roman hanging punctuation.

What You Should Know To design about FSC

What is the FSC (Forest Steward Council)?

FSC is an independent, non-governmental, not for profit organization established in 1993 to promote the responsible management of the world’s forests.

It provides standard setting, trademark assurance and accreditation services for companies and organisations interested in responsible forestry. Products carrying the FSC label are independently certified to assure consumers that they come from forests that are managed to meet the social, economic and ecological needs of present and future generations.

How does FSC implement this?

FSC developed “The Chain of Custody Process” which insures trees cut from FSC managed forests will go through the FSC certified process. This rigorous 5 step process ensures that all environmental and social obligations have been followed and have achieved the stamp of approval – the FSC logo (as seen below).

For example, if you receive a postcard with this symbol on it, you will know that it has gone through 5 different FSC certified processes since it was cut down. The chain goes something like this Pulp Manufacturer > Paper Manufacturer > Paper Merchant > (Designer) > Printer > Approval from FSC.

Where does the FSC logo go and what does it mean?

The FSC logo goes on any piece of design that is printed on FSC certified paper and is printed through an FSC certified printer. It is also appears on timber and other items that are FSC certified.

Once you have completed your own design and you have put the FSC logo in its place, you then submit your design to the printer… the printer then needs to submit the piece and all specs to FSC to get the green light to print.

In most cases, underneath the FSC logo it will contain a certification number. This contains the printers ID number, percentage of post consumer waste plus any other recycled information. This information helps verify that the Chain of Custody process has been followed.

What can you do to help support FSC?

FSC’s mission is to improve the management of the world’s forests. There are many ways you can support:

  • as a consumer you can buy FSC certified products
  • as a business in the forest products business, you can become FSC certified
  • you can promote the FSC by using the FSC logo on your products (you must be authorised to do so – information here)
  • everybody interested in the fate of the world’s forests can become an FSC member and actively contribute to the future of the organisation.

Worth mentioning

And just so you know… only 7 percent of the world’s productive forests are FSC certified. This global organisation, active in 79 countries, has an extremely ambitious agenda, a long way to go and must do everything possible to keep itself above reproach.

In saying that, worth mentioning is FSC Watch – an independent website (not associated with FSC) dedicated to encouraging the scrutiny of the FSC’s activities. FSC Watch aims to increase the integrity of the FSC’s forest certification scheme.

Have you ever been involved in an FSC project? Have you got any more information to share? Please let us know in the comments below.

Funny and Good Design About Graphics Jokes and Humor

Funny Graphic Design Videos

 Original Design Gangsta’ – Great Rap Video

 John Stossel 20/20 – Short & Sweet Humerous Clip

 Enter The Serif – An Asian fight between Serif & Sans Serif.

 Make My Logo Bigger – Parody of clients asking for their work to be the way they want.

Trust Your Graphic Designer – The Graphic Avenger – A video parody.

South Park – Mac vs. Pc – Computer Commercial

PC vs Mac Spoof – Bill Gates vs Steve Jobs

 Holiday Photoshop Advert – A very humerous photoshop.

Paint Shop Pro vs Photoshop

 How Not To Use Powerpoint – A parody of how people use Powerpoint in the wrong way.

Humourous Graphic Design Jokes & Parodies

8 Ways to Drive a Graphic Designer Mad
As everyone knows, graphic designers are the reason there are so many wars in this world. They get inside our heads with their subliminal advertising, force us against our will to spend money on the worst pieces of shit, and eventually, drive us to depression and random acts of violence. And of course, most of them are communists. So to do my part to save the world from them, i made a list of things you can do when working with a graphic designer, to assure that they have a burn-out and leave this business FOREVER.

Graphic Designer’s Judgment Clouded By Desire To Use New Photoshop Plug-In
The aesthetic judgment of Paul Gaskill, a graphic designer working on a brochure for Valley View Apartments, was “severely clouded” by a desire to use a new Adobe Photoshop plug-in, coworkers at Blue Moon Design said Monday.

Hillarious Entertainment Fort Smith Magazine Front Page Graphic Design Error
This really ‘rights’ itself. The major magazine of Fort Smith, Arkansas’s partners in education issue that just came out has the following front page. Partners in Education help our local public schools educate (indoctrinate) our children often working with an elementary school or other individual school. Try to find the huge typo.

 25 Reasons You Might Be A Hardcore Graphic/Web Designer
A list of signs that you might be a hardcore designer. A lot of these signs can overlap other professions too. From my experience, the following list contains mostly truths, mixed in with a little humor.

Another You Know You are a Graphic Designer When
Another list of ways to know that you are a graphic designer

 You Know You’re a Graphic Designer When
A list of ways you know that you are a graphic designer.

Mac / PC Commercial Parodies
A Parody of the well known Mac / PC commercials.

You Know You’re a Font Fanatic If
A top 42 list for font fanatics.

The UnSpoken Rules of Graphic Design
37 funny rules for being a graphic designer.

The Patron Saints of Graphic Design
A humorous and beautiful page about the unknown saints of Graphic Design.

The Way Graphic Designers Used to Work
Pictures of the tedious way graphic design and layout used to work. Not funny, but put a smile on my face because I’m so happy that things aren’t like this anymore.

Ad-Agency Print Buyer Can’t Believe They Want To Add A Perf This Late In The Game
A fake news story by The Onion.

Area Man Knows All The Shortcut Keys
A fake news story by the Onion

Indexed
Makes fun of his life as a graphic designer.

AdVerbatim

Pay attention, professionals or not- in Communication, Marketing and Advertising. These things happen almost every day; sometimes we don’t even notice them. But they’re here to stay. They are verbatims. And yes, they’re REAL.

Murphy’s Graphic Design Laws
A cute set of laws for graphic designers.

This is What Happens When Your Dad is a Graphic Designer
Look to see what this baby’s dad does to her pictures. Cute.

Worst Company URLs
Want a laugh? Look at these web site URLs that spell things a bit different than what the owner was hoping.

Logo Design Humour

Redesigned Logos 2.0
Redesigned Logos in Web 2.0 Format

Make The Logo Bigger Song

Listen to the song made for logo designers.

 Most Unfortunate Logos Ever

Hmmm…some of these logos are um…just look for yourself.

Flickr Photos Tagged with yay2dot0logoparody

Well known logos redesigned for web 2.0 for fun.

Ironic Sans

Logos designed for terrorists

How to Fake a Web 2.0 Logo

Web 2.0 sites are all the rage and if you’re lucky enough to be bought out by Google or Yahoo there are millions of dollars to be made, but how do you fake it as a Web 2.0 site? Well, all Web 2.0 sites have one thing in common : they look the part.

 Fake Google Logos

Like fake google logos?

KFC’s Logo First to be Seen From Space

KFC Created a logo to be seen from space. Not that funny but still cool.

The Worst Logo Ever Gasp

Gasp, this is the worst and most shocking logo ever.

Rejected Google Holiday Logos

Here are some funny rejected holiday logos.

 Naughty Logos

Logo design gone wrong.

The Worst Logo Ever

Really seems like it is a joke, but this logo is for real.

Corporation’s New Logo Changes Everything

A fake news story by The Onion.

Font humour

America’s Most Fonted

Ugly fonts, cutesy fonts, unreadable fonts, bad fonts . . . they have terrorized us for far too long, infiltrating our homes via e-mail, IM, and low-rent ValPak ads. Here, LMNOP presents the seven worst fonts–and the people who use them.

Type Obituaries

During a late night online conversation with another black, white, and orange website fan, it was decided that certain fonts should be retired. They’ve had a good run, but some things must come to an end. Whether, by overuse, obscurity, or just plain ugliness, here are some that just don’t make the cut.

Extra-Slanty Italics Introduced For Extremely Important Words

A fake news story by The Onion

DT&G Typography: Ask Yourself How it Will Read

Choose font and kerning well.

Helvetica Bold Oblique Sweeps Fontys

A fake parody news story by The Onion.

 A List of Design and Fonts Jokes

Another list of design jokes and fonts jokes

Song Parody: I Like Big Fonts

A parody of the song, ‘Baby Got Back’

Alpha-Bits Now Available In Serif Font

A fake parody news story by The Onion.

Fontly Speaking

Another fake news story by The Onion

2 Cheesy Font Jokes

These are cheesy jokes, but enjoy anyway.

Another Cheesy Fonts Joke

Even cheesier fonts joke than the one above it.

You Know You Are a Fontaholic When…

Much of the following has been ‘floating around’ the USENET comp.fonts list for a couple of years.

Your Monkey Called – White and Sajak on Fonts

Not really so funny, but cute.

Adobe Photoshop Jokes & Humour

Black Guy Photoshopped In

A fake news story by The Onion.

Photoshop Jokes

It all started with this, the hilarious Marquis de Sade picture, which was made in a flash of inspiration at work, one day. Within minutes of sending it to friends, jpegs started coming in thick and fast, as everyone began jumping on the comedy bandwagon. T

You Know You’re Addicted to Photoshop When

A list of ways to know that you are addicted to Photoshop

Fark

Photoshop Thread on Fark

If Leonardo Had Photoshop

A comic of what Leonardo Da Vinci Would have Been Doing if he had access to Photoshop

Acquired Paint Shop Pro Syndrome

The Centre for Disease Control in Atlanta today announced the identification of a new disease.

Jokes for freelance designers

Difference Between Freelance Designers & Onsite Designers

The difference between working in-house and freelance:

Gaping Void

This smart entrepreneur thought of this great idea, putting cartoons on the back of business cards to be remembered. They are called ‘blog cards’ and some of the cartoons are funny:and if you ask me, a great idea for freelancers.

Printers Humour

Guide to Using Printers

A very funny document giving advice on printers that will just make things much worse.

Aggression Against a Printer

Have any of you ever reacted this way?

Xerox Commercial

Cute Xerox commercial

A New Way to Print

A picture that will make you smile.

Hope you enjoyed the list, there is many hours worth of humour here so don’t view it all at once.

Related Pages With Top Design Blog

The pages have been categorised into five broad categories: Freebies, Tutorials, Inspiration, Web Design and Articles.

Freebies

  • 30 Essential PDF Documents Every Designer Should Download from Positive Space
  • Ultimate Web 2.0 Layer Styles from DezinerFolio
  • Free High Resolution Plain and Grunge Paper Textures from Fudge Graphics
  • Free Hi-Res Watercolor Photoshop Brushes from Bitt Box
  • 200+ Free Grunge Photoshop Brushes from You The Designer
  • Free Hand Drawn Doodle Icon Set for Bloggers from Spoon Graphics
  • Free Icons: Function Icons from WeFunction
  • 40 Beautiful Free Icon Sets from Six Revisions
  • 50 Most Beautiful Icon Sets Created in 2008 from Noupe
  • 63 Must have Grunge Fonts from OutlawDesign

Tutorials

  • Super Cool Frilly Bits Typography from Abduzeedo
  • Design with Swirls and Flourishes from MyInkBlog
  • 40+ Tutorials for Working with Wacom Tablets from Designm.ag
  • Advanced Glow Effects from PSDTuts
  • Colorful Glowing Text Effect in Photoshop from Tutorial9
  • That Wicked Worn Look ~ The Series from Authentic Boredom
  • Create a Dream Design with 3D Typography from GoMediaZine

Inspiration

  • 50+ Kick Ass Logos for Inspiration from Fuel Your Creativity
  • 92 Must See Creative Photographs from Just Creative Design
  • Another 79 amazing album covers from Inspiredology
  • Business Cards of Bloggers from Brian Yerkes

Web Design (+Inspiration)

  • 15 Excellent Examples of Web Typography. Part 1 from I Love Typography
  • 50+ Gorgeous Navigation Menus from Vandelay Design Blog
  • 83 Beautiful WordPress Themes You (Probably) Haven’t Seen from Smashing Magazine
  • 21 Mindblowing Premium-Like Free WordPress Themes from Smashing Apps
  • Unraveling the Secrets of WordPress’ Comments.php File from NetTuts
  • 7 Fresh and Simple Ways to Test Cross-Browser Compatibility from Freelance Folder

Articles

  • Why your web startup will fail from Ideas On Ideas
  • 101 Essential Freelancing Resources
  • Video Game Design Between 1990-2008 from Web Designer Depot
  • 12 Common Photoshop Mistakes, Misuses and Abuses from Design Cubicle
  • Top 50 graphic design blogs from David Airey
  • How to be a good client from SwissMiss
  • Obama logo ideas that weren’t chosen from Logo Design Love
  • 2008 Design Trends from Web Designer Wall
  • The Color Wheel and Color Theory from Creative Curio

What is your most linked to article? Please share with us in the comments below. To do so, type your web address into Yahoo! Site Explorer and look for the article with the most links (not your home page).