How to get more design work done in less time

I’ve been freelance designing for a few years now and there’s one thing I never seem to have enough of:

Time.

And since I know for a fact that there are only 24 hours in the day no matter where you live on the planet, I bet you’ve run into the same problem I have now and again.

Today, I’d like to touch on how to get more design work done in less time. Why? Because if you can get more done in less time it leaves more hours in the day to relax, spend with your family, and do whatever else is on your list of things to do.

So here are a few ways I have found I can maximize my design time in order to get more done in less time:

 

Don’t be afraid to say ‘no’ to a potential client.

One of the most important lessons I have ever learned about getting more design done in less time is to say no to clients who I know will be time-suckers.

It can be tempting (especially when you’re just starting out) to accept any client that comes your way. But as you avoid clients that will need more hand-holding than usual, you can focus on the clients that let you streamline the design as much as possible, thus saving you time for client-hunting or any other task you’ve been neglecting.

 

how-to-get-more-done-in-less-time

 

Outsource projects you’re not skilled at.

Outsource has become a bad word. But all I mean by this sentence is that designers should hire and work with other people who might be more skilled at certain tasks.

If, for example, you aren’t very good at logo design, but your client wants a new web site with a new logo, perhaps you can work with another designer to design the logo, take a small percentage off the top, and then design and code the web site for your client.

Don’t waste time trying to be good at something that you’re clearly not good at.

Create design automations.

Another quick way to speed up the design process is to create automations. Photoshop, for example, will let you automate certain actions. If there’s a gradient effect that you’ll be using on multiple elements throughout the design, create an action in Photoshop and then simply click to apply when you’ve got a new element that needs to match.

Other automations that streamline the design process can include learning keystroke shortcuts for design programs, starting with wireframes, and similar techniques.

Close your browser (and remove any other distractions)

The biggest cause of getting less work done is being distracted. It’s easy to get sucked into looking through blog post after blog post learning techniques, getting inspired or learning how to freelance.

In order to get as much done as possible, remove all the distractions you can. Set aside a certain amount of time each day or week for these sorts of activities and then, when it’s time to work, just work.

How do you get more done in less time?

Surely, I’ve left out some tips for getting more design done in less time. What resources or techniques do you use in order to get more done in less time? Share them with me by leaving a comment.

 

preston-lee

About the Author

Preston D Lee is a designer, internet marketer, and entrepreneur. He founded GraphicDesignBlender.com where he and other designers blog about the business of design: freelancing tips, client advice, and business strategies for designers. Connect with Preston on twitter at @prestondlee or Google+.

A Look Into Intrinsic Nature’s 10th Experiment

Design Collective Intrinsic Nature’s 10th Experiment hit the net back in early May. It features a stunning collection of 85 works created by over 50 international artists. With the help of designer Anthony Giacomino we rounded up some of our favorite  works from this pack. Be sure to check out the whole experiment over at Intrinsic Natures website.

Intrinsic Nature, also known as "IN," is an online art group consisting of a select community of creative minds from around the world.  The name Intrinsic Nature speaks of the organic, creative, free-flowing spirit of art residing within every one of us that finds its way to a canvas. The work we create is natural, birthed from who we are: our very nature.  Every few months Intrinsic Nature releases a public showcase of this art in what we call our "Experiments.

Savage By 3abden


Microspheres By Agiaco


Tetrapoda Abstrakta By Agiaco & Yago


The Intrinsic Book By aleebr


Sweet Dreams By Aleebr


Cocoon By Ameliajane


Moriae Encomium


Art For Our Sake By Dejavu


Awakening By Drake


Melachodia By Dyst

We strive to build a core of talented artists and give them another platform to share their artwork. We work as a team to help each artist improve and learn from each other.  In a competitive and ever growing field, it’s important to have others to collaborate with and learn from.  IN really is beneficial in this regard.  Aside from these goals, Intrinsic Nature works to build a strong presence in digital art community as a talented art collective filled with artists from all disciplines ranging from digital art, photography, music, traditional art and more.

Anecdotal Universe By Dyst


Lost In The Blur By Enspyre


Sway By .esk


One Zero By Galaxyturbo


Intrinsic Yummy By Human After All


Repossession By John Mark


Solidarity By John Mark


Faraway Love By Karim


Genesis By Karim


Lonliness By Leonk

IN10 marks the tenth full experiment released by the crew in the past three years.  It’s significant because after quite a long time between experiments, IN came back strong lead by some great new artists.  Many of these artists improved a lot in the months they joined the group, and also breathed some new life into the latest exhibition.  It’s always a mixed bag of which artists are going to be able to submit to each experiment.  We hope to keep older artists active while helping new ones develop and succeed.  Intrinsic Nature is already 10 experiments deep, but we feel it’s only just begun.

All The Riches By MACABRE

La Valse Des Monstres By Ramon de Andrade


Trees Are Leaving By Shapesfactory


Nineteen Eighty-Four By Shapesfactory


Forgein Place By Silnc


The Fallen Empire By Skema


Civilization By Syst-eeem


Freaks And Geeks By Tropfich


Quarry By Uneventual


Lets Exhange Some Body Heat and What Not By Yago


Special Thanks

I’d like to give a special thanks once again to Anthony for helping me put together this look at Intrinsic Nature’s 10th Experiment. Make sure to stay up to date with IN by checking their website for constant site updates.


Showcase of Sketches and Doodles in Web Design

Using a hand-drawn style of design is one way to create an interesting web design that visitors will remember. There are a lot of different approaches to using doodles and sketches, and in this post we’ll showcase examples for your own inspiration.

Some designers use hand-drawn elements like arrows and lines, while others use the hand-drawn style on text or even the background of the website. As you browse through the sites showcased here you’ll see a lot of creativity in how the doodles and sketches are used.

Creative Week

Creative Week

Beavory

Beavory

Wing Cheng

Wing Cheng

Bowtie

Bowtie

Marie Catribs

Marie Catribs

Legwork Studio

Legwork Studio

Allesandro Cavallo

Allesandro Cavallo

 

 

Aribeo

 

Aribeo

Contrast

Contrast

Frocktastic

Frocktastic

realwebdesigns

realwebdesigns

London Made

London Made

Sebastian Mrazek

Sebastian Mrazek

Project 365

Project 365

Kez

Kez

Justdot

Justdot

Art Attack

Art Attack

Bord

Bord

Jason Gray Music

Jason Gray Music

10Words

10Words

Robbin Waldemar

Robbin Waldemar

The Creative Dot

The Creative Dot

Add Hand-Drawn Elements in Your Own Designs

At Vandelay Premier we have released a number of vector packs and brush sets that allow you to quickly and easily add hand-drawn elements to your own designs, and we have compiled a huge collection of those resources in the Hand-Drawn Design Resources Bundle. We’re offering a $5 discount on this bundle to you, our blog readers. Use the promo code”blogreaderhdrb” at checkout to get the bundle for $14 instead of $19. It includes 360 Photoshop brushes, 288 vectors, and 73 Illustrator brushes.

For more design inspiration please see:

Royalty-Free Graphics

The Difference Between Design and Art

Advertise here with BSA


The Difference Between Design and Art

Good web design is far more than a beautiful site, it’s where art meets an interactive user interface and where, in my opinion, superfluous aesthetics takes a backseat to usability and the user experience.

Ensuring that user interactions are as smooth as possible is good design — don’t ever be satisfied with art alone.

Although the design vs. art debate is nothing new, it’s ripe for a revisiting as new CSS3 features and JavaScript (and particularly front-end web development libraries like jQuery) begin to edge their way deeper into our everyday lives.

These new capabilities, however revolutionary they may seem, have changed nothing about how we should approach web design in general.

Where Design and Art Clash

Art is a problematically inclusive term; anything in the world can be called "art." The main difference between art and design, then, is that design is simply more restrained.

Any artist can look at their work and see it as an extension of themselves, but designers don’t have that liberty.

As designers, our work has to be interactive, accessible and consistent. In this way, design goes beyond art because no one would expect someone to say that all art has to be consistent and follow a pattern. That would be absurd! What if cubists set the rules? Our art museums would be terribly dull and without variation.

Examples of Cubism, a 20th century art movement. Above: (01) Les Demoiselles d’Avignon and (02) Le guitariste by Pablo Picasso.

This is what design is: It’s art with expectations, patterns and consistency. It’s art meeting science.

Yes, it’s limiting, and yes, UI designers have to be trained to think inside the box a little. But get over it. You are a designer, not an artist. If you want complete freedom and no friction between your creativity and your work, you are working in the wrong field.

Artists can work to their whim, eschewing standards and refuting expectations, whereas designers gobble them up and abide by their every word.

Market forces and trends influence designers far more than artists (with some notable exceptions like pop singers and freelance illustrators).

With web design, there are so many more things to take account of: your site goals, your brand, your users. These expectations shape every bit of web design, while art remains untouched.

Design and Aesthetics

Another important distinction to make is the difference between design and pure aesthetics. While all design incorporates aesthetic — and truly, everything in the world has some form of aesthetic — some designs do it better than others.

Take a look at Google’s home page:

Google has looked like this (with the exception of few small changes throughout the years) since we can all remember. And it’s designed perfectly because it fulfills the expectations of the site’s users. It looks nice without being obtrusive and obnoxious towards the user experience. Google, throughout all their websites, has mastered the difference between design and aesthetics.

Although the term "aesthetics" has broad and varying definitions, I’m using it here to refer to "eye-candy." Superficial designs that exist for the sake of beauty. If we were to put it on a scale, I would say most art is near 100% aesthetics (which is not a bad thing, eye-candy can be meaningful too) and Google is somewhere around 5%. Your browser’s default style sheet is 0%.

So this is something designers need to keep in mind: balancing form with function. Function is at the heart of the Web. Almost everything we do online has a purpose and a meaning. We engage with web designs every day, and the good ones are usually more functional than they are beautiful.

Below are some more designs with minimal eye-candy that are actually designed really well.

Delicious does a great job of balancing their layout. Without getting too deep into eye-candy, they make a giant torrent of information manageable.

Zen Habits has a super minimal site design, but it coincides perfectly with the content’s theme and goals.

CloudApp is a little more visually exciting than the ones above, but the design is still subtle. This combination of minimalism and great use of visuals reflects the design of their product perfectly.

These sites probably wouldn’t do so well in your favorite web design galleries. They’re not incredible to look at, and they won’t blow your mind.

However, they do exactly what they are supposed to do: they provide their site visitors with tools and specific information in a logical order (using concepts like visual weight and gestaltism) and then they get out of your way. And that is why they are so well-designed.

Expectations of a Design

The most important user expectation is that design should look like design. Website design should be immediately recognizable as at least one thing: not art.

Look at the screenshot below, taken from a Toyota minisite.

When I first visited the site, I didn’t know what its purpose was. After poking around a bit, it seems like some sort of way to promote new technology from Toyota, but there are a million better ways to do this. It’s far from user-friendly and my expectations were shattered immediately.

These expectations define user interactions on every site. We put site navigation and logos near the top of the design. We provide common site components like search features, social media integration and web forms in a predictable way.

Why? Not because this is an innate human expectation, but because design has evolved in such a way to foster and reinforce these standards.

Art and design aren’t mutually exclusive, even if there’s a clear line between the two. Beautiful sites can still be usable, and they can still surprise us without being disorienting.

But there will always be noticeable constraints in web design that are bound by things such as technology limitations, accessibility, usability, site speed, and so on.

From N.Design Studio.

Objectives of Design

One of the great divides between art and design is the objective. John O’Nolan wrote on Webdesigner Depot:

Typically, the process of creating a work of art starts with nothing, a blank canvas. A work of art stems from a view or opinion or feeling that the artist holds within him or herself. They create the art to share that feeling with others, to allow the viewers to relate to it, learn from it or be inspired by it.

By contrast, when a designer sets out to create a new piece, they almost always have a fixed starting point, whether a message, an image, an idea or an action.

I will have to disagree with O’Nolan here: Artists, just like designers, sometimes start out with a message, idea or an action they want to motivate. Every work of art and design has a message, but each has its own agenda.

Art doesn’t need to be understood — it’s digested and interpreted differently by each viewer (another point O’Nolan brought up in his article, which I agree with).

The accuracy of the statement that a piece of art makes is not always so important; artists often leave their work open-ended.

On the other hand, design is meant to be understood and interpreted uniformly by everyone. As I said before, it has to be consistent.

Is this too limiting? It really isn’t. The consistency that design requires is not aesthetic. It’s functional. That’s why it’s not important to have your design display exactly the same in every browser. Although art is information in itself, web design is a gateway to information. That’s all the user cares about.

So the consistency required on a website is only user-specific. A user is rarely going to use Firefox and Internet Explorer to access the same website and be surprised by the inconsistency. Where the issue of consistency gets interesting is mobile design. But that’s a whole other story for another day.

Evolving from Art to Design

The face of the Web would be interesting if the unrestrained creativity allowed in the art world was also permitted in web design. But this isn’t the case, and as designers, we’re responsible for creating great design that meet user expectations and site objectives.

Forget your newfangled CSS3, forget your jQuery for a while and get back to zero.

Here are some tips to separate your design from art:

  • Balance usability and content. Although content precedes design, inaccessible content is useless.
  • Always write code to a standard and follow best practices. The Web can only advance if we stick together and move forward as a whole.
  • Even though the Web is full of limiting technology considerations, we can’t stop being creative. In fact, to push pass these barriers and expectations, we have to be even more imaginative than before.
  • Start from scratch and keep it simple. Keep reductionism and minimalism in mind for clutter-free designs.
  • And once you’ve mastered good design, keep pushing through and make it great.

Related Content

About the Author

Delwin Campbell is a web developer (among other things) at No Enemies, based in Austin, Texas. He is a crazy person with too many hobbies; right now he’s learning Swedish! Check out his personal site.

40+ The Best Photoshop Tutorials For Stunning Photo Effects

Photoshop is a digital imaging application of the most widely recommended by the graphic designers. This is because these programs have many advantages with the various tools that exist when compared with similar applications. In addition there are also some features that are fairly complete, ease of use, and also compatibility with some special digital imaging plug-in. With so many tools available in Photoshop application allows you to be creative to produce work of high art and artistic. Some applications that exist in Photoshop is capable of producing various kinds of image effects, photo manipulation, image abstract design, 3D, and several other design features with a very satisfactory quality. In this post we gathering together more than 40 different Photoshop tutorials to help you learn amazing features of this graphic design software to create stunning photo effects.

Photoshop Tutorial: How To Create A Fantasy Flower Creature

In this fantasy tutorial, we are going to create a cool flower creature. I will show you exactly how to do it! We will be using Photoshop CS3 to create this image.

Photoshop Tutorial: How To Create A Fantasy Flower Creature

Fantastic Tree

Have you ever seen Tree God in some fantasy movies? Is it very fantastic co do? This tutorial will show you have to make your all Tree God.

Fantastic Tree

Golden Apple Tree

In this tutorial Alexandra shows us how to create a Golden Apple Tree using Photoshop masks, layers, and tools.

Golden apple tree

Create A Realistic Break-Apart Effect With Debris Brushset In Photoshop

In this tutorial, author will show you an interesting technique he use to produce realistic break-apart/disintegration effect in Photoshop by using debris brushes, with a watercolour background attached.

Create a Realistic Break-Apart Effect with Debris Brushset in Photoshop

Amazing Photoshop Light Effect In 10 Steps

Learn how to create an amazing dreamy and fantasy lighting effect in ten steps in Adobe Photoshop.

Amazing Photoshop light effect in 10 Steps

Luxury Retro Car Poster With Paint Splashing Effect

Create a nice photo manipulation with classic Talbot-Lago car, paint splashes and dramatic background.

Luxury retro car poster with paint splashing effect

Achieve Brilliant Lighting Effects In Photoshop

In this tutorial, you’ll learn the essential process of achieving brilliant lighting effects in Photoshop. Using default brushes, blending options and a few stock images, you’ll learn step by step a variety of techniques that you can use in your own digital artworks to achieve professional results.

Achieve Brilliant Lighting Effects in Photoshop

Making A Superhero Movie Teaser Poster

In this tutorial I will give you an example of how to create a movie teaser poster. It will show you how to draw a mask for your character using the pen tool , blend modes and textures.

Making a Superhero Movie Teaser Poster

Create A Light Effect Photomanipulation Using Photoshop

In this tutorial I will teach you how to create a Lighting Photomainpulation using Photoshop. You will learn how to use different settings to fill out your canvas with nice lightnings and blending modes using different stock images to create good lighting effects.

Create A Light Effect Photomanipulation Using Photoshop

Playing With Custom Brushes To Create Magical Scenes

In this tutorial author want to show you some powerful features of brushes. We will start with a musical note shape to create a custom brush and deal with some options like shape dynamics and scattering.

Playing with custom brushes to create magical scenes

Make Your Photos More Intense In 12 Easy Steps

This tutorial aims to show how a few simple steps can add real intensity to your image.

Make Your Photos More Intense in 12 Easy Steps

Cute Flying Hippo

Create humor scene with funny flying hippo in the nest, using simple Photoshop tools.

Cute flying hippo

Create A Refreshing Beer Themed Poster  Design In Photoshop

When you create a print advertisement, it’s important that all the elements of your composition are geared towards selling a product and promoting a brand. In this tutorial we will demonstrate how to create a refreshing beer-themed poster design in Photoshop.

Create a Refreshing Beer Themed Poster  Design in Photoshop

How to Mix Hand Drawing Sketch With Photo

In this Photoshop tutorial we will show you how to create nice unique photo effect from sketch and your photo. We will use many tools in Photoshop and also you will need some skills in drawing as to create this effect you will need to draw sketch.

How to Mix Hand Drawing Sketch With Photo

Make A Divinely Dark Zen Composition In Photoshop

In this Photoshop tutorial, we will photo manipulate different photos, textures and organic elements to produce a mysterious Zen-inspired composition.

Make a Divinely Dark Zen Composition in Photoshop

Honey Leaking Effect On The Delicious Pancake

In this tutorial we will learn how to create a tasty sweet honey leaking pancake text effect in Photoshop and learn how to create realistic sweet honey text effect on the delicious pancake.

Honey leaking effect on the delicious pancake

Create A Fictional Arctic Snow Frog In Photoshop

In this tutorial, we will combine several stock images and effects to create a fictional arctic snow frog in Photoshop. As you can see, some of his unfortunate friends are frozen into the ice behind him and his meal is frozen just out of reach.

Create a Fictional Arctic Snow Frog in Photoshop

Create A Unique Steampunk Photo Manipulation In Photoshop

In this tutorial I will be showing you how to create a composite image using various elements that will come together to make a unique Steampunk design. We will be using the Pen Tool, Layer Masks and Adjustment Layers, and doing quite a bit of Photo Manipulating throughout the tutorial.

Create A Unique Steampunk Photo Manipulation In Photoshop

Create A Funky Urban-Inspired Scene In Photoshop

In this tutorial, we are going to create a colorful scene inspired by breakdancing and the urban lifestyle. We will be using some Photoshop brushes, photo-blending techniques, and advanced lighting techniques to achieve the final result.

Create a Funky Urban-Inspired Scene in Photoshop

Create A Surreal Out Of Bounds Photo Manipulation In Photoshop

In this tutorial we will combine several images of water, animals, and people to create a surreal out of bounds photo manipulation in Photoshop.

Create a Surreal Out of Bounds Photo Manipulation in Photoshop

Create A Striking Nature Scene In Photoshop

In this tutorial I am going to show you how to create a nature inspired design that is both organic and visually arresting. We will be covering some useful tips as we work through the process of creating a striking image that will show a helpless being pulled into the powerful grasp of nature.

Create A Striking Nature Scene In Photoshop

Create Blood and Milk Typography Poster in Photoshop

With this technique you can create interesting flayer for dace club or you can use in advertisements. To create this typography poster we will use some paint splashes, custom fonts and few stocks from Deviantart and of course your knowledge.

Create Blood and Milk Typography Poster in Photoshop

TV Aquarium Digital Drawing

Interface drawing with water and broken glass photo effects.

TV aquarium Digital drawing

Create Dramatic Meteor And Burning City Effect In Photoshop

In this tutorial, I will show the methods I use to create a Dramatic Meteor and Burning City Effect in Photoshop. This is an intermediate level tutorial so some steps can be a little tricky for beginners.

Create Dramatic Meteor and Burning City Effect in Photoshop

Living Paints

Use some brushes and stock photos to create an amazing composition – “Living Paints” . You can add some new objects to your work, match them and create your own unique result.

Living Paints (Exclusive Tutorial)

Creating An Abstract Ecology Scene With 3D Render

This is a walk-through of how author made the New Life artwork. It is a simple and short tutorial that focus on the basic Photoshop tool

Creating an Abstract Ecology Scene with 3D Render

Create A Magic Crystal Ball

In this tutorial we will learn how to create some cool effects, really easy and simple to do it. We will create an Magic Crystal Ball on the hands.

Create a Magic Crystal Ball

Create Beauty Woman Effect in Photoshop

In this Photoshop tutorial you will learn how to add light effects to your photo and create cool photo effect from your usual image. Step by step, we will show you tips how to work with lights in Photoshop.

Create Beauty Woman Effect in Photoshop

How To Break An Egg In Photoshop

Create this amazing broken egg illustration in Photoshop. This in-depth tutorial contains 50 steps to show you how to use shapes, gradients, selections, and more to create this artwork.

How to Break an Egg in Photoshop

Egg Planet Fantastic Globe Photo Manipulation

In this tutorial you’ll learn how to create an Egg Planet. Fantastic globe photo manipulation.

Egg Planet Fantastic globe photo manipulation

Shiny Lock Icon Design Tutorial

Following tutorial can be helpful in creating a good Icon design using Adobe Photoshop. The version author is working with here is CS3. If you follow the following steps you will definitely find your self with the final result

Shiny Lock Icon Design Tutorial

Phone Digital Rendering Photoshop Tutorial

In this tutorial you’ll learn how to create transparent glass and shiny phone in Photoshop.

Phone digital rendering photoshop tutorial

How To Create A Dark Emotional Photo Manipulation

This is a tutorial with a simple idea: to create an emotional photo manipulation. Following this tutorial, you will learn how to blend different images to make a dark atmospheric background, modify the dress of the model, apply makeup, paint hair, blend different objects in the background, and more – all to create a moody illustration.

How to Create a Dark Emotional Photo Manipulation

Creating A Modern, Glossy Mouse Icon In Photoshop

This tutorial is about creating the Apple Magic Mouse in Photoshop, though you could use these techniques to create other mouse icon design styles as well. The new design of this mouse just looks amazing. Creating it and using it as an icon makes it all that more fun and interesting.

Creating a Modern, Glossy Mouse Icon in Photoshop

Photo Manipulate An Explosive Magical Reading Scene

Learn how to create a magical scene, where a girl’s reading book comes to life and explodes with a fantasy world.

Photo Manipulate an Explosive Magical Reading Scene

Glass Yellow Tomatoes

In this design tutorial, you can learn how to create realistic glossy glass tomatoes with liquid in them, make reflections and shadows.

Glass yellow tomatoes

Fruit Bulb

Create Fruit bulb using PhotoShop effects, filters and layers.

Fruit bulb

Create An Incredible Story Coming Alive Fantasy Photomanipulation

In this fantasy photomanipulation tutorial, you’ll learn how to start with just a few stock images and quickly build up an incredible story-based artwork. You’ll see how to manipulate images, add effects and build an amazing artwork in this Photoshop photomanipulation tutorial.

Create an Incredible Story Coming Alive Fantasy Photomanipulation

Combine Photo Elements To Create A Surreal Photo Manipulation

This Photoshop tutorial, you will learn how to use a variety of color, lighting, and cut and paste techniques to create a surreal photo manipulation. Combine your creativity with these Photoshop techniques to create your own photo manipulation artworks.

Combine Photo Elements to Create a Surreal Photo Manipulation

The Creative Process Of “Summoning the Life” Digital Art

In this tutorial, author Valentin Petroff explains the creative process behind ”Summoning the Life” Digital Art in Photoshop.

The Creative Process of Summoning the Life Digital Art

Manipulate A Dancer Illustration In Photoshop

In this Photoshop tutorial, you’ll see how to manipulate a single stock image in Photoshop to create a dance illustration.

Manipulate a Dancer Illustration in Photoshop

Create A Mixed Media Piece Using Photoshop

In this tutorial I will be showing you how to take any drawing and turn it into a mixed media masterpiece using Photoshop. We will be combining some digital painting techniques with textures and light effects to achieve the desired result.

Create A Mixed Media Piece Using Photoshop

Logo Design Process And Walkthrough For BioThemes

The BioThemes logo was pretty different to the majority of logos I’ve worked on in the past, which made it a super interesting project.

Logo Design Process and Walkthrough for BioThemes

Tutorial: How To Design A Realistic Takeout Coffee Icon

In this tutorial we’re going to show you how to design an icon from our popular freebie, the Incredibly Detailed Drinks Icon Pack. We’ll walk you through the process of creating the takeout coffee cup from start to finish, exploring a wide variety of techniques in Photoshop that can be applied to almost any type of design and drawing.

Tutorial: How To Design a Realistic Takeout Coffee Icon

Related posts:

  1. 25 Cool Photoshop Photo Effects Tutorials
  2. 25 Photoshop Light Effects Tutorials
  3. 33 Fabulous Photo Manipulation Photoshop Tutorials

Pixmac Monthly Subscription Giveaway Winners Announcement

All last week we, together with Pixmac held a giveaway in which our readers were able to get the premium monthly subscription. And today he will announce 3 lucky winners. Read on to find out the lucky winners.

About Sponsor

Pixmac is a leading microstock photography site offering 11 million images at budget prices. Photos from $1 with the ability to source, download and buy an image in less than 3 minutes, with no registration process. Pixmac offers a fast, time-saving site with great customer service and a genuine respect for designer’s deadlines.

pixmac

And The Winners Are…

And finally about the winners. Totally we had thirty participants, a lot :), but only 3 will get the premium monthly subscription. I want to say thanks to everyone for the interest and for those who at this time didn’t win, wish to acquire a further other prizes in our giveaways. So, here are the winners.

pixmac

According these data, winners are:

  • Francois
  • Photoshoprint
  • Chris

Congratulations to our winners!

Winners will receive an email from Pixmac shortly with the information how you will be the premium monthly subscription.

In near future we will offer new giveaways, where you will be able to win other useful gifts, so I recommend you to subscribe to our Rss feed or follow us on Twitter and you will get latest updates.

Related posts:

  1. Premium Brushes Packs Giveaway Winners Announcement
  2. Giveaway: Win $199 Stock Photo Account from Pixmac
  3. Business Icon Set Giveaway Winners Announcement

54 Unique Pocket Folder and Office Stationery designs

In order to find a unique brand identity, it is ideal for a company to use authentic office stationery. This way, not only are you able to create effective marketing tools, it also makes your company look more professional in the eyes of your clients.

Brochures, business cards, promotional CDs, letterheads and other documents that bear the name and logo of your company are considered office stationery.  To be organized, these office stationery are often placed inside special containers called presentation folders or pocket folders. While we often see pocket folders used by people working in the field of sales, they can be used for so many different purposes such as academic prospectuses or for detailed lists of hotel/resort services and amenities. Like a book’s cover, a pocket folder’s design will be scrutinized by clients which makes it arguably the most important tool at least for presentation purposes. By all means, it should look attractive and should encourage potential clients to find out more about your brand or services.

We have collected 54 unique samples of pocket folders and other office stationery  for your design inspiration. Get ideas from these works so you can find the perfect design for your own office stationery.

 

Pocket Folders

 

Pocket-Folder-01

Pocket-Folder-02
Katerina Gavrikova
View Source

 

Branches Catering Corporate Identity

Pocket-Folder-03

Pocket-Folder-04
Lacey Ackerman
View Source

 

Promotional Materials for Event Planner

Pocket-Folder-05
Jerry Lund
View Source

 

Passaic Bergen Water Softening Identity

Pocket-Folder-06
Enzo Creative
View Source

 

Liberty-izone Limited – A4 Oversize Folder with Pocket

Pocket-Folder-07
etchtank
View Source

 

Hersheys Press Kit

Pocket-Folder-08

Pocket-Folder-09

Pocket-Folder-10
Tiffany Valdez
View Source

 

JP Projetos

Pocket-Folder-11
Sisson Studio
View Source

 

Arabella Papers: Varsity II

Pocket-Folder-12

Pocket-Folder-13
Cassandra Johnson
View Source

 

Urban II

Pocket-Folder-14
Cassandra Johnson
View Source

 

#23

Pocket-Folder-15

Pocket-Folder-16
Aitor García
View Source

 

Loeb & Troper

Pocket-Folder-17

Pocket-Folder-18
Christina Weissman
View Source

 

Orlando Magic Pocket Folder

Pocket-Folder-19

Pocket-Folder-20
Tucker Brooks
View Source

 

NetSignature Stationery

Pocket-Folder-21
serso
View Source

 

Michigan League for Human Services

Pocket-Folder-22

Pocket-Folder-23
Chrissy Greenough
View Source

 

CBCO – folders

Pocket-Folder-24

Filipe Rocha
View Source

 

FOTOS + DESIGN: Folders para o Grupo BTM

Pocket-Folder-25

Pocket-Folder-26

Diretorio de Filmes
View Source

 

LG Electronics – B2B Salesfolders

Pocket-Folder-27

Oliver Funke
View Source

 

Web, Sistemas e Externa

Pocket-Folder-28

luizsorriso
View Source

 

Capa Proposta Técnica CDHU

Pocket-Folder-29

gabriellehorvath
View Source

 

Misc. Folders

Pocket-Folder-30

 

Pocket-Folder-31

Devlaur Design
View Source

 

Office Folders

Pocket-Folder-32

 

Pocket-Folder-33

Devlaur Design
View Source

 

Article XIX | Global Campain for Freedom of Speech

Pocket-Folder-34

Pocket-Folder-35

Gabriel Menezes
View Source

 

Kit Folders Destinos

Pocket-Folder-36

Tau Fernandes
View Source

 

SwitchIt

Pocket-Folder-37

kuvisualcommunication
View Source

 

Kavaleriet

Pocket-Folder-38

genspejl
View Source

 

Lugo

Pocket-Folder-39

Pocket-Folder-40

Kerr Vernon
View Source

 

itaca wine brokers

Pocket-Folder-41

Pocket-Folder-42

Grace Chao
View Source

 

 

Office Stationery

 

Devil Penguin Stationery Set

Office-Stationery-01

devil-penguin
View Source

 

Matjaz Cuk Visual Identity

Office-Stationery-02

Matjaz Cuk
View Source

 

The Sweet Spot

Office-Stationery-03

Kayd Mustonen
View Source

 

 

MTV Networks Stationery

Office-Stationery-04

Office-Stationery-05

DMCI
View Source

 

Blueprint – Stationery

Office-Stationery-06

grvision
View Source

 

Business Cards, Envelopes & Letterhead

Office-Stationery-07

Steven Jockisch
View Source

 

Sticks + Stones Stationery Company

Office-Stationery-08

Kathryn Chase-Levin
View Source

 

Llama Bean Ranch Stationery

Office-Stationery-09

Kerry Scott Jenkins
View Source

 

The MINE Stationery

Office-Stationery-10

Isaac Arthur
View Source

 

Untitled

Office-Stationery-11

Emma Rogan
View Source

 

The Pretty Post

Office-Stationery-12

LisaBohnCreative
View Source

 

Untitled

Office-Stationery-13

julieyeem
View Source

 

Alpine Valley Station

Office-Stationery-14

nikki
View Source

 

business stationery

Office-Stationery-15

sophiastupperich
View Source

 

arthouse

Office-Stationery-16

pixelmunch
View Source

 

Classic Bag

Office-Stationery-17

Eggs and Logs
View Source

FNM_MAM

Office-Stationery-18

Piotrek Chuchla
View Source

 

Branding & Stationery

Office-Stationery-19

Örgüt Çayl?
View Source

 

The Office of Michael Clinard

Office-Stationery-20

 

Office-Stationery-21

Tim Lahan
View Source

 

BIPC Corporate Stationery

Office-Stationery-22

cooluani
View Source

 

Glow stationery

 

Office-Stationery-23

samerwagdyhalim
View Source

 

Business Stationery Zoom

Office-Stationery-24

VosjeE
View Source

 

JBC Concept 2

Office-Stationery-25

daveycoleman
View Source

 

Refresh – Logo and Stationery

Office-Stationery-26

ayamsuhayam
View Source

 

GhostTrap stationery

Office-Stationery-27

MathiasLM
View Source

 

Earth2Class Stationery

Office-Stationery-28

vortiss
View Source

 

Willow Dental

Office-Stationery-29

Siew Ling Chow
View Source

 

Win a Free Copy of Filter Forge (x3)

Let’s be honest, most of Photoshop’s default filters and effects can be a bit cheesy. We recently introduced you to Filter Forge, a third-party plugin for Photoshop that allows you to do some pretty amazing things with filters, and even create your own. We also gave away several copies of Filter Forge Basic Edition to several lucky Psdtuts readers. Today, we have decided to do it again by giving away another 3 copies. To enter, all you have to do is submit your entry using the form below.

Filter Forge is a versatile Photoshop plugin which allows both novice and expert users create a wide variety of realistic and abstract textures and effects. Users can take instant advantage of over 8100 free community-created filters in the online filter library, or create their own filters in the visual filter editor by assembling them from components such as blurs, gradients, color adjustments, noises, distortions, or blends – without writing a single line of code.

In this image Filter Forge was used to create the snakeskin: Pattern maps, bumpmaps, and normal maps. The 3D model was made in Microstation V8i, rendered with Luxology Render. No post work.

On the surface, Filter Forge is just a Photoshop plugin, a pack of filters that generate textures, create visual effects, enhance photos, and process images. However, there are some things that make Filter Forge unique:

  1. You can create your own filters. Filter Forge comes with a visual node-based editor allowing you to create your own filters – textures, effects, distortions, backgrounds, frames, you name it. All filters automatically support 16- and 32-bit modes in Photoshop, real-world HDRI lighting, bump and normal maps, huge resolutions, and most filters can be seamlessly tiled.
  2. You get free access to over 8100 user-created filters. Afnyone can contribute their textures and effects to the online filter collection so it grows with every submitted filter. This means the more people use Filter Forge, the better it gets.

To win a free copy of Filter Forge, all you need to do is enter using the form below.


Up For Grabs

  • 1 copy of Filter Forge Basic to 3 readers

Rules

  • To enter, submit your entry using this form.
  • You may only enter once.
  • Make sure to enter a valid email address so that we can contact you.
  • Entries will be accepted until Friday, September 2, 2011 at 11:59 PM, EST.

To learn more about Filter Forge, visit their website, download the demo version of the software, and check out their gallery.

Editor’s note: This post was sponsored by Filter Forge.


Create a Floating Over-Grown “Tree House” in Photoshop

Photoshop is great because it allows us to create scenes that wouldn’t otherwise be possible in real life. In this tutorial we will combine several stock images to create a floating over-grown tree house in Photoshop.


Tutorial Assets

The following assets were used during the production of this tutorial.


Step 1

Download and open in Photoshop the large sky photo – 2240px * 1680px. Rotate the Canvas, choose Image > Rotate Canvas > 90° CW.


Step 2

Then choose Rectangular Marquee Tool , choose Fixed Size with Width = 1104px and Height = 1428px and create selection of the area like on the screen shot. Go to Image > Crop.


Step 3

Duplicate sky background layer and apply Auto Contrast adjustment to it, Image > Adjustments > Auto Contrast. Apply Multiply Blending Mode to this layer and Opacity 75%. Add Layer Mask to the duplicated layer – click small icon in the bottom of layers palette. Make mask active and fill it with the linear Black and White gradient.


Step 4

Create a new adjustment layer, click small icon in the bottom of layers palette, choose Color Balance from the drop down menu. Apply following settings.


Step 5

Insert soil sphere, select outside area and remove it. In order to load selection of white background, you may use Magic Wand Tool. Rotate this shape to move dark part of the sphere on the left side, Edit > Transform > Rotate.


Step 6

Add Layer Mask to the soil layer and erase selected area with small round black brush. You may correct erased contour by using white brush.


Step 7

Create a new adjustment layer, click small icon in the bottom part of layers palette, choose Levels. In order to apply levels changes just for the soil shape, right click to adjustments layer and find "Create Clipping Mask". Set levels adjustments and erase left part of adjustment layer with large soft brush.


Step 8

Then create one more adjustment layer clipping mask – "Selective Color" in this time. Apply setting like on the screen shot. Process layer mask with soft brush to create crumbly, spotty texture.


Step 9

Create a new empty layer, make Clipping Mask from it like with the previous adjustments layers. Draw a ragged contour for the bottom part of the shape. Use regular round brush and "Texture 3" brush from assorted brushes set.


Step 10

Apply Multiply Blending mode to the created clipping mask layer, set Fill = 60, apply Inner Shadow layer style effect.


Step 11

Insert green tree image, select blue sky and white clouds around the tree by using Magic Wand Tool with setting like on the screen shot. click with Wand Tool several times to caver all sky and white clouds. Clear selected sky area and erase bottom part of the image with Eraser Tool.


Step 12

Correct the green shape with Warp transformation to make it more spherical. Edit > Transform > Warp.


Step 13

Add Layer Mask to the green sphere and erase bottom part. Try to create ragged and snaky contour. You may use textured brushes from the Photoshop preset assorted brushes set.


Step 14

Add Drop Shadow and Gradient Overlay layer style effects to this layer. The center of gradient area is marked with red color on the second screen shot.


Step 15

Create new adjustments layers for the green shape – "Color Balance" and "Brightness and Contrast", make clipping masks from them.


Step 16

Process green shape top contour with Blur Tool, choose small soft brush for it and strength – 100%.


Step 17

Open branches photo. Make this image black and white. Image > Adjustments > Black & White (none preset).


Step 18

Correct levels settings for this photo, make it more contrast, play with black and white markers to make very dark branches and white background. Don’t pay attention to bottom part of the image. We will use only top branches.


Step 19

Then load selection for the white background. Go to Select > Color Range. Set Fuzziness around 100% and click with Eyedropper Tool in the white background area, say Ok. Clear selected area. You should have dark branches on the transparent background.


Step 20

Apply Flip Vertical transformation to the layer with branches. Edit > Transform > Flip Vertical. Select bottom part of branches and copy selected area.


Step 21

Paste copied part of branches above brown soil layers and below green sphere. Erase outside branches


Step 22

Apply Multiply Blending Mode to branches and Opacity 65%. Add Gradient Overlay layer style effect.


Step 23

Insert Old Barn image. Erase bottom selected area, use Layer Mask as in the previous steps, it helps to correct erased area many times. Use black brush for erasing and white for restoring. In order to make contour smooth process bottom barn contour with translucent textured Brush.


Step 24

Create several adjustment layers – "Hue/Saturation", "Color Balance", Levels, "Brightness&Contrast". Apply settings like on the screen shot, play with them may be you will fin better combination.


Step 25

Erase selected areas in the "Levels" and "Brightness & Contrast" adjustments layers masks with using large soft brush.


Step 26

You should have something like this:


Step 27

Insert roots image, erase background area with round Eraser Tool. Transform roots image to fit it into Green Sphere shape, Edit > Transform > Free Transformation.


Step 28

Add Layer Mask to the roots layer, then make active main roots layer thumbnail, go to Select > Color Range click with eyedropper tool to the green spot, say "Ok". You will have very similar selection like on the screen shot.


Step 29

Keep selection, make active roots Layer Mask and erase selected green spots, avoid roots. Then go to Color Range again and click with Eyedropper Tool in the other color spot of roots background (yellow, light brown colors), load selection. Erase selected background spots again, avoid roots. Create temporary white layer below roots layer to see result of your actions.


Step 30

Repeat previous actions several times. In final, you may erase and correct roots contour without Color Range selection, just using textured brush. Background shouldn’t be absolutely clear. Correct roots shape with Warp transformation to make it more spherical.


Step 31

Remove white layer.


Step 32

In order to correct brightness and color shade, create new adjustment layers – "Selective Color", "Color Balance", "Levels". Erase left and right side of the "Levels" mask with large soft brush.


Step 33

Create a new empty layer above roots layers, load selection for green shape and fill selected area in a new layer with any color, adjust Fill = 0%. Apply Gradient Overlay effect, the same as for Green Sphere early.


Step 34

Open tree image, unlock background layer, load selection for background color with Magic Wand Tool and clear selected areas. Erase bottom part with Eraser Tool.


Step 35

Place tree layer with transparent background to the top of all crated layers. Set Opacity 94%, add adjustment "Selective color" layer and Inner Shadow effect.


Step 36

In order to make shadow effect on the roof, create a new layer below tree layer and draw a simple shape like on the screen shot, process left edge with Blur Tool. Set Fill = 0%. Apply Gradient Overlay effect to this layer.


Step 37

Insert another roots picture, erase red marked space.


Step 38

Create adjustments Clipping Masks – "Selective Color", "Color Balance", "Levels". Correct "Levels" Layer Mask with round soft brush.


Step 39

Return to the bottom sky levels. Group sky and sky adjustments layers. Duplicate the group and merge it. Place merged sky layer above all created layers. Add layer mask to this layer and fill it with black color. Then chose translucent soft and round white color Brush Tool (Opacity ~ 16-20%). And restore some areas next to the top branches of the tree and green sphere contour – see red marked spots. Restored areas should be translucent.


Step 40

Duplicate merged sky group once again, place it above just created layer from the previous step. Find Channels palette and duplicate red channel. Make duplicated channel very contrast by using levels settings. Command/Ctrl + click red channel thumbnail to load selection for the white area or click small icon in the bottom part of channels palette.


Step 41

Keep selection, make visible RGB channel and return to layers palette, go to Select > Inverse. Then clear inverted selection area. You should have something similar:


Step 42

Add layer mask to the white clouds layer and erase most part of it (red marked zone). Just leave some white clouds in the bottom left and right parts of photo manipulation.


Step 43

Create a new white layer. Go to Filter > Distort > Lens Correction. Apply Vignette effect.


Step 44

Apply Multiply Blending Mode to created layer, Opacity 70%, add layer Mask and fill it with linear black and white gradient.


Step 45

Merge all created layers.


Step 46

Retouch merged layer. Hide scratchy areas and edges between different details of composition by using Stamp Tool. In order to make edges between tree branched and green leaves smoother choose textured brush for the stamp, set the sampling point by positioning the pointer in green leaves area and Alt-clicking (Windows) or Option-clicking (Mac OS). Then add some green spots from cloned source above branches. Repeat this action several times to hide all rough spots. You may use this instrument to correct and smooth foliage area between sky and barn wall.


Step 47

You may also use Patch Tool to correct some bugs.  Drag the selection border to mask edges between different stock images. When you release the mouse button, the trace of the selected area is patched with the sampled pixels. 


Step 48

Correct branches tips with Smudge Tool.


Step 49

Duplicate retouched layer, apply Gradient Map to it. Image > Adjustment > Gradient map.


Step 50

Duplicate layer with Gradient Map effect two times. Apply Multiply Blending Mode and Opacity 14% for the bottom one and Normal Blending Mode and Opacity 18% for the top gradient layer.


Step 51

Insert stars image, apply Auto Contrast and Auto Levels to it, choose Screen Blending mode. Also open Levels setting and move black marker little bit right, until the star background becomes absolutely transparent. Erase some stars.


Step 52

Insert old paper image, make it black and white. Image > Adjustments > Black and White (preset none). Apply Soft Light Blending Mode to this layer and Opacity 79%.


Final Image


5,000+ Free Photoshop Gradients for Designers

Gradients are commonly used in web and graphic design. Having a large collection of gradients already prepared will allow you to try new gradients quickly, speeding up your design process. Of course, there will be times when you want to create your own gradients, but for other situations a library of presets can be an effective tool.

In this post we’ll showcase 35 free sets of gradients that are being offered by various designers. If you see something you like, click through to the source where you’ll be able to download them.

Web 2.0 Gradients (1,000 gradients)

Web 2.0 Gradients

Ultimate Web 2.0 Gradients (130 gradients)

Ultimate Web 2.0 Gradients

Web 2.0 Gradients (156 gradients)

Web 2.0 Gradients

Realistic Sky Gradients (15 gradients)

Realistic Sky Gradients

Vintage Gradients (20 gradients)

Vintage Gradients

Adobe Gradients Pack (14 gradients)

Adobe Gradients Pack

The Ultimate Gradients Pack #1 (110 gradients)

The Ultimate Gradients Pack #1

The Ultimate Gradients Pack #2 (110 gradients)

The Ultimate Gradients Pack #2

The Ultimate Gradients Pack #3 (110 gradients)

The Ultimate Gradients Pack #3

The Ultimate Gradients Pack #4 (110 gradients)

The Ultimate Gradients Pack #4

The Ultimate Gradients Pack #5 (110 gradients)

The Ultimate Gradients Pack #5

The Ultimate Gradients Pack #6 (110 gradients)

The Ultimate Gradients Pack #6

Clean Gradients Set (50 gradients)

Clean Gradients Set

iPhone Gradation Set (22 gradients)

iPhone Gradation Set

Modern Photoshop Gradients (75 gradients)

Modern Photoshop Gradients

Tango Gradients (9 gradients)

Tango Gradients

Doofy Gradients Set 001 (15 gradients)

Doofy Gradients Set 001

Doofy Gradients Set 002 (30 gradients)

Doofy Gradients Set 002

Apple Gradients (54 gradients)

Apple Gradients

Web 2.0 Gradients (40 gradients)

Web 2.0 Gradients

Landscape Gradients (100 gradients)

Landscape Gradients

Ocean Breeze Gradients (140 gradients)

Ocean Breeze Gradients

Skin Tones Gradients (126 gradients)

Skin Tones Gradients

Sky Gradients (37 gradients)

Sky Gradients

Vintage Gradients (45 gradients)

Vintage Gradients

51 Gradients

51 Gradients

88 Gradients

88 Gradients

66 Gradients

66 Gradients

43 Gradients

43 Gradients

Nature’s Beauty Gradient (81 gradients)

Nature's Beauty Gradient

400 Gradients

400 Gradients

98 Gradients

98 Gradients

208 Gradients

208 Gradients

Sky Gradients (11 gradients)

Sky Gradients

For more design resources please see:

Royalty-Free Graphics