In this post we have compiled a list of great resources, that teach you how to create your own iPad icons, as well as a collection of ready made icons and PSDs.

To download the files, please click on the preview image to go to the source site and remember to check the terms of use before using them in your projects.

If you know of any other great iPad freebies, please add them in the comments section below and we’ll include them in this post when appropriate.

Enjoy…

iPad Tutorials

Callum Chapman’s iPad Photoshop Tutorial

In this tutorial, Callum explains the process of designing the Apple iPad from scratch in Photoshop using shape tools, layer styles and blending modes. You will also use the brush tool to create detailed chrome and lighting effects.

Chris Spooner’s iPad Photoshop Tutorial

Chris Spooner also creates an Apple iPad from scratch in Photoshop using simple modification tools, the pencil tool and transformation tools.

iPad Icons

Seeing how many great iPad icons are already available to download for free across the web is pretty amazing. Here is a small collection that will surely grow.

Enthusiastik iPad icons (2 icons; PNG format)

Chris Spooner iPad Icon Set (1 icon; PSD, PNG and ICN formats)

KR Design iPad Icon (2 icons; PNG format)

Sudhithxavier iPad Icon (1 icon; PNG format)

Chris Noakes iPad Icon (1 icon; PNG, ICO and ICN formats)

Adidadidu iPad Icons (18 icons; PNG, ICO and ICN formats)

TinyLab iPad Icon (1 icon; ICN format)

Bisiobisio iPad Icon (1 icon; PNG, ICO and ICN formats)

Santieldarlaine iPad Icon (1 icon; PNG format)

iPad PSD Documents

If you’re looking for something a little easier to customize, try out these iPad PSD documents.

Kevin Anderson iPad PSD

This PSD is completely editable. Every object was created using vector masks, meaning you can scale it up or down without any loss of quality.

Mppagano iPad PSD

This huge and incredibly detailed iPad PSD comes in at a whopping 2400 x 2400 pixels, large enough for almost any design project.

Geoff Teehan iPad GUI PSD

This one is for the application developers out there. The PSD was constructed using vectors, so it is fully editable and scalable. The workable screen design is formatted to 768 x 1024, so anything you design in the Photoshop file can easily be brought over to the SDK. This is a beauty of a document, coming in at around 24 MB. Start designing those apps!

Compiled exclusively for WDD by Callum Chapman, a freelance designer from Cambridge, UK. He is the creative mind behind Circlebox Creative and Circlebox Blog, and can often be found writing for design related blogs.

Feel free to share other iPad design resources below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: d9mm9g

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Interesting Design Trends Among Popular Blogs: http://bit.ly/dfPvgz

HTML5 Canvas Experiment: http://bit.ly/2V0OjL

Digging Into E-Commerce Website Design: Overview, Best Practices and Examples: http://bit.ly/crvOy8

Specialization: a designer’s key to success in the future http://tinyurl.com/yzmx7je (via @jasonwalz)

The kiddie designers of 99designs: http://bit.ly/698PQV

The Top 20 ‘Clients From Hell’ of The Past Year: http://bit.ly/cscoAn

A Crash Course in Usability: http://bit.ly/aMcppm

Improve Conversions by Connecting with your Audience: http://bit.ly/9Lr4gG

A Showcase Of Web Design In Hollywood: http://bit.ly/bsy6Fv

Web designs with exceptional forms of navigation: http://bit.ly/abhzr8

Kulula-air tries not to take itself too seriously: http://bit.ly/chxFmz

I’m finally happy!!! The iPad now has a camera….s: http://bit.ly/cAEbh6

100 Years of Movie Title Stills: http://bit.ly/b8qFD0

Facebook’s Major Redesign Emphasizes Search and So Much More – http://bit.ly/a2MHbs (via @mashable)

Times have changed: http://bit.ly/cPcOhg

5 Things to Consider Before Designing Your Next Website: http://bit.ly/bI3Qfe

6 Reasons Crowdsourcing And Spec Work Sucks: http://bit.ly/cAM0HP

Astronaut Tweets Beautiful Earth Images From Space: http://bit.ly/dfoq4J

Digg Hacked or Clever Advertisement? http://bit.ly/cZ6eLz

Could we soon be staying in floating hotels in the future? http://bit.ly/aDPz4q

Frozen waterfall: http://bit.ly/9gQqSs

11 Common Web Design Mistakes (Blunders): http://bit.ly/aQwhIH

China Mourns the Potential Loss of Google: http://bit.ly/8ZpgHn

12 Creative Stress Ball Designs: http://bit.ly/apUs3R (via @toxel)

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: d9mm9g

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

A Mother/Daughter Thing

The Lonely Guy

Bad Traffic

Over Worked…Under Paid

Can you relate to these situations? Please share your funny stories and comments below…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: d9mm9g

You could divide your traffic sources into four broad categories:

Search engines, mobile visitors, visitors using screen readers and visitors who have JavaScript turned off.

When planning your information architecture and design, you must figure out how to deal with these special groups.

I have assembled a few recent real-world scenarios to find clarity on the issue.

When you want to hide lengthy content behind an animated scroller, or rotate through products or testimonials in sequence, or present categorized page-level content cleanly, you could use accordions, carousels or any other imaginative solution.

If you keep up with JavaScript best practices or use any of the myriad of JavaScript libraries, you are probably already familiar with unobtrusive JavaScript, which is the technique of presenting JavaScript interactivity only when JavaScript is enabled.

This principle should be extended to presentation as well: build your dynamic feature(s) and set your display and visibility values only after the document is ready and only if the visitor has JavaScript enabled, rather than set the properties in your HTML code or define them server-side.

Like many screen readers, Google’s crawler tends to ignore content wrapped in an element set to display: none, while it does crawl any content set to display: visible.

So your task as a designer is to plan the space and layout around your dynamic features, and also to prepare for instances when “dynamic” is not an option.

If the content on one of your pages will always be visible in the browsers of certain users, how should it be displayed? Should hidden content remain hidden even if JavaScript is disabled? Should all content be available to screen readers and search engines? If a piece of content becomes visible only after an AJAX call, how do you adequately fill that space when JavaScript is disabled?

The Accordion

An accordion is a structure that usually consists of a pattern of pairs of heading and content. Blocks of content would expand one at a time, in response to an event triggered in the heading.

Hulu’s Accordion

I recently helped one client overcome the problem of having very long pages. This client had an online catalog of training courses and stipulated that all of the information for a particular program must be available up front: no page skipping or pop-ups for core course descriptions or program definitions.

All program information had to be available to the visitor on the same page, without having to navigate back and forth in the course catalog.

The right solution here was an accordion, collapsing course descriptions beneath headings for each area of study (math or history, for example). A poor implementation would have been to set the visibility of those collapsed course descriptions before the HTML was rendered on the screen.

If the content was hidden pre-rendering, then some visitors and search engines would miss much of the important content.

Using jQuery, I targeted the content for collapsing and set the accordion to trigger after the page had loaded and the document was ready. For this client, making the content available to all audiences was extremely important. Some of the content could run very long, and so a design that could accommodate extreme vertical expansion was needed.

The Carousel

You’ll see carousels fairly often in portfolios and product spotlights.

Typically in carousels, content will scroll in response to a time-out interval or some user interaction (see “Your Recent History” on Amazon). I like carousels for their flexibility and because they allow you to fix at least one dimension of the container.

Amazon’s carousel

Another client recently inquired about the “News and Highlights” area of their home page. Like many other content blocks of this type, this one featured the eight most recent additions to their news pages (though that number could vary).

The teasers in this block contained a summary of the article and an image. The images could be large and the content long, so a carousel that rotated between teasers was the right solution here.

Again using jQuery, I targeted the DIV wrapper for the carousel and, after the page had loaded and the document was ready, applied the carousel and set my transitions. With JavaScript enabled, the home page rendered nicely: every 15 seconds, the carousel shuffled to the next teaser. By default, all of the teasers were visible, but I hid all but the first when I created the carousel.

For this client, we again chose to display all hidden content if JavaScript was disabled. In that case, the home page would expand vertically to accommodate the extra content.

We had alternatives, though. Considering the four categories of users we identified at the beginning of this article, the priority for this content was accessibility, with search engine ranking a close second. We could have satisfied these two groups by leaving all of the teasers visible but fixing the dimensions of the container DIV and setting overflow to scroll, auto or hidden.

Any of these options would have preserved the layout’s dimensions. And screen readers and search engines would have picked up on the content, too, because the content would not be hidden with the display or visibility property.

The Content Swapper

This technique is similar to the carousel in that content in a block is rotated using some animation.

The main difference is that the tweening animation is not used; instead, one piece of content fades out while another fades in (or you could have a hard transition with no fade). The swapper is similar enough to the carousel that the alternative no-JavaScript solutions mentioned above hold true.

Yet another client came to me with the task of showing an indefinite number of testimonials on their website. We opted for a content swapper in this case because we had no need for the pagination typically found in carousels (the user wouldn’t need to scroll back one testimonial or skip to the end).

For visitors who had JavaScript disabled, we respected the design. After careful consideration, the client rightly determined that the testimonials would have such a small effect on visitors that setting the display to none would not be detrimental.

The decision afforded me a little more freedom in planning the right-hand column of the website, where the testimonials were to appear.

The Sorter

Anyone who has adjusted their Hulu queue has seen the drag-and-drop sorter. This bit of JavaScript allows users to drag and drop rows (table rows, list items, independent DIVs, etc.) into a different order.

Netflix’s sorter

Take one last client of mine as an example, who had a set of standard procedures that all employees had to follow.

Each procedure consisted of any number of tasks. An administrator could add or remove tasks and could change the order of tasks.

This was a textbook example of sorting, an implementation of drag-and-drop reordering.

Thanks to Scriptaculous and Prototype.js, creating the sortable list was easy. When the code was written and the page was live, we had a perfectly operable rendering of the design comp. Then we realized that without JavaScript, we had only the HTML equivalent of a paper weight. There was no drag-and-drop or on-the-fly reordering.

Some quick thinking and slight modification of the design gave us the same set of rows we had before but with the addition of text input boxes that could accommodate the inputting of row order (note, though, that without JavaScript, we were forced to add some significant server-side validation for these input boxes). We lost on-the-fly reordering, but at least we regained the sorting functionality.

Then we turned back to JavaScript-enabled browsers and hid the text boxes mentioned above; after all, we had drag-and-drop functionality for this group. At this point, we had a perfectly operable rendering of the design comp that was also serviceable for visitors who had JavaScript disabled. Next time, I’ll know to plan for this condition.

Conclusion

The evolution of the web will continue, and visitors to our websites should be able to continue enjoying dynamic flair.

Carry on planning for interactive responses with animated tweens: fade in, fade out, collapse, expand, slide things around. Given all of this animation, think of how your website will appear to visitors who cannot see the animation because of JavaScript limitations. Your clients will be happier, and you’ll be a better designer for it.

http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp

Jason Corns is a freelance web developer and full-time GUI developer for Systems Alliance, Inc., specializing in usability for all audiences.

How do YOU plan for the absence of JavaScript? Please share your tips with us…

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: d9mm9g

It allows animals and plants to remain indiscernible from the surrounding environment through deception.

Adopting this concept, a new wave of camouflage artists use special techniques for  their photographs that allow them to show people blended into their surroundings.

For each photo, the camouflage artist must meticulously design a new camouflage suit in order for the effect to work.

This article features the work of two prominent camouflage artists: Liu Bolin and Desiree Palmen. See if you can find the people in these photographs…

Liu Bolin

Liu Bolin is a Chinese artist who creates art in protest to the actions of the Chinese government, who shut his studio down in 2005. He will work on a single photograph for up to ten hours, and often pedestrians will not notice him until they actually run into him.

F

Desiree Palmen

Desiree Palmen is a talented Dutch artist who also uses photography to produce her camouflage art.  She patiently paints the camouflage on by hand on cotton suits, matching them to the background.

Compiled exclusively for WDD by Zoe Ajiboye.

Which ones did you like best? What do you think of this type of art?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: d9mm9g

Getting in a rut is often the result of not staying up to date with the latest trends and technologies in the industry. Even if we do stay up to date, many of us at one time or another feel anxious about whether we’re advancing.

If you’re at a firm, you may be working towards a raise or promotion, or perhaps you’re thinking of jumping ship to a bigger and better company.

For the freelancers out there, we of course determine our own destiny; but far too often our careers feel stagnant, too.

This article goes over some ways to reignite your growth as a web designer.

When You Know You Need to Grow

I love to live simply. If I don’t see the need to grow my business, I won’t. For me, more money does not equal more happiness, especially if I have to work myself to death for it.

But many designers get to a point, as I have in the past, where they feel they have to grow in order to be comfortable with themselves and their business.

When does this point come? Well, it’s different for everyone, but most web designers fall into one of the following categories:

• You need more financial stability.
  Whether you’re expecting a baby, buying a house or climbing out of debt, life changes demand career changes. Improving as a web designer and cultivating your business increases stability.
• You’re anxious for advancement.
  As life goes on, even if we’re financially stable, we yearn for advancement to fill a need for self-worth. It’s not selfish, just a part of life. Advancing one’s career is a great way to advance personally.
• You’re just learning the business.
  Whether you’re young or just switching careers, you may be new to web design. To be successful in this business, you need to learn how to grow.

These scenarios are general, and surely many of us have been through all of them. Whatever your reason for wanting to grow as a web designer, the tips below may help.

Define What You Love to Do

This will make you happier at your job every day—that much is clear. But how does it make you a better web designer?

When you have to perform a task that you’re not interested in or inspired by, you do it very slowly, and the work day gets eaten up pretty fast.

Motivation is a driving factor, and without it your day becomes slow and inefficient.

Every day, we spend time doing tasks we hate, sometimes willingly, sometimes not. By minimizing these tasks, we can spend more time doing what we love, and by doing what we love, we get more work done because it doesn’t feel like work.

How do we figure out what we love? It’s not what brings more money or gets more clients. It is not even what you do well. In the context of a job, we love what makes us excited.

Don’t merely be content with what you’re doing; make sure you’re excited. What task do you do when you don’t have to do anything, that you don’t have to force yourself to do? What’s the one job that keeps you up late at night, without even realizing it?

Focusing on Your “New” Job

If you’re a freelancer, remove any services from your portfolio that you don’t like doing. Some think that offering numerous services brings in more clients, but fewer services can bring in just as many clients if you market them well.

If you don’t like to code, then don’t, even if you know how to do it. Outsource it, and don’t mention the service on your website.

If you’re at a firm, trading off tasks can be as easy as talking to a supervisor or co-worker. A co-worker down the hall may love doing exactly what you hate.

Learn a New Technique

With the wealth of tutorials on the web, learning something new every day is easy. Most web designers see elements and tricks every day that they wish they could do.

Too often we say, “This would really be cool to implement in my next design.” Yet, we hardly ever look up how to actually do it.

Another great idea is to set aside time in your workday to focus solely on learning something new. It could be a new coding practice, design technique or business tactic.

Don’t rely on browsing, because therein lies distraction. Instead, decide ahead of time what you’d like to learn, and focus on that during your set time every day.

This is a great way to keep up with technology and fellow designers. They move so fast, and falling behind is all too easy.

Collect Books, and Other Reliable Material

Collect books, magazines, articles, RSS feeds, tutorials and more to improve as a web designer. Both web and print materials are required to gain the knowledge you’ll need to advance.

Every good web designer has relied on certain resources to learn the ropes and stay up to date.

One can learn technique after technique, but we never really grow without some good reliable resources that delve deep into the heart of web design.

In other words, a shiny new Web 2.0-inspired button won’t get you as far as a sound understanding of positive and negative space.

Solid design and coding principles last much longer, and help you improve as a web designer much more quickly, than “tricks.”

Keep an Inspiration and Motivation Notebook

As creative people, we’re always coming up with great ideas. The problem is finding our record of those ideas when we need them.

Because we create one design after another, we’re not always on the ball. Burning out is easy and a huge inspiration killer.

We have to find a way to call up that motivation and inspiration on demand. Keeping a notebook of ideas and encouraging thoughts is a great way to do this.

Such a notebook could include sketches, written ideas, sources of inspiration, magazine clippings, book references and anything else.

It might also help to write down what has motivated you in the past; simply reading past experiences can be encouragement enough.

Build New Habits

When reading articles such as this one, we constantly discover new ways to improve ourselves and our business. The problem is that we don’t often apply everything we read. We are prisoners of our own habits.

To change this, don’t just find new things to do; rather, focus on forming new habits that will help your career.

For example, if you would like to sketch more ideas on paper for design projects, set a goal to do it consistently for the next 10 projects.

Setting goals turns your nascent habit into active steps, rather than leaving it as something “you’ll start doing someday.”

Studies show that a person takes on average 30 days to build a new habit. Yet different habits require different time periods to form.

For example, one group of participants took only eight days to form the habit of drinking more water every day, yet smokers took over two months to quit cigarettes. Different habits take different times to form; it depends on the person and the nature of the habit.

So, whether you want to optimize CSS files for quicker loading, sketch before starting each project or enhance your design skills, be sure to do it consistently and make it a habit. Otherwise, you’ll fall back into the same rut of inefficiency.

Forming new work habits is a prerequisite to changing and growing in your job.

Re-Organize

Remember your first day at the office? The first thing you probably did was get organized, buy a bunch of new stuff and prepare pretty charts to track your progress and help you expand.

Look at those things now. Are they still used? Are they buried under all of your junk? Have you used even half of it? Even if your work space is not messy, is it organized for the way you do business today?

Chances are your perspective has changed as you’ve learned to run a business and do your job efficiently.

Take time to clean up, and reorganize your work space so that you actually use the things you set up on that first day. Organizational tools, ideas and supplies that you’ve long forgotten about are bound to pop up.

After unearthing everything, re-organize it to be more efficient.

Wrapping Up

Growing is a never-ending process, so it should be something to look forward to.

One trick is to think of every business or personal advancement as a new beginning, where you throw all of your old career problems out the door.

Optimize, learn and grow if you want to succeed.

Written exclusively for WDD by Kayla Knight.

Everyone has gone through different stages in their career. Whatever stage you’re at, feel free to share some steps we can take to advance in our careers.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: d9mm9g

Getting rid of paper, digitizing your business cards, minimizing your office supplies are just some of the measures you can take to declutter your workspace and redesign your work life.

Working in an aesthetically pleasing and minimalist workspace enhances your creativity and focus.

Eliminate anything you don’t need, and you’ll have less of a visual distraction. We have enough online distractions; shouldn’t we be limiting the physical ones as well?

The minimalist zen like work spaces that we’ve collected below can inspire you to create a clean design for your environment that meshes with the beautiful work  that you do online.

Compiled exclusively for WDD by Andy Johnson, a freelance designer and developer living in South England. He currently freelances via his web design studio Pixeno, and he’s also working on his web app called Authentic. You can  follow him on Twitter @Andy92.

Which workstation is your favorite and why?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: d9mm9g

On February 10th, 2010, Photoshop turns twenty. To mark this anniversary, we’ve come up with an article that takes you through the evolution of Photoshop from its modest beginnings as a bundled program sold with scanners to its current version.

For each version and major feature listed, we couldn’t help but think “did Photoshop ever exist without that feature?”.

Some of the minor details are fun too, such as the one-liner Easter Eggs that Photoshop developers hid in some versions and the fact that the most current versions of Adobe Photoshop CS are equipped with anti-counterfeiting measures for multiple world currencies.

Please join us in thanking the Knolls and Adobe for making all of our lives more awesome, every day.

Photoshop: Origins

One of the most impressive things about the company is the fact that one gifted family, consisting of an engineering prof, a PHD engineering student, and a talented special effects whiz working at Industrial Light and Magic came up with the core idea of Photoshop.

Thomas Knoll, the PHD student, is still heavily involved with Photoshop years later.

Glen Knoll was a college professor with two sons and two hobbies; computers and photography.

He had a darkroom in his basement, and an Apple II Plus that he was allowed to bring home from work.

Thomas Knoll adopted his father’s photography habit throughout high school, while his brother, John Knoll, purchased one of the first Macs available to the public.

Fast forward to 1987: Thomas Knoll was a PHD student studying Engineering at the University of Michigan. His brother was working at Industrial Light and Magic.

Thomas Knoll wrote a subroutine for a program to translate monochrome images on his monitor to grayscale.

The successful subroutine led Knoll to create more and very soon he had a number of processes for achieving photographic effects on digital images.

After his brother John saw what Thomas was doing, he recommended that Thomas turn what he was doing into a full-featured image editor.

The combination of Thomas’ programming abilities with John’s pragmatic design background led to a collaboration between the two brothers to develop more processes and improve on the initial application.

Even though the process led to interruption in Thomas’ thesis work, the brothers released “Image Pro” in 1988.

John suggested that they begin to sell Image Pro as an application.

Within six months, the brothers had a partnership with a company that manufactured scanners, Barneyscan.

They purchased 200 copies of the program to ship with their scanners.

They called on Supermac and Aldus, but were turned away at both, a move that Aldus would come to seriously regret.

Shortly after, the Knoll brothers struck gold when they won over Adobe management with their product, and formed a licensing partnership with Adobe that was to launch their software and Adobe into the stratosphere.

In February of 1990, Adobe 1.0 was released.

This video, shot in January of 2010, is a great interview with John Knoll about the early days of Photoshop:

Photoshop Through the Years; Version Changes

We’ve included major changes within each version and some minor ones. This is meant to be a fun stroll down memory lane rather than a complete version catalogue.

If you have a particular version change that got your hackles up or a feature that you’d to mention, feel free to add it to the comments section.

1990 – Photoshop 1.0

John Knoll, Thomas’ brother, wrote “special effects” for the program which were frowned upon by Adobe staff as being too “gimmicky”. Thomas and John found a way to sneak them into Photoshop as plugins, giving rise to what is now a huge cottage industry in add-ons to the popular program.

John and Adobe staff constantly pushed Thomas to make improvements until the final product shipped.

The first version of the Photoshop splash screen features just four Photoshop programmers. In subsequent versions, more and more names are added to the list. In more recent versions, a limited number of Adobe VIP’s appear in the splash screen.

1991 – Photoshop 2.0

Photoshop 2.0 included the Path feature, which allowed users to trim around an object easily and to save that path for future use. This feature was added by a second engineer, Mark Hamburg, that Adobe hired to work on the application.

Up until 2.0, Thomas Knoll was the only engineer working on it. Adobe called Mark the “Path Man”. 2.0 also featured rasterizing for Illustrator files, support for CMYK colour which led to widespread Photoshop adoption by the printing industry, and the Pen.

Photoshop 2.0 also required 4 megabytes of RAM to run rather than 2, which really helped program stability.

Photoshop 2.5, released in 1992, was notable for being the first release for the Windows operating systems.The code had to be completely changed in order to accomplish this goal which meant that the first effort was slow going.

16-bit file support and palettes were added to this version as well. The initial Windows release had a “memory bug”, a bug which actually saw Mark Hamburg offer to make house calls. The patched version was released as 2.5.1. Filters got their own menu in 2.5 as well. The workspace shot below is of Photoshop 2.5 for the Mac.

1994 – Photoshop 3.0

The big story for Adobe Photoshop 3.0 was layers. Layers were and are a lifesaver for any marginally complex design.

Prior to their introduction, designers would save different versions of designs so that they could go back and grab them if needed; layers made this practice redundant.

Layers are individual slices of the image that go together to make the final “sandwich” of the image. Different images, such as those used in the image above in the 3.0 splash screen, are assigned their own layers, making it easy to work on those images without tampering with other areas of the image.

Thomas Knoll, the original creator of the program, was responsible for their development. Other engineers made improvements in the program’s performance with Power Mac chips and bringing the Windows version up to the same level as the Mac version. Tabbed palettes also had their debut in 3.0.

Adobe engineers included Adobe Transient Witticisms (ATW) with this version. They were little Easter Egg funny one-liners that would appear only when you pressed obscure combinations of keys.

1996 – Photoshop 4.0

Adjustment layers and macros were the two most notable features of Photoshop 4.0.

Adjustment layers allow the designer to apply one effect to a group of layers. Macros, or actions in Photoshop speak, allow you to map a series of commands to one command. This allows you to perform the same operation in much less time if you have a bunch of images to work on.

The most important change to 4.0 was the unification of the user interface with other Adobe products, a feature which Adobe has stayed consistent with right up to present-day incarnations of the program. This meant a less steep learning curve for Adobe products, a blessing for those who got their start with Photoshop 4.0.

Loyal users of Photoshop were not amused with the redesign, the common question from the community being “Why did you break Photoshop?”.

1998 – Photoshop 5.0

The two most important features released with 5.0 were editable type and the ability to undo actions multiple times in the “History” palette.

Previous versions of Photoshop allowed text to be added, but the fuzzy rasterized type didn’t make for pretty magazine mastheads or decent web menus. This was a huge step forward. Multiple undos via the History palette were very helpful, especially since designers were starting to use the new Adobe tools for increasingly complex designs.

Color Management made its debut with 5.0. Like other major changes to Photoshop, it was greeted with equal parts of praise and condemnation. It allowed colors to be managed natively within the application rather than relying on third-party tools that had been used, a huge improvement.

However, it also automatically converted the colors when opening files, a “feature” that engineers quickly eliminated after multiple user complaints. The magnetic lasso tool debuted in 5.0, making selecting areas of an image to work on much easier.

1999 – Photoshop 5.5

Photoshop 5.5 featured the huge time saver, “Save For Web”. This feature allows those who choose it to save the image in a preset specifically designed for web use which allows the user to adjust image quality to achieve a smaller image.

Version 5.0 had failed to take the Web into account with all of its other major feature changes on the table. It was also bundled with ImageReady, a standalone program that was purpose-built to edit web graphics.

Most of the features of ImageReady were later incorporated into the full version of Photoshop and the idea of a simpler program was reborn eventually in the form of Photoshop Elements.

2000 – Photoshop 6.0

The layer styles panel made working with layers even easier in Photoshop 6. Vector shapes were also added in this release; the ability to draw vector shapes such as arrows into a bitmap was lauded by users.

There was also a new custom shapes palette that allowed the user to draw using vector shapes rather than just using lines. Text could also now be typed directly onto a picture, rather than being typed first into a text box.

Multi-layer functions made their first appearance with version 6.0. The Blending Options dialogue was also introduced which made blending various elements of an image much easier. 6.0 separated the crop tool from the marquee tool, making it that much easier to get to this commonly used command.

2001 – Photoshop Elements

With the increasing complexity of the tools available to users, Photoshop was risking losing a significant market share that didn’t understand or need some of its more advanced tools.

In order to combat this, they released Photoshop Elements in 2001. The new product was a success, and designers continue to recommend it to clients for simple image resizing and other non-design tasks.

While its current interface, shown below, isn’t intuitive for those trained in traditional Photoshop, it is highly usable and labeled clearly for the average user. If there are any problems with it in terms of functionality, the simple answer is to upgrade to the full-featured Photoshop.

2002 – Photoshop 7.0

Version 7.0 introduced the healing brush and text that was fully vector-based. More importantly to veteran users, it introduced a new file browser that let designers easily pore through folders to find the graphics that they wanted.

Files within a folder could be renamed using Batch Rename, plus a bunch of other helpful commands that made working with a high volume of files much easier.

Workspaces could also be created and saved, allowing you to save your file locations and groups for future use.

The brush palette also featured a number of changes, including the new healing brush tool, patch tool, and the ability to create custom brushes. Spell check and a find/replace feature rounded out the updates to the text tool.

A number of enhancements were also included for web use, including the addition of rollover effects for images and a web gallery feature.

One of the most important upgrades was under the hood; 7.0 was optimized for use with Mac OS X, virtually eliminating crashes in the middle of working on large files. The tool presets palette let users program presets for commonly performed tasks, increasing efficiency.

2003 – Photoshop CS

Photoshop CS was the first to employ the CDS (counterfeit deterrence system) which recognized and refused to allow duplication of paper currency.

Scripting support for various web languages, including JavaScript, was also new to this release.

Layer groups were introduced with this version, which allowed various layers to be grouped together for effects to be applied to some and not others.

Improvements to the File Browser made images easier to work with, and the 16-bit and better large file support made CS much easier to work with for designers who constantly worked with larger images and photographers.

2005 – Photoshop CS2

The red eye removal tool, previously exclusive to Elements, was popular enough to make an appearance in the core version of Photoshop. Smudging options and the ability to select multiple layers also added to the functionality of Photoshop.

The Vanishing Point tool allowed users to edit images in perspective. The largest moment of panic when upgrading to PS2 came for most when they tried to find the Paint Bucket tool, which had been classified under the Gradient tool. There were other significant changes to the UI that prompted one writer to put out this “Where’s My Stuff?” column.

Layers and the layers palette were other areas of note. The “links” column was removed because CS2 included a link button rather than the small chains beside each layer. The “Smart Object” feature was introduced, which allows the user to scale a layer up without significant loss of quality.

2007 – Photoshop CS3

A faster load was probably the most noticeable feature of this 2007 release. It included fine tuning to a number of its existing tools rather than focusing on new ones.

The most notable new feature was graphic optimization for mobile devices, a feature which many web designers focusing on mobile design were thankful for. This version also saw significant feature updates to Adobe Camera RAW, a Quick Select tool, alterations to core commands like Brightness and Contrast and Black and White conversion.

CS3 shipped in Standard and Extended editions. The Extended version was intended for high end video and scientific users. Improved performance for Intel-based Macs significantly improved the speed of Photoshop, while Windows users also enjoyed performance upgrades. The new Quick Selection tool put the rest of the selection tools in Photoshop to shame with easy object selection with one or two strokes.

Cloning became easier in CS3 with the birth of the Clone Source palette which increased the options available to the Clone Stamp tool in an easily accessible palette.

2008 – Photoshop CS4

The smoother pan and zoom allowed for fast drill down on the areas of an image that you wanted to look at. Prior to this, there was a lag time of a few seconds (depending on your system) if you wanted to zoom in or out on an image.

The Masks and Adjustments panel was added, making working with masks easier. CS 4 also dealt with edges on masks more effectively. Colour correction took a huge step forward with this release.

The user interface was significantly simplified in CS4. The support of tabbed documents made it much easier to use and the main tools were added to the title bar for easier access. Quick access for common actions was made available in the panel area.

Where Are The Knolls Now?

Thomas Knoll
Thomas was the lead developer of Photoshop right up until CS 4. He now leads up the Camera Raw plugin for Photoshop, which allows Photoshop to develop a smooth handshake between different models of camera raw image formats.

John Knoll
John is still employed by Industrial Light and Magic as a Visual Effects Supervisor. He was the Visual Effects Supervisors for the recent efforts on the first three Star Wars prequel films. He also supervised work on two Star Trek movies, Star Trek episodes, and the Pirates of the Caribbean movies.

Glenn Knoll
Their father is a teacher at the University of Michigan in the Engineering Department.

Let’s all get together to wish Photoshop a Happy Birthday!

Resources

• From Darkroom to Desktop – How Photoshop Came to Light
  Derrick Storyje
• Guidebook Gallery
  Photoshop Section
• 10 Years of Photoshop
  by Jeff Schewe, the artist who designed most of their splash screens.

Written and compiled exclusively for WDD by Angela West.

How has Photoshop impacted your design career over the years? Share your experiences and let us know which version you first cut your teeth on.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: d9mm9g

Congratulations to all 5 winners: Christopher Barnes (#392), Claudiu (#145), Tutorial City (#403), Austin (#113) and Patricia (#346).

Each of you have won a free copy of this excellent web typography book written by Jason Cranford Teague.

All winners will be contacted via email for details on how to receive their books.

Thanks to the over 400 of you who participated and for leaving links to all those awesome typographic resources.

We’ll be running more contests in the near future, stay tuned!

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: d9mm9g

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

12 frequent logo design mistakes http://bit.ly/7MleZw (via @imjustcreative)

What the Web of Tomorrow Will Look Like: 4 Big Trends to Watch: http://bit.ly/92eFrI

Ice Age in Ice: http://bit.ly/6zXgUf

Beautiful new site by Carsonified: http://chirp.twitter.com/

Time lapse of crevasse 3D street painting: http://bit.ly/4ZZZB

HOW TO: Build a More Beautiful Blog: http://bit.ly/clRexC

Super Cool Pictures of Insects: http://bit.ly/6YDys6

Amazing visualization of the history of browsers! + http://twurl.nl/08htr4 (via @atsmith)

What do you get when you mix a designer’s love for baking with typography? These Helvetica Cookies!!! http://bit.ly/5ZQXbE (via @HOWbrand)

The New Hotness: Using CSS3 Visual Effects: http://bit.ly/6E5dbS

Twitter Search Engine: Visual and Interactive (Awesome!) – http://bit.ly/84Jwh5 (via @smashingmag)

8 Essential Tools for Website Redesign Efficiency: http://bit.ly/91AQtj

Modern and Unusual Showers/Shower Heads: http://bit.ly/b0i7Hh

The iPad is born: http://www.apple.com/ipad

Why a blog should always be niche focused: http://bit.ly/5Qxv1I

8 Things That Suck About the iPad: http://bit.ly/9pxloi

A Broader Understanding of Value: http://bit.ly/ahHtnf

Time Lapse of Vancouver: http://bit.ly/6m9vo7

The iPad provides the ultimate browsing experience? http://bit.ly/cjOf

An Apple a Day Wall Calendar: http://bit.ly/bOdOce

List of Web Design Mistakes You Should Avoid: http://bit.ly/8vPfbX

A Roundup of 22 Cutting Edge PSD to HTML Tutorials: http://bit.ly/aZRaHn

Showcase Of Web Design In Germany: http://bit.ly/5QTLg6

Textures In Web Design: Examples And Best Practices: http://bit.ly/5WyJrE

45 jQuery Navigation Plugins and Tutorials: http://bit.ly/56v0bJ

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: d9mm9g