This overview features a hand-picked and organized selection of the most useful and popular Photoshop techniques, articles and tutorials published on Smashing Magazine over the past few years.
Most people who have designed websites or apps in Photoshop will, at one point or another, have had issues trying to match colors in images to colors generated by HTML, CSS or code. This article aims to solve those problems once and for all. So how can we achieve color management that matches colors across multiple devices?
20
In the print world, color management typically involves calibrating your entire workflow, from scanner or digital camera to computer display to hard proofs to the final press output. This can be quite a tall order, especially when the devices use different color spaces matching RGB and CMYK devices is notoriously hard.
Read more21
Creating a grid is typically one of the very first things you do when starting a design comp. After all, it provides the basic structure on which the rest of your design will lie. In this article, well provide two different methods for efficiently establishing a grid. These methods enable you to quickly and smartly form a grid so that you can spend more time designing.
23
Read more24
Congratulations. Youve just completed a pixel-perfect mock-up of an app, and youve gotten the nod from everyone on the team. All thats left to do is save the tens, hundreds or maybe even thousands of production assets required to bring it to life.
26
Its probably the least interesting part of designing software, usually entailing hours of grinding. Saving images to multiple scales as required by iOS and other platforms adds complication to the process. But there are ways to streamline or automate the exporting process.
Read more27
Is time kickin your ass? Well, learn to defend yourself! Master these killer Photoshop keyboard combos and youll find yourself with more time for the important things (e.g. Facebook trivia questions). These combos assume youre using Photoshop CS3 on Windows platform with default keyboard shortcuts.
29
Read more30
We all have shortcuts that are essential to our daily workflow. A majority of them are staples such as Copy (Command + C) and Paste (Command + V), but occasionally we stumble upon a shortcut we wish wed learned years ago. Suddenly, this simple shortcut has streamlined our process and shaved quite a bit of time off our day. Collected here are some lesser known but extremely useful shortcuts. Many of these are not documented in the Keyboard Shortcuts menu, and some of them dont even have equivalent menu options.
32
Please note that all of the shortcuts listed below assume that you are using Photoshop CS4 on OS X. They will work on the Windows platform by converting as follows: Command Control and Option Alt.
Read more33
The iPhone 4 features a vastly superior display resolution (614400 pixels) over previous iPhone models, containing quadruple the 153600-pixel display of the iPhone 3GS. The screen is the same physical size, so those extra dots are used for additional detail twice the detail horizontally, and twice vertically. For developers only using Apples user interface elements, most of the work is already done for you.
35
For those with highly custom, image-based interfaces, a fair amount of work will be required in scaling up elements to take full advantage of the iPhone 4 Retina display. Scaling user interfaces for higher detail displays or increasing size on the same display isnt a new problem. Interfaces that can scale are said to have resolution independence36.
Read more37
When it comes to designing in Photoshop, there is a myriad of ways one could use to achieve a certain result, especially when it comes to photo retouching. Designers use technique they are most confident as well as comfortable with, which is great because its always useful to peek into the workflow of our colleagues and learn new design approaches. We have had articles on cloning39, compositing40, masks41 and obscure Photoshop time-savers42 in the past. This article is different.
43
Ill be covering some of the useful techniques and tricks which Ive learned from my experience. You may know some of them, but hopefully not all of them. All images used in this article were purchased and are used according to their licenses. The second part of this post will be published in 2 weeks.
Read more44
Previously we published46 the first part of Photoshop tips and tricks for photo retouching. Today, well be presenting the rest of the article. We hope that these techniques will be quite useful for your workflow. You may know some of them, but hopefully not all of them. We have had articles on various tools in Adobe Photoshop but this one is focused more on the techniques rather than the tools provided. Please note that all images used in this article were purchased and are used according to their licenses.
47
If you want to redefine the foreground and background colors, use the Eyedropper tool to select the foreground color, and then switch the position with the background color, maybe by using the shortcut X, and pick up the next color. But there is an easier way.
Read more48
When laid by a learned hand, brush strokes can convey a sense of energy, tactility and humanness. These qualities speak to your audiences subconscious, whispering ideas that words alone cant convey. In the digital realm, a website with beautiful brushwork is a welcome break from the stark precision of most corporate websites.
50
Mastering the digital brush is by no means easy. It carries the same difficulties as the sable brush hidden at the bottom of your art bin. In fact, the difficulty is multiplied by the disconnect between the hand and monitor. Developing Photoshop brush skills takes time, but it is well worth the effort. This article outlines the plethora of options that Photoshop affords, so that you can efficiently create and use brushes like the Old Masters.
Read more51
Photoshops wide array of cloning tools is the cause of many of the absolute best and worst works created with the application. In a skilled and experienced hand, these tools lead to phenomenal results. In the hands of a careless artist, Photoshop cloning can be disastrous to the credibility of the result. This article introduces the several cloning tools available in Photoshop and goes over the proper usage and best practices of each.
53
The Clone Stamp tool is the oldest and most widely known of the cloning tools. The basic concept is that you duplicate certain portions of an image using a source, destination and brush. To clone out the name on the tombstone above, you would select a source that shares the texture of the area you want to replace. In this case, the area around the words provides an ample source of stone texture from which to clone.
Read more54
The creative process is not a linear one. As artists and designers, we often set off in one direction only to decide that the proper solution lies somewhere else completely. Unfortunately, many of the creative software packages we use (Photoshop in particular) can be pretty unforgiving when in comes to making changes late in the game.
In this video post, Ill show you some of my favorite techniques and tools for keeping your files flexible, including Smart Objects, Smart Filters, Layer Styles, Adjustment Layers, Masks and more. The approaches shown in this video should provide a solid starting point. But like anything in Photoshop, there is no one right way to approach it. The key is to find the method that best supports your workflow so please feel free to add your favorite non-destructive tricks in the comments section below!
Read more56
Anomalously residing within the pixel-gridded world of Photoshop are a series of tools waiting to break out of the canvas inherent squareness. Mastering these tools opens the stage for a higher level of flexibility, full of clean lines and non-destructive editing. Presented here is a guide to help you build proficiency, increase productivity and demystify the elusive world of Paths.
58
The Pen tool (P) â simple to use but difficult to master. It provides a precise method for creating paths, but requires an experienced hand to plot naturally flown curves. The power unlocked by mastering this tool is well worth the time needed to do so. While no amount of instruction can make you a Bezier master, below are some tips to keep in mind as you practice.
Read more59
When creating Web and app interfaces, most designers slave over every single pixel, making sure its got exactly the right color, texture and position. If youre not careful, though, some common functions like moving, rotating and pasting can undo your hard work, resulting in a blurry mess. But with some small changes to your workflow, you should be able to maintain the highest-quality artwork from the start to the end of the project.
61
If youre not careful, rotating layers in Photoshop can damage them in a very noticeable, pixel-mashing way. When rotating layers with Free Transform (and some other tools) to exactly 90 or 270°, the quality of the outcome is determined by the layers size. If the layer is of an even width and even height, then youll be fine. If its of an odd width and odd height, youll also be okay. But if theyre of an odd width by even height or even width by odd height, then youll see something like the result below.
Read more62
Design is a fluid and shifting process in which layers are constantly modified and tweaked. As complexity builds, so does the need for preserving data in a flexible way. Learning non-destructive editing techniques helps you produce documents that bend along with your creativity. Photoshop Masks are the cornerstone of this process. Not only do they preserve important pixel data, but they allow for the creation of flexible interface elements as well. In this article, well explore the technical aspects and creative advantages of incorporating masks into your workflow.
64
Photoshop offers five methods of masking: Pixel Masks, Vector Masks, Quick Masks, Clipping Masks and Clipping Paths, all of which define pixel opacities without affecting the original data. Each of them has its own pros and cons, and knowing which method to use is extremely important for creating clean, flexible and properly masked layers.
Read more65
Texture is becoming integral to design. Its gone beyond being a trendits now a simple and effective way to add depth to a website. Wielding the power of texture is a great responsibility. It increases the effectiveness of websites and is a quality tool in the arsenal of designers. It can guide the users eye and emphasize the importance of key elements.
67
However, texture has long been synonymous with dirty or grungy design. Its overuse can be seen throughout the world of music group websites and has left a bad taste in the mouths of designers. Due to its frequent misuse, its benefits have long been overlooked. Texture can bring a website together, but should not be the main focus.
Read more68
Often, its the little details that turn a good layout into a great design; details such as subtle textures, shading and smooth shapes. Photoshop contains a vast array of tools for embellishing a design, but choosing the right one isnt always easy. Being the obsessive-compulsives that we are, weve conducted a huge range of experiments to determine the benefits and disadvantages of each technique. Here, then, is an obsessive-compulsives guide to some frequently used tools and techniques for Web and UI design in Photoshop.
70
Subtle noise or texture on UI elements can look great, but whats the best way to add it? Our goal is to find the best method that maintains quality when scaled but that is also easy to implement and edit. To find out which is best, well judge each method using the following criteria.
Read more71
Layer Styles are nothing new. Theyve been used and abused again and again. Despite their ubiquity, or perhaps because of it, many designers do not yet realize the full potential of this handy menu. Its beauty lies in our ability to create an effect and then copy, modify, export, hide or trash it, without degrading the content of the layer.
73
Below we present, step by step, several practical techniques to help you refine your designs, increase productivity and reduce layer clutter.
Read more74
As printed typography enjoys the fruits of high-DPI glory, proudly displaying its beautiful curves and subtleties, its on-screen counterpart remains stifled by bulky pixels, living in a world of jagged edges, distorted letterforms and trimmed serifs. Until display manufacturers produce affordable 200 or 300 PPI monitors, well have to rely on software advances to fix these problems.
76
Enter anti-aliasing: the next best thing to a world of higher-resolution monitors. The concept of anti-aliasing is fairly simple: add semi-transparent pixels along the edges of letterforms to smooth the appearance of the stair-step effect.
However, many factors and technologies determine the actual effectiveness of the process: hinting, subpixel rendering, software capabilities and operating system specifications, to name a few. Here, well look at what you as a designer can do to improve the results of anti-aliasing with Photoshop, Flash and CSS. Plus, well explain the constraints of hardware, browsers and operating systems.
Read more77
Travelling is my life
ConversionConversion EmoticonEmoticon