Introducing MUSE

20120104-081005.jpg

It’s Behind Me Isn’t It?

20120104-080420.jpg

#design #poster #graphic_design #typography #layout #photography

Ajax.org Debuts Development-As-A-Service Platform For Javascript, HTML5

Ajax.org is today introducing Cloud9 IDE, a fresh cloud-based development platform for JavaScript incorporating HTML5, and supporting Python, Ruby and PHP. The environment aims to enables developers to easily build, test, debug, and deploy Web and mobile applications with a minimum of technical skills and time required. If the name of the project (Cloud9 IDE) rings a bell, you may remember that it merged with Mozilla Skywriter, a Web-based framework for code editing, back in January 2010.

Read the rest of this entry »

Google Recipe Search Cooks Up Next Gen of Search

Stepping into the kitchen now, Google  introduced a recipe search engine Thursday that serves up dishes based not only on the ingredients you may have on hand, but the calories you want to consume and even how much time you have to cook.

Ah, what a godsend! I’m so glad Google came out with this. Now, I’ve got everything I need from one search engine🙂

With a Great Tagline Comes Great Responsibility

Opinion BY Armin


With a Great Tagline Comes Great Responsibility

IFC Logo, Before and After

Launched in 1994, the Independent Film Channel (IFC) has grown remarkably from a weird little runt of a channel that was a spin-off from Bravo (before Bravo was all Queer Eye for the Straight Guy, Housewives of…, and Top This or That — into one of the most progressive and rewarding cable channels through original programming (Portlandia), fantastic re-runs (Freaks and Geeks), and movies where the endings aren’t always happy. Today the IFC universe consists of the cable channel, a feature film production company, a distributor of independent and foreign films, and a theater in New York City. For the better part of 2010, IFC has been using a new logo and tagline created by Portland, OR-based Feel Good Anyway and they recently put up a great case study of their ongoing project with IFC.

IFC

The imperfections of the logo, on purpose.

IFC

Different logo and tagline lock-ups.

The old logo had its charm and moment of brilliance in the “I” looking like the edge of a film strip but sixteen years, especially for something brewed in the middle of the 1990s, is plenty of time for something to date. The new IFC wordmark has no hidden visual, but it sure is bold. And bold is good. The appeal of the new logo comes in the embrace of the tagline, a fantastic one at that, and how the two interact in clunky ways. It’s also funny that the logo is constructed a bit “poorly.” The new logo also helps IFC move beyond just “film” and supports all of its digital and brick and mortar ventures.

IFC

IFC

Sample pages from the guidelines.

But as with all good TV branding, the real fireworks are in the on-air package and Feel Good Anyway has converted the “Always On. Slightly Off.” philosophy into a fantastic identity that is smart, quirky, and perfectly executed.

Network graphics. See bigger here.

Network IDs. See bigger here.

Network Interstitials, “a library of thematic interstitials that IFC could mix and match with other assets to make promos. The themes were based around the channel’s programming genres and included such all-time favorites as comedy, sex, music, food, horror, and action, among others.” See bigger here.

An excellent examination of the new IFC logo. Personally, I like the imperfections and the various lockup configurations. What do you all think?

Useful Web Services, Tools and Resources For Web Designers

We know how hard it is to find good useful tools that all of your developers and designers out there spend hours searching for. And for that reason, we’re regularly collecting useful online web services, tools and resources — little time-savers that can boost every designer’s workflow and save time that would otherwise be required for mundane tasks.

You might have seen some of these tools in our Twitter stream or on our Facebook page, but certainly not all of them. We’ve prepared the most useful ones (yet not necessarily the most beautiful ones) in this handy overview for your convenience. Please share any further tools with us and our readers in the comments to this post. As usual, we express sincere gratitude to all designers and developers out there who create, maintain and improve these tools as their little side projects. You really make the difference, guys. Thank you.

You may want to check out our previous round-up, Time-Saving and Educational Resources for Web Designers, as well.

Useful Web Services, Tools and Resources

FontFuse: Gallery of Font Pairings
FontFuse is a font pairing design resource that displays font pairings and hence helps you compare and choose fonts. You can browse through fonts as well as font families, and explore the most recent, most popular and contest-leading font pairings.

Useful-web-services101 in Useful Web Services, Tools and Resources For Web Designers

Little Big UI Details
This site features tiny details that improve the user experience of websites and mobile apps. You’ll find some useful design techniques found by your colleagues across the Web. Also, share your favorite little things on the website as well. The collection is already very useful, with more design examples submitted every single day.

Useful-tool-115 in Useful Web Services, Tools and Resources For Web Designers

A Sampler Page
While physical books are traditionally well defined and structured objects, digital books live on screens that vary greatly in their dimensions. In this A List Apart article, Craig Mod dives into the similarities and differences of these media and presents the baseline for designers who want to produce beautiful and readable text on a tablet.

Useful-tool-127 in Useful Web Services, Tools and Resources For Web Designers

Readability: Enjoy Reading, Support Writing
Another handy little helper that gets rid of the unwanted clutter. Readability allows you to choose your preferred settings (font size, margin and style) and applies them to any website. Drag the bookmarklet with your saved settings into your bookmars bar or folder, visit the website of your choice, click on the bookmarklet and you get a good, comfortable read. Besides, readability offers a way to compensate writers and publishers without punishing readers. 70% of all membership fees go directly to the people who make the content.

Useful-tool-132 in Useful Web Services, Tools and Resources For Web Designers

Prey: Rest Safe
This tool is small but efficient open-source application that lets you track your laptop or phone in case it gets stolen or lost. Once the Prey agent is installed, it waits to be activated over the Web or via SMS, sending back information on its exact position.

Prey in Useful Web Services, Tools and Resources For Web Designers

Ge.tt
With Ge.tt you can turn any type of file into web content and share it instantly. You just click on and select files and share the files with your friends or publish the data online. You may want to check an alternative, Crate, as well.

Useful-tool-121 in Useful Web Services, Tools and Resources For Web Designers

Lanyrd: Get More Out of Conferences
Lanyrd is the social conference directory that lets you keep track of what is going on around you, both as a conference speaker and visitor. You can browse conferences by topic, see who the keynote speakers are and who might like to attend it with you. Follow intereresting conferences by checking out attendees tweets or browse slide, videos and podcasts of past events you might have missed. And you can check SmashingMag’s account on Lanyrd, too.

Useful-tool-102 in Useful Web Services, Tools and Resources For Web Designers

Dashkards: Dashboard Cheat Sheets For Your Favorite Mac Apps
The site presents keyboard shortcut cheatsheets for you favorite Mac apps to help you memorize them. Simply add the dashkards to your dashboard and save time.

Useful-tool-124 in Useful Web Services, Tools and Resources For Web Designers

Bundler: Manage Your Application’s Dependencies
Bundler manages application’s dependencies through many machines systematically and repeatedly. You can use the tool with frameworks (it works out of the box with Rails 3) and check out an application with a gemfile for development. A detailed instruction is available on the app’s main web page.

Bundler in Useful Web Services, Tools and Resources For Web Designers

BuildorPro
BuildorPro runs through your browser, and so the browser becomes your development environment — meaning that every time you change your code by hand or through the visual tools, the changes are instantly reflected in the design window. Currently in beta.

157-useful in Useful Web Services, Tools and Resources For Web Designers

Zerply: Present Yourself Professionally
With Zerply you can present yourself, discover and connect as well as converse and collaborate. By setting up a professional profile, you can tell people who you are and what sites you use.

Useful-tool-118 in Useful Web Services, Tools and Resources For Web Designers

Prevue: Sharing Tool for Designers
Prevue is a free concept sharing tool that helps you upload in a simple and elegant way by organizing and sharing your work with others. Either share individual projects with clients, or turn all your projects and designs into a beautiful and clean portfolio to share with the world.

Useful-tool-134 in Useful Web Services, Tools and Resources For Web Designers

Git Immersion
Git is a fast version control system which can be downloaded on this site. Git Immersion is a very detailed guide to Git, with examples and practical tips for developers.

Useful-tool-125 in Useful Web Services, Tools and Resources For Web Designers

Wirify: The Web as Wireframes
This tool is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks. Wirify is a useful tool that shows the balance of a website that the eye perceives only unconsciously.

Wireframe in Useful Web Services, Tools and Resources For Web Designers

Open with Photoshop Firefox Extension
If you are looking for nifty time-savers, this little Firefox add-on is the perfect companion for any Web or graphic designer. Instead of saving images first, you can just open them directly in Photoshop via a single click. If Photoshop is already running, it opens the image in a new window; otherwise, it launches the program.

Open-with-photoshop in Useful Web Services, Tools and Resources For Web Designers

Scr.im: Email Address Shortener
Scr.im lets you use a shortened URL to give out your email address safely and securely in forums. Just enter your email address on Scr.im, and it gives you a link to a page with your email address, with security to prevent bots from viewing it.

Scrim in Useful Web Services, Tools and Resources For Web Designers

Compfight: Flickr Search Engine
Compfight is a Flickr search engine for images licensed under Creative Commons (or other) licenses. They pull their results directly from Flickr and gives you multiple options to restrict your search.

Useful-tool-103 in Useful Web Services, Tools and Resources For Web Designers

Browserling: Interactive Cross-browser Testing in Your Browser
Browserling offers you a graphical web console to do cross-browser testing without leaving your own browser. A helpful way to try out your creations. The virtual browsers run live enabling you to type and click away just as if you were running the actual browser. Paid and free options are available.

106-useful in Useful Web Services, Tools and Resources For Web Designers

User Feedback and Concept Testing with Verify
Verify is the fastest way to collect and analyze user feedback on screens or mockups. See where people click, what they remember, or how they feel about a Web design.

146-useful in Useful Web Services, Tools and Resources For Web Designers

foxGuide: Photoshop Guides Inside Firefox
foxGuide is a Firefox extension that displays horizontal and vertical guides. These guides appear as thin lines that float over the webpage. You can move or remove them just the way you do it in Photoshop.

147-useful in Useful Web Services, Tools and Resources For Web Designers

GridBookmarklet
The tool allows you to interact with a grid directly inside the Web browser. (Most alternatives involve overlaying a static grid image onto the page.) Just drag it to your bookmarks toolbar, and then any time you want to check that everything is properly aligned, click on the bookmarklet, and a grid will be overlaid on the current page.

Grid2 in Useful Web Services, Tools and Resources For Web Designers

URLi.st: Share and Sync Your Links
URList not only enables you to create and save link lists easily and share them via Twitter or email with coworkers and friends, but also lets you access those links from anywhere. And creating lists is dead easy. Just drag URList’s bookmarklet to your browser’s bookmark bar and click it whenever you want to add a link to the group of links.

Useful-tool-114 in Useful Web Services, Tools and Resources For Web Designers

Spritebox: Create CSS from Sprite Images
Spritebox is a WYSIWYG tool to help Web designers create CSS classes and IDs from a single sprite image. It is easy and free to use and is based on the principle of using the background-position property to align areas of a sprite image into block elements of a Web page. You may want to check out CSS Sprite Generator, too.

162-useful in Useful Web Services, Tools and Resources For Web Designers

Joliprint
This is an online tool that generates PDFs from Web pages. Granted, it is not the only tool that does this, but it is easy to use and versatile. People can use it as a bookmarklet, pulling it into the Favorites toolbar of their browser and clicking as needed. Joliprint generates a clear, reader-friendly two-column layout, free of ads and navigation elements, and it does it pretty well. Sometimes it removes too much content, though, such as readers’ comments. If you’d like an alternative, give Web2PDF or Notforest a try.

Jolly in Useful Web Services, Tools and Resources For Web Designers

Entitifier
Cleaning up text for the Web can be time-consuming and prone to error. But if a client delivers content in Microsoft Word or a similar format, then cleaning it up is a necessary evil if you don’t want to end up with characters that don’t display properly online. Entitifier does the hard work for you. All you have to do is enter HTML or text, and it escapes nasty characters that should be entities. Just don’t enter text with inline PHP or HTML5 tags, because the tool doesn’t work well with them yet.

The Email Address Obfuscation Debate
Superuser has an interesting discussion about email obfuscation, with opinions from a number of users. Included also are different techniques for accomplishing obfuscation, empirical data about its effectiveness and links to other discussions and articles. One interesting technique is to use the obscure unicode-bidi and direction CSS properties and write the email address backwards: for example, moc.elpmaxe@zyx. Plenty of interesting ideas worth learning and discussing. (cc)

Email in Useful Web Services, Tools and Resources For Web Designers

Quick CSV Data Convertor
As Web designers, we constantly receive data in Excel and other spreadsheet formats. This works fine when you just need to view the data on your computer. But when you need to upload it to and display it on the client’s website, it becomes a huge pain. This tool takes a CSV or tab-delimited file in Excel and converts it to JSON, XML, ActionScript and other Web-friendly formats instantly. If you want to convert your spreadsheet data to HTML, you might want to give Tableizer a try.

Instant Blueprint
Instant Blueprint is a way to create a web project framework. In a very short time you can get your project up and running with valid HTML/XHTML and CSS. It’s a simple online form where you enter the required information and markup id tags. Then you select options such as, javascript library and document type. This then generates the blueprint you need to get your project going.

Interaction-Design.org: HCI, IxD, UX, IA, Usability, and More
This website is a growing library of documents, references and useful articles about interaction design. Leading personalities of the respective branches are asked to contribute to every topic including videos and commentaries.

jQuery Deconstructed
The Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools.

Last Click

Humans.txt: We are People, Not Machines
Humans.txt is an initiative founded by a group of Spanish enthusiasts with the idea to give credit to the humans behind Web projects. Start your own humans.txt now and stick it in the website’s root folder, right next to robots.txt. Fill the file with whatever info about the contributors you like. Be a part of the initiative and help establish the standard for humans.txt.

Spacelog Apollo 13
This site allows you to explore transcripts of radio communications between the Apollo 13 crew and the NASA personnel back at Houston. You can check out photographs taken from the ground as well as by the crew in space. If you’re interested in space missions and the history of Apollo 13, this is the site for you.

Spacelog in Useful Web Services, Tools and Resources For Web Designers

Google Art Project
The Google Art Project lets you visit all the great museums around the world and offers interactive 360° tours. High zoom levels give you astounding close-up impressions of the masterpieces, getting that close would probably be impossible in reality. You can even create your own virtual tour and showcase your own great tableaus.

Web-services-010 in Useful Web Services, Tools and Resources For Web Designers

Liveset: Now the Concert Comes To You
This service allows you to watch live concerts on the Web and on mobile devices in HD. Once you’ve become a member, you can claim digital tickets and enjoy the show on your large screen at home, together with your friends or family.

170-useful in Useful Web Services, Tools and Resources For Web Designers

How To Build a Corporate Website (Comic Strip)
Unfortunately, very sad, yet very true.

Sad-true in Useful Web Services, Tools and Resources For Web Designers

How Would You Like Your Graphic Design?
A nice Venn diagram that helps you (and maybe your client) resolve dilemma on getting fast, cheap, free and great graphic design. Pick two out of four.

Web-services-008 in Useful Web Services, Tools and Resources For Web Designers

Tweet

I never tire of reading articles like this. Designing for the Web continues to change, not only from a technology standpoint, but also from technique. This post from Smashing Magazine is definitely one to bookmark. I’d love to hear what other designers use in their toolbox. Please leave a comment here and share links you think other designers may benefit from and tell us why you think they’re valuable.

Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Often, it’s 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 isn’t always easy. Being the obsessive-compulsives that we are, we’ve conducted a huge range of experiments to determine the benefits and disadvantages of each technique. Here, then, is an obsessive-compulsive’s guide to some frequently used tools and techniques for Web and UI design in Photoshop.

Noise and Textures

Subtle noise or texture on UI elements can look great, but what’s 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, we’ll judge each method using the following criteria:

  • Number of layers used: fewer is better.
  • Ability to scale: if the document is resized, will the effect maintain its quality?
  • Can the noise be on top of the Color and Gradient layer styles?
  • Can the method be used with any texture, not just noise?

Build-killbots in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

1. Bitmap Layer With Noise

Bitmaplayer in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Probably the most obvious method for adding texture to a shape is to create a normal bitmap layer, fill it with a color, select Filter → Noise → Add Noise, then apply a mask or Vector Mask to match the element you’re adding noise to.

Using a high amount of noise, setting the layer blending mode to Luminosity and reducing the opacity will yield the most control over the noise with the least disturbance to the underlying layers. A noise setting of 48% gives a high dynamic range without clipping the noise. (Clipping results in higher contrast, which might not be desirable.)

  • Layers: 2
  • Scales: No, texture will have to be recreated if the document is scaled
  • Works with Color and Gradient layer styles: Yes
  • Works with any texture: Yes

2. Inner Glow Layer Style

Glow in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Adding an Inner Glow layer style with the source set to center and the size to 0 will let you use the noise slider to add texture to any layer. It’s a good solution, provided you’re not already using the Glow layer style for something else. The noise is added above the Color, Gradient and Pattern layer styles, which is great.

Unfortunately, the noise can only lighten or darken the underlying elements. The previous bitmap layer method can add highlights and shade at once while maintaining the average luminosity, and it looks far better in my opinion.

  • Layers: 1
  • Scales: Yes, texture will be remade automatically
  • Works with Color and Gradient layer styles: Yes
  • Works with any texture: No

3. Smart Object with Filter

Smart-object-filter in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Create a Solid Color layer, convert it to a Smart Object, select Filter → Noise → Add Noise, apply a Vector Mask to match your element, set the layer blending mode to Luminosity and reduce the layer’s opacity.

It’s a fairly involved process, but it can accommodate a combination of effects that can be remade if the document gets scaled.

  • Layers: 2
  • Scales: Yes, texture will be remade automatically
  • Works with Color and Gradient layer styles: Yes
  • Works with any texture: No

4. Pattern Overlay Layer Style

Pattern in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Start by creating a noise or repeating pattern in a new document, then choose Edit → Define Pattern. Once you’ve defined the pattern, it will be available in the Pattern Overlay layer style options. As with previous methods, using Luminosity as a blending mode and reducing the opacity to suit it yield great results.

The Pattern layer style is composited below the Color and Gradient styles, ruining an otherwise perfect noise and texture method. However, you can create a second layer that just holds the texture if you need to, or start with a Gradient Fill layer, sidestepping the limitation.

  • Layers: 1
  • Scales: Yes, but you’ll need to change the Layer style scale to 100% after scaling
  • Works with Color and Gradient layer styles: No, the pattern appears underneath
  • Works with any texture: Yes

Which Method Is Best?

Although a little cumbersome, creating a Gradient Fill layer, adding a Pattern layer style, then creating a Vector Mask seems to be the best method possible. This can be used to create flexible, scalable and editable single-layer UI elements with texture. As a bonus, Gradient Fill layers can be dithered and so also produces the highest quality results (Gradient layer styles cannot be dithered).

We’ve created some examples below and included the source document so that you can see how they were built.

Reset-kill-limit-small1 in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Download the PSD (.zip)

Rounded Rectangles

Rounded rectangles, or “roundrects” as QuickDraw so fondly calls them, are standard fare on a Web and interface designer’s utility belt. They’re so common that it’s rare for Web pages or apps to not contain a roundrect or two. Unfortunately, pixel-locked rounded rectangles can actually be fairly difficult to draw in Photoshop. (By pixel-locked, I mean that every edge falls on an exact pixel boundary, creating the sharpest object possible.)

Experienced Photoshop users will probably already know one or two ways to draw a roundrect. Hopefully, after reading this article, they’ll also know a couple more, as well as which methods produce pixel-perfect results.

1. Rounded Rectangle Vector Tool

Photoshop’s Rounded Rectangle vector tool appears like the ideal candidate for the task, until you realize that the edges it creates are blurry and inconsistent.

Vectorroundedrectangle in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Fortunately, there is a fairly well-hidden option that locks the Rounded Rectangle vector tool’s output to the pixel grid. Excellent.

To enable pixel-locked drawing for the Rounded Rectangle vector tool, check the “Snap to Pixels” option in the Options bar. If you have “Snap to Pixels” turned off, drawing at 100% zoom achieves the same result.

Vectorroundedrectangle-options in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

The result is perfect roundrects, every time. The only downside is that the corner radius can’t be altered during or after drawing the shape. If you need a different radius, you’re forced to draw it again. It’s a shame the roundrect tool isn’t like Illustrator in this regard, where the up and down arrow keys increase and decrease the corner radius while drawing.

On the positive side, keeping your objects as vectors means that you’ll be able to resize the document and the corners will take full advantage of any extra resolution. There is one small caveat though: if you resize, you’ll have to do it as an exact multiple, or risk fuzzy non-pixel–locked edges.

If you’re being pedantic about the results, you may notice that the antialiasing on the first half of each corner doesn’t match the second half — you’ll have to look carefully to notice, though. For example, looking at the zoomed corner below, the start of the corner to the apex isn’t identical to the apex to the end of the corner (starting from either side). In practice, that probably won’t create any issues.

Vectorroundedrectangle-fixed in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

2. Blur

The blur method is a bit of a hack that involves creating a selection, blurring it, then increasing the contrast so that you’re left with a sharp mask that’s antialiased nicely.

It’s seven steps in total and is prone to being inaccurate; plus, the radius of the corners can’t be changed on the fly. Applying levels can also be a bit fiddly. One advantage is that different levels settings can be used to obtain different degrees of antialiasing, from incredibly soft to completely aliased.

  1. Create a new layer.
  2. Draw a rectangular selection.
  3. Enter quick mask (Q).
  4. Gaussian blur by half the radius that you’d like for the rounded corners. (For example, a 10-pixel radius would need a 5-pixel blur.)
  5. Apply Levels (Command + L), and use about 118 for the black point and 137 for the white point on the input levels.
  6. Exit quick mask (Q).
  7. Fill selection.

Blur in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

On the positive side, this blur method can be used to quickly create some interesting and organic shapes that would be difficult to draw by hand.

Blur-examples in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

3. Circles

The circles method is very accurate and easily reproducible, but has a whopping 13 steps. That’s a lot of clicking for just a single roundrect.

  1. Create a new layer.
  2. Make a circular selection that is twice as large as the radius you would like (for example, a 10-pixel radius would require a 20Ă—20-pixel circle).
  3. Fill the selection.
  4. Move the selection right. This can be done quickly by holding down Shift and pressing the right-arrow key a few times.
  5. Fill the selection.
  6. Move the selection down.
  7. Fill the selection.
  8. Move the selection left.
  9. Fill the selection.
  10. Make a rectangular selection that covers the entire vertical span of the roundrect but that starts and ends halfway through the circles at the ends.
  11. Fill the selection.
  12. Make a rectangular selection that covers the entire horizontal span of the roundrect but that starts and ends halfway through the circles at the ends.
  13. Fill the selection.

Fourcircles in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

4. Stroke

The stroke method is very accurate, easily reproducible and has only about four steps, depending on the result you’re after. The corners are a bit sharper than those of the circle method, though. That may be a good thing or a bad thing, depending on your preference.

  1. Create a new layer.
  2. Draw a rectangular selection that is smaller than the area you require (smaller by double the radius, if you want to be exact).
  3. Fill the selection.
  4. Add a stroke as a layer style that is as thick as the corner radius you would like.

If you’d like to flatten the object to remove the stroke, keep following the steps below.

  1. Create a new layer.
  2. In the Layers palette, select the new layer and the previous layer.
  3. Merge layers (Command + E).

Strokeit in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

It’s possible to automate the flattening with a Photoshop Action. This can also be set up as a function key to speed things up further.

A huge advantage of the stroke method is that it’s dynamic, so the radius can be edited in real time. It can also be used to easily create other rounded shapes, as seen below.

Strokeit-examples in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Which Method Is Best?

In most cases, using the Rounded Rectangle tool with “Snap to Pixel” turned on will give great results and be the quickest method. If you’d like the ability to change the corner radius without redrawing, then the stroke method is the one to use.

However, as seen below, each method yields different results. So, depending on what you’re after, you may need to use a combination of methods.

Comparison in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

All tests were completed using Photoshop CS4 and CS5 on a Mac. Behavior for both versions was consistent.

Gradients

Gradients are a great way to add life-like lighting and shading to surfaces. When built with gradient layers and layer styles, they also ensure that UI elements can be scaled and reused easily.

Linear Gradients

Linear gradients are gradients in their most basic form — a gradual blend of colors and following a straight line. I’m sure you knew that, so onto the more interesting stuff.

Linear in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Reflected Gradients

Reflected gradients are like their linear friends, but they repeat the gradient twice, with the second repeat mirrored. This makes editing a little less tedious, provided it fits the result you’re after.

Reflected in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Radial Gradients

Radial gradients start from the center (or any chosen point) and grow outward in a circular pattern. They’re handy for creating spheres and applying effects to the edge of circular elements. The center point of the gradient can be moved by clicking and dragging on the canvas while the gradient window or layer styles window is open.

Radial in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Angle Gradients

Angle gradients can be a great way to mimic environmental reflections found on highly polished metallic objects. The center point of the gradient can be moved by clicking and dragging on the canvas while the gradient window or layer styles window is open.

Angle in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Gradients on Gradients

Anything worth doing is worth overdoing, right? Combining a gradient layer with a gradient layer style lets you overlay two different gradients, giving more complex and — here’s the good part — completely dynamic results. To combined the gradients, you’ll need to set a blending mode for the gradient layer style. For the examples below, I’ve used either Screen (good for lightening) or Multiply (good for darkening).

Gradients-on-gradients in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Dithering Is Everything

Adding dithering to a gradient produces smoother results. Non-dithered gradients often contain visible banding. Dithering is even more important if your artwork is being viewed on cheaper 6-bit per channel TN LCDs and certain display types that tend to amplify posterization problems.

Dithered in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

If you’re not seeing the difference, here’s an extreme and completely unrealistic example of gradient dithering in action:

Dithered2 in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Ensuring that your gradients are dithered is easy: just check the appropriate box in Photoshop.

Gradient-fill in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Note that gradient layer styles can’t be dithered, and gradients in placed objects (such as stuff you’ve pasted from Illustrator) aren’t dithered.

If you use transparency in a gradient, that won’t be dithered either, which can be a huge issue at times. There is a solution for some specific cases: if you’re using a gradient with transparency to lighten an area with white, then using a non-transparent gradient with a Screen Layer blending mode will let you dither it. The same technique can be used for darkening with the Multiply blending mode.

Transparency in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

A combination of the gradient techniques described above were used to create the Mac app icon below.

Mac-app-icon in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Gradient Maps

Quite different to other types of gradients, gradient maps can be a great way to add color treatment, allowing for very precise control. Gradient maps use the brightness of each pixel to map to a corresponding color in a gradient.

If the gradient starts at red and ends at blue, then everything white in the image will turn red, and everything black will turn blue. Everything in the middle tonally will map to the gradient, depending on how bright it is.

The image below was used in a poster for Kingswim, a swimming school:

Kingswim in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

With a gradient map. Large view

Without the gradient map, things look quite different. It’s a composite of about seven photos; the boy and background were shot on black and white film with intentionally low contrast so that the grain would be more prominent when the contrast was pushed by the gradient map. The gradient map also hides the color mismatches in the compositing.

Kingswim2 in Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles

Gradient map off. Large view

A Little Obsessed?

Absolutely. I conducted all of the tests above to learn more about some common techniques that I already use: that is, to reassess and fine tune, with the aim of improving my designs. Creating great artwork without intimately knowing your tools is certainly possible, but the more you know, the more likely you are to work faster and with greater confidence.

Would you like to know more about a specific technique or Photoshop feature? Please let us know in the comments.

(al)

Tweet

Follow

Get every new post delivered to your Inbox.