Psdtuts+

The Remarkable Concept Art and Environments of Jonas De Ro

Grant Friedman — Fri, 17 May 2013 06:00:07 PDT

Jonas De Ro is a Belgian concept artist, currently residing in the United Kingdom. In this article, we will take a look at some of our favorite work from his portfolio.

Making Complex Selections (Part 2)

Martin Perhiniak — Thu, 16 May 2013 10:01:49 PDT

Making very complex selections can be quite a difficult and time-consuming task. In this tutorial, we will focus on pixel masks to help us to create a complicated selection of a furry animal. We will use several Photoshop tools including Color Range, the Lasso Tool, as well as custom Brushes. Let’s get started!

Tutorial Assets

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

Lion

Tuts+ Premium Cash Back Offer: 3 Days to Go

Joel Bankhead — Thu, 16 May 2013 07:00:38 PDT

This offer ends soon! Act now and don’t miss out on cash back when trying a monthly Tuts+ Premium subscription.

At $19 a month, Tuts+ Premium is fantastic value. But it’s even better when we hand your first $19 right back to you!

For a limited time we’re offering $19 cash back to new Tuts+ Premium monthly subscribers when signing up via PayPal. If you’ve been thinking about checking out our extensive library of courses, tutorials, eBooks and guides there’s never been a better time to join up and dive in.

This offer ends at noon on the 20th of May AEST, so act fast.

Become a Tuts+ Premium Member and take your creative & technical skills to a new level.

What can you learn on Tuts+ Premium? Glad you asked! Currently, more than 15,000 members are sharpening their skills in a wide range of areas including web design, web development, Photoshop, vectors, video effects, and many more.
With Tuts+ Premium you learn from expert instructors in every field, such as:

Designer Justin Maller (Nike, Verizon, DC Shoe Co.)
Illustrator Russell Tate (McDonald’s, Coca-Cola)
Developer Burak Guzel (Software Engineer at Facebook)

Join now and get instant access to your very own library of courses, tutorials, and eBooks, available whenever you need them. Become part of a community of over 15,000 members and start getting better at the skills you care about. Our dedicated team adds new content weekly so there’s always something fresh to sink your teeth into.

Join Tuts+ Premium

Create a Fantasy Storybook Illustration – Tuts+ Premium Tutorial

Liran Szeiman — Tue, 14 May 2013 06:30:04 PDT

Good storybook illustrators know how to tap into a child’s imagination. In this Tuts+ Premium tutorial by Liran Szeiman, we will show you how to create a fantasy storybook illustration that depicts a child riding a pet spider. This tutorial is available exclusively to Tuts+ Premium Members and includes both written and video content. If you are looking to take your digital illustration and character design skills to the next level then Log in or Join Now to get started!

Speed Painting Video

View the Tutorial

Tuts+ Premium Members can login now for instant access to this tutorial. Membership to Tuts+ Premium gets you access to hundreds of exclusive premium tutorials, top selling ebooks, in-depth courses, member forums, and much more. To learn more about Tuts+ Premium, Take the Tour or Join Today.

Photoshop’s Role in a Web Design Workflow

Ian Yates — Mon, 13 May 2013 07:30:41 PDT

The web has undergone some serious changes in recent years and the way in which the web is designed is changing along with it. Photoshop may still be the “go-to” tool for many web designers, but for some, Photoshop is no longer king. In this article, Ian Yates, Editor of Webdesigntuts+ will explain how Photoshop was used in the past, how it can be used in the future, and why.

What is it Good For?

Technically speaking, Photoshop is an application for manipulating imagery (forgive me for stating the obvious there) but it’s also packed with tools for building graphics from scratch. Shape, vector, type, fills and effects, all of these (and more) lend themselves very well to constructing graphic layouts.

Not too long ago, web browsers were incapable of directly generating these kinds of effects themselves, but they could display bitmap images perfectly well. In order to explore graphic design within a browser it was only logical to reach for Photoshop, create your visuals, save them as images and use them within a web page.

Gradients, shadows, patterns, angles; all easy to create with Photoshop’s tools – not too easy to create with anything else.

Building for the web was also relatively complex (far less streamlined than nowadays) so mocking up a layout in Photoshop was always going to be easier and quicker than battling with Dreamweaver. Why wouldn’t you design in a graphics application, get approval from the client, then actually build for the web? Today’s designers have grown up using Photoshop because it offered the quickest way to visualize a hi-fidelity design concept.

kuhboom.com: Densely textured web designs will have you reaching for the slice tool.

The Legacy of Print Design

Back when the web was an emerging medium there were no “web agencies”, so the task of crafting it fell to print designers. These guys did what was logical; they took their digital print design experience, values, techniques, processes and tools, then applied them to this brave new world. They effectively ported print design to the screen, so the workflow already existed:

All that needed altering was the final output. As such, Photoshop witnessed the changes and went along for the ride, further rooting itself as the graphic designer’s best friend.

What are its Limitations?

Times they are a-changin’ (as Bob Dylan said). The web is a different place these days and Photoshop’s role in the process of designing for that web is also changing. Why?

A big part of the issue lies in technological advancements which have driven huge change in web design over recent years. We’ve seen the internet grow from a library of static documents to an interactive pool of services and applications. Network providers have spread their fingers into almost every corner of the globe, bandwidth and speed have increased to science fiction-like levels. Internet enabled devices such as smartphones, tablets, even watches, are manufactured affordably and rapidly. All of this has revolutionized the way in which we use the web – and it’s drastically altered our perception of how we should be designing for it.

A Fluid Web

Print designers begin with constraints (the fixed dimensions of a page) then design within them. When first designing for the web this was also a logical starting point; establish a fixed canvas and work inwards. To figure out what those fixed dimensions should be, designers had to make assumptions about end user screen sizes. Very early on 800x600px was most common. Later, 1024x800px was the norm. Working to a grid of 960px made sense because it fit most screens (larger screens were rare, owners of smaller screens would just have to upgrade eventually) and was divisible by a range of column widths.

These assumptions were wrong then (forcing a user to adjust their browsing to your design?!) and are even more so these days. How big is a web page today?

From Brad Frost’s This is the Web

Back in May 2010 a chap called Ethan Marcotte wrote about a brilliant idea he’d conceived. Taking existing technologies and methods he proposed an approach “Responsive Web Design” which utilized fluid layouts (not fixed), flexible images (which grow and shrink with the layout) and CSS Media Queries (which allow layouts to change depending on the screen size and other factors).

With these ideas the web changed, irreversibly.

Thanks to Ethan’s concepts, web designers have come to realize that they should be thinking from the content outwards, not the page boundaries inwards (though it should be noted that this approach isn’t compulsory). We don’t know how big a web page is, so we need to design our content to fit into whatever boundaries it’s faced with. Think of web content as being like liquid; capable of being poured into all manner of vessels.

Herein lies a problem for Photoshop. Photoshop inherently works to fixed boundaries. Shapes, type and objects within its layouts are fixed, whereas web pages increasingly aren’t. Producing a comp to present to a client used to be quickly achieved in Photoshop, but how can you effectively present a fluid layout as a static snapshot?

The Next Web as presented by mediaqueri.es

The Problem With Pixels – I

Typography is another great example of print designers trying to force constraints onto end users. Every user’s browser gives them the power to set their default type size; after all, some people prefer smaller lettering, whilst others might prefer an easier reading experience with larger type. By default, browsers usually set type at 16px, so unless a designer states otherwise, or a user alters the default, that’s how big body copy will be.

Print designers, however, have real difficulty in relinquishing this control. “How can you let the user define the size of the type?! Have you any idea what that will do to the rest of the layout?!”

Locking down the font-size within a web design (through CSS) will go a long way in preventing anything unpredictable from happening, but it’s hardly user-friendly. These days, it’s considered best practice to size page elements and typography using ems instead of pixels; relative units of measurement which are based on the default font-size. Therefore if a browser happens to have a different default font size the whole design can flex in response to that.

This flexibility, again, highlights the limitations of designing static comps in Photoshop.

The Problem With Pixels – II

Browsers are developing very quickly these days and images are no longer needed for many effects on the web. CSS is capable of producing accurate gradients, curves, skewed objects, shadows, alpha transparency (the list goes on) and this is just as well given the dawn of Retina screens. Retina displays (or more accurately: high pixel density screens) have really thrown a spanner in the works for web designers. Retina screens have twice as many pixels as normal screens, allowing them the luxury of rendering everything super-sharp. Anything pixel-based, however, is simply blown up twice as wide, twice as high, resulting in comparatively lower quality.

In order that websites retain their sharpness, designers are having to rely as much as possible on what the browser can render itself. In fact, the recent trend towards “Flat Design” is (in part) a reaction to this purely CSS-based web design.

All this takes an enormous chunk of what Photoshop does (producing bitmaps) out of the equation.

Designmodo’s Flat UI kit

Performance Based Design

As we’ve mentioned, the web has gone truly global thanks to the spread of mobile devices. It’s forced us to realise that we can’t know the circumstances under which our content is being accessed. We don’t know whether our end user is sitting on the couch with a Kindle, paragliding with an iPhone or running through the Gobi Desert with a MacBook Pro. We don’t know how big their screen is, what their processor is like and, equally, we can’t assume to know how fast their connection is.

We’re starting to realise that performance is a fundamental part of designing for the web. Again, images play a role in this. Every individual asset (be it an image, a script, a document, whatever) which is pulled from a web server is costly.

Instead of keeping files like images and fonts in a folder called “assets”, I’m going to rename the folder “liabilities”.
— Jeremy Keith (@adactio) February 18, 2013

Not only should they be optimized to be as small as possible, but they should also be as few as possible. Browsers are limited in the amount of assets they can simultaneously download, often to just two at any given time. If your web page holds hundreds of individual images they’ll form a bottleneck, ultimately delivering a negative experience to the end user.

This can be helped, by combining image files into single sprites, but (again) retina screens force some kind of backup plan.

Instead, effects are better achieved with CSS, icons can be embedded through web fonts, logos can be implemented as scalable vector graphics, all of which spells the end for the slice tool.

Doubling of Efforts

Back when the web designer’s workflow was effectively the same as print with the internet tacked onto the end, designing layouts in Photoshop was an integral part of the process:

Familiar tools meant relatively quick layouts.
Presenting static comps to the client was much the same as presenting print layouts.
Pixel-precision meant that measurements could be directly applied to the browser equivalent.
Actual assets were sliced from layout comps for use in the web page.

These days, with less of the final result relying on assets built in a graphics application, designing a whole layout in Photoshop effectively means doubling your efforts. Build it once to get an idea of what it will look like, then build it for real. Then throw the PSD away because it’s no use to anyone.

Adding to the Toolkit

Adobe were either resisting change, or simply trying to be accomodating, when they introduced a few web design features in CS6. The CSSHat-like CSS output panel enables you to grab code from your visually created page elements. They also made it possible to paste a hex color (copied from the browser) including hashtag (#ffffff for example) into Photoshop’s color picker without throwing an error.

Paragraph styles (a bit like in InDesign) were introduced to give more global control over typography. Lorem Ipsum found its way in as a standard feature and now you can even choose common device dimensions as document presets!

But we’re in denial here – there’s a big blue elephant standing in the corner of the room.

It’s Time for a Modular, Flexible Workflow

What we’re actually looking at here, isn’t an application which fails to fit web design, but a workflow which is no longer appropriate. In fact, even before the web went all fluid and squishy there were fundamental flaws in the Photoshop web design process as we’ve described it. There was a tendancy to create pixel perfect renderings of web pages before building could even begin. And then, because of the obsession with getting everything 100% perfect in Photoshop, there’d be a similar fanaticism for achieving identical results in all browsers. It’s taken us a long time to realise that web pages don’t have to appear identical in all browsers!

One serious issue with aiming for perfection in Photoshop arises when the client gets involved. This workflow makes it all too easy to become stuck in an infinite loop of clients making pixel–pushing suggestions, inevitably losing sight of the big picture.

What’s needed is a more modular approach to web design and Photoshop can absolutely play a part in that. Consider first the planning stage; gathering of information and content, sketching relationships between areas of the website as a whole – a crucial part of this modular process, but best carried out away from Photoshop.

Wireframing takes the process further; laying out rudimentary interface elements, establishing visual relationships, hierarchy and basic interaction. Again, this isn’t a task Photoshop carries out very well, instead making way for applications such as Omnigraffle and Balsamiq, even Illustrator (and there are many more).

Photoshop lends itself far better to aesthetics. It can’t describe layouts fluidly, but it can explore colors, textures, individual element styles, typography, atmosphere and mood. Style Tiles is a concept suggested by Samantha Warren. They’re essentially Photoshop mood boards, but highlight a way of isolating and presenting the aesthetic phase to the client.

The next module in this workflow is prototyping; building basic, but functional layouts for the browser. And no, this isn’t Photoshop’s cup of tea either. In fact, Adobe is busily working on an alternative line of applications to help out here. Their Edge Tools aim to offer a familiar canvas interface, which outputs fluidly for the browser; ideal for rapid prototyping, but still very much a work in progress.

Each of these modular stages takes an aspect of the design process, isolates it and heavily involves the client, giving them plenty of opportunity to sign off on each stage without affecting the others.

Do note that this is a suggested workflow, nothing is written in stone where design is concerned and there’s often more involved than these general stages. Which leads me to my closing point.

Whatever Works!

Any design process is extremely personal and what works for someone else won’t necessarily work for you. There are plenty of people calling for an end to web design in Photoshop, campaigning for a browser-based workflow instead. The fact is, if Photoshop works for you, use it! At the end of the day, we’re designers – if we want to spend hundreds of man hours pushing pixels and polishing our Dribbble portfolio, let’s allow ourselves to luxuriate in that!

Submit Your Art to This Month’s Typography Challenge

Melody Nieves — Sat, 11 May 2013 08:30:20 PDT

You still have plenty of time to submit your typography for this month’s Psdtuts+ Design Challenge. Join the community on Google+ and upload your art for the chance to get featured in our monthly reviews.

This Month’s Challenge

This month we asked you to Create a Typographic Illustration. And with plenty of time to spare, you can submit your artwork for this challenge using Photoshop accompanied with any additional program or technique of your choice. Take inspiration from a song, or quote the wise words of your favorite author. Just remember, the deadline for this challenge is Tuesday, May 21, 2013 at 12:00 PM EST.

Join The Psdtuts+ Community

Join The Psdtuts+ Google Community and upload your challenge submissions to the wall. Include the #psdtutsdc tag in your posts and feel free to explore, collaborate, and share feedback with fellow artists.

Examples From This Month’s Challenge

Here’s a glimpse at some of the incredible entries from this month’s challenge. Check out the Psdtuts+ Community on Google Plus for more amazing work!

Impakt by Mohamed Reda

Don’t Worry Be Happy by Padraic Rapp

You Said You Wanted To Heal These Wounds by Timothy Diokno

Submit Your Artwork

The Beautiful and Creative 3D Typography of Chris LaBrooy

Grant Friedman — Fri, 10 May 2013 07:00:52 PDT

Chris LaBrooy is a designer and 3D artist from the United Kingdom that creates very high quality 3D typography. In this article, we will take a look at some of our favorite pieces in his portfolio.

"ADICT" Sneaker Lettering

Land of the Free

AT&T Tours of the Future

Pringles Galaxy

Love 3D

Architectural 3D Type

Summer Streets NYC

Making Complex Selections (Part 1)

Martin Perhiniak — Thu, 09 May 2013 06:00:16 PDT

Have you ever had to make a very complex selection and didn’t know where to begin? In this tutorial, we will show you to to combine vector and pixel masks to help you make a complex selection of a furry animal. Let’s get started!

Tutorial Assets

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

Lion

Our Complete Walkthrough of What’s New in Photoshop CC

Martin Perhiniak — Wed, 08 May 2013 09:00:41 PDT

The new version of Photoshop is finally here! Adobe Photoshop CC (Creative Cloud) was finally announced at the Adobe MAX conference in Los Angeles. In the keynote address, Adobe announced several new features including Camera Shake Reduction, Camera RAW improvements, Image Upsampling, Properties Panel Improvements, Behance Integration, Sync Settings, and many more useful features. In this article, Martin Perhiniak will explain these new features in a series of video tutorials. Let’s take a look!

Note: Photoshop CC will be available for download on June 17.

1. Camera Shake Reduction

Save shots you thought were lost due to camera motion. Whether your blur was caused by slow shutter speed or a long focal length, Camera Shake Reduction analyzes its trajectory and helps restore sharpness.

Camera Shake Reduction filter

2. Camera RAW Retouching Improvements

Apply Camera Raw edits as a filter to any layer or file inside Photoshop. With new Adobe Camera Raw 8, you get more precise ways to heal images. Now you can use the Spot Removal tool as a brush and paint over the unwanted areas of you photos. You can also find the spots caused by dust in your lens or sensor much easier by using the new Visualize Spots feature.

Spot Removal used as a brush to retouch photo

3. Camera RAW Radial Filter

With new Adobe Camera Raw 8, you can create Radial Filters on your photos. These can be used for several effects and just like all Camera RAW adjustments they are completely non-destructive.

Radial filter – Before

Radial filter – After (people in the photo are highlighted)

4. Camera RAW Automatic Upright

With new Adobe Camera Raw 8, you can fix perspective distortions easily with Automatic Upright. You have lots of control over how you want to fix the perspective of your photos.

1. Before

1. After – Automatic Upright for perspective distortion correction

5. Preserve Details Resampling Method

Enlarge a low-res image so it looks great in print, or start with a larger image and blow it up to poster or billboard size. New upsampling preserves detail and sharpness without introducing noise.

6. Smart Sharpen Improvements

Rich textures, crisp edges, and distinct details. Smart Sharpen is the most advanced sharpening technology available today. It analyzes images to maximize clarity and minimize noise and halos, and it lets you fine-tune for high-quality, natural-looking results.

7. Properties Panel Improvements for Shapes

One of your most requested features is here. Now you can resize shapes, edit them, and re-edit them — before or after they’re created. Even edit individual corner radiuses in rounded rectangles. Get more done in fewer clicks by selecting multiple paths, shapes, and vector masks at once. Even in multilayered documents with lots of paths, you can easily target the path you want right on canvas using a new filter mode.

Properties panel improvements for Shapes

8. Isolate Layers

A fantastic new way to simplify your work is to Isolate layers in a complicated layer structure. This feature allows to concentrate on a specific layer or set of layers and don’t get confused by all the other layers.

Isolate Layers

9. Sync Settings

With all-new Adobe® Photoshop® CC, you always have the latest version, because access to every future release is built right in. Bring your settings to multiple computers with cloud-enabled Sync Settings.

Sync Settings between computers

10. Share on Behance

Adobe Creative Cloud™ is now integrated with Behance® for real-time inspiration and a seamless way to share your work. Create more, share more, never stop learning. That’s Creative Cloud.

Behance Prosite available for free for Creative Cloud members

Sharing in the process

Share your WIP (Work in Progress) on Behance

Try Tuts+ Premium, Get Cash Back!

Joel Bankhead — Tue, 07 May 2013 15:00:35 PDT

Try Tuts+ Premium and get cash back on a monthly subscription.

At $19 a month, Tuts+ Premium is fantastic value. But it’s even better when we hand your first $19 right back to you! For a limited time, we’re offering $19 cash back to new Tuts+ Premium monthly subscribers when signing up via PayPal.

If you’ve been thinking about checking out our extensive library of courses, tutorials, eBooks and guides, there’s never been a better time to join up and dive in.

But this offer ends at noon on the 20th of May AEST, so act fast.

Become a Tuts+ Premium Member to take your creative and technical skills to a new level.

With Tuts+ Premium you learn from expert instructors in every field, such as:

Designer Justin Maller (Nike, Verizon, DC Shoe Co.)
Illustrator Russell Tate (McDonald’s, Coca-Cola)
Developer Burak Guzel (Software Engineer at Facebook)

Join now and get instant access to your very own library of courses, tutorials, and eBooks, available whenever you need them. Become part of a community of over 15,000 members and start getting better at the skills you care about. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into.

Join Tuts+ Premium

Psdtuts+

The Remarkable Concept Art and Environments of Jonas De Ro

Making Complex Selections (Part 2)

Tutorial Assets

Tuts+ Premium Cash Back Offer: 3 Days to Go

Create a Fantasy Storybook Illustration – Tuts+ Premium Tutorial

Speed Painting Video

Photoshop’s Role in a Web Design Workflow

What is it Good For?

The Legacy of Print Design

What are its Limitations?

A Fluid Web

The Problem With Pixels – I

The Problem With Pixels – II

Performance Based Design

Doubling of Efforts

Adding to the Toolkit

It’s Time for a Modular, Flexible Workflow

Whatever Works!

Further Reading

Submit Your Art to This Month’s Typography Challenge

This Month’s Challenge

Join The Psdtuts+ Community

Examples From This Month’s Challenge

The Beautiful and Creative 3D Typography of Chris LaBrooy

Making Complex Selections (Part 1)

Tutorial Assets

Our Complete Walkthrough of What’s New in Photoshop CC

1. Camera Shake Reduction

2. Camera RAW Retouching Improvements

3. Camera RAW Radial Filter

4. Camera RAW Automatic Upright

5. Preserve Details Resampling Method

6. Smart Sharpen Improvements

7. Properties Panel Improvements for Shapes

8. Isolate Layers

9. Sync Settings

10. Share on Behance

Try Tuts+ Premium, Get Cash Back!