Mastering Photoshop for Web Design is the third book in our eBook series, and it’s definitely the best eBook we’ve published so far. It was written from scratch by our regular writer Thomas Giannattasio, exclusively for Smashing Magazine and its readers. We are very proud of the result, in particular because of the high quality of tips, ideas and techniques that Thomas — who is a deep expert in Adobe Photoshop — presents in his book.Mastering Photoshop is written for advanced and intermediate designers who want to brush up on their workflow and improve their Photoshop skills. The eBook contains 178 pages, explaining fundamental techniques that Web designers need to know to produce high-quality work in Photoshop. You won’t find any generic step-by-step tutorials or learn random effects. You will gain a profound understanding of what you can do with Photoshop and how to use it effectively in your work.All chapters have undergone a careful technical review by well-known designer, illustrator and speaker Elliot Jay Stocks. The book was proofread by our regular proofreader Andrew Lobo, and it has an attractive layout. The PDF can be printed and read on all devices.The AuthorThomas Giannattasio is an interactive designer who resides in the Washington DC metro area. He specializes in Web design and front-end development, particularly art direction, website design and application design, and has 14 years of experience. Thomas cares strongly about typography, simplicity and user experience. He works as a senior designer for a global marketing firm and freelances under the name attasi.Thomas’ articles on Smashing Magazine prove his expertise in Photoshop: The Ails of Typographic Anti-Aliasing and Unknown Photoshop Tricks and Time-Savers are two of the most useful Photoshop-related articles that Smashing Magazine has published over the years.The Expert’s Opinion“Photoshop is a powerful tool, and although the basics can be easy to grasp, mastering the application can be extremely difficult. This is where Mastering Photoshop comes in: it takes readers through the app in depth and relates all tasks back to the creative process. There’s much to learn in here, for beginners and experts alike.” — Elliot Jay Stocks, designer, illustrator and speakerThe eBook, in PDF format, is ideal for archiving, for armchair or mobile reading (including the iPad and iPhone via iBooks and other apps) and of course for printing. You can order your copy of Mastering Photoshop for just $19,90 (or €16.95 if you live in the EU) starting now and exclusively in our Smashing Shop.The book contains eight chapters:Color Management Colors can appear lighter or darker, more or less saturated, cooler or warmer, or just plain wrong depending on the user’s environment. This can be quite a problem, especially with a client’s brand-specific colors. As Web designers, our responsibility is to ensure that the experiences we craft are as true to the original as possible.Paths While Illustrator’s vector tools are much more powerful, Photoshop’s benefit lies in its ability to blend vector and raster data together seamlessly. Because Photoshop documents are based on a pixel grid, the path tools in Photoshop make them superior to Illustrator for designing on-screen media.Layer Styles Layer Styles are essential to creating flexible and non-degradable documents, because they’re separated from the layer’s actual content. In this chapter, we’ll cover how to create great-looking and reusable styles. We’ll also cover some unique effects and non-typical uses that help to consolidate excess layers.Brushes 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 skill takes time, but it is well worth the effort.Typography While the majority of type on the Web is rendered by HTML, Photoshop is still necessary to handle treatment beyond the grasp of CSS. In this chapter, we’ll explore Photoshop’s type tools and discover ways to maximize the software’s typesetting capabilities.Photography A photograph — especially of the human face — immediately draws the user’s attention and can be used to direct eye flow to important areas of the page. Placing a large photograph above the fold is a common way to provide an entry point to the content. Because photographs are high above other elements in the hierarchy, they need to be handled with care and precision.Exporting Once you’ve polished every last pixel, it’s time to get your work into the browser. This is a pretty straightforward process, but properly optimizing your images is crucial. You need to maintain a balance between clarity and download speed. This requires multiple formats, varying levels of compression and other optimization techniques. In this chapter, we’ll explore the workflow of exporting images via the “Save for Web and Devices” dialog.SummarySample Chapter and ScreenshotsYou can download the Chapter 4, Brushes (4.7 Mb, PDF) for free. Please consider buying the eBook if you find it useful or helpful.Large viewLarge viewLarge viewMotivation behind the bookIn the foreword, Thomas describes his motivation:“This book was written in the hope of filling a gap — a gap that has existed for as long as designers have been using Photoshop for Web design; a gap that we so often fill with tutorials focused on the latest trends and on inspiration galleries that are quickly browsed and forgotten; a gap that is growing as quickly as our technologies. It’s a gap of foundation.The fast pace of the Internet has focused us on the latest and greatest techniques, which typically have a lifespan of only a few months. Rarely do we focus on the fundamentals — the principles that outlive the trends. Unfortunately, the principles often appeal to us less than the shiny and new.Photoshop tutorials offer quick results. They hold our hands step by step until something incredible appears, but they rarely explain in depth the principles that allow us to create something unique and incredible of our own. If you’re a beginner, I hope this book gives you the comprehension you need to bring your ideas to life. If you’re a veteran, I hope it unveils some of the mysteries that have always boggled you.”The book is not protected by DRM and is available exclusively in the Smashing Shop. Please respect our work and the hard effort of our writer. If you received this book from a source other than the Smashing Shop, please support us by purchasing your copy in our online store.Thank you.(al)© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: ebook, mastering, photoshop, smashing
-
I posted to smashingmagazine.com
New eBook From Smashing Magazine: Mastering Photoshop For Web Design
http://feedproxy.google.com/~r/SmashingMagazine/~3/z7ljILtW-Wo/
July 27 2010, 5:23am | Comments »
-
I posted to smashingmagazine.com
The Ultimate Guide To Cloning In Photoshop
http://feedproxy.google.com/~r/SmashingMagazine/~3/IACDKcWyzLQ/
Photoshop’s 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.[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]The Clone Stamp ToolThe 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. Use the “Option” key (”Alt”) to set the source.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.To begin, simply click on the preferred source area while holding down the “Option” key (”Alt” on a PC). Then, with no keys held down, begin painting over the area you want to replace. The image area from the source will be transferred to the destination.To be able to use this tool effectively, let’s look at the relevant settings.Basic Settings: BrushBelow, you’ll find the default settings when the clone stamp is selected. The clone stamp’s basic settings.The first setting you’ll want to familiarize yourself with is for the brush. Photoshop does not restrict cloning to a basic default brush. Instead, it allows you to use any brush you want, allowing you to create an unlimited number of effects. In the example above, and in most cases in fact, a small to medium-sized round soft brush gives the best result. A hard brush creates noticeable seams.As you can see, a hard brush often creates visible edges along the path of the clone. The transition is much smoother on the left side, where a soft brush was used. Both sides suffer from noticeable replication, but this was intentional to exaggerate the cloned area. We’ll discuss how to avoid this later.As stated, while a soft round brush is recommended for basic cloning, a number of interesting effects can be created using alternate brushes. For instance, below I’ve used a scatter brush shaped like a leaf to add some visual interest to the photo. Use a scatter brush to create interesting particle effects.Experiment with the opacity, blending mode and brush flow for an even wider variety of results. For more information on using these features, check out the article “Brushing Up on Photoshop’s Brush Tool.”Basic Settings: SampleUnder the “Sample” menu are three options: Current Layer, Current & Below and All Layers. These options affect the area you are sourcing. Here’s a visual illustration of how each mode works: The area cloned depends on the selected layer and sample mode.As you can see, with Current Layer selected, the clone stamp ignores pixel data contained in any other layer. Conversely, All Layers ignores all layer distinction and clones any visible pixels in the document (invisible layers will be ignored). Finally, Current & Below samples pixels from the selected layer and any visible layers behind it.Basic Settings: Adjustment LayersThe final basic setting (the circle with a diagonal line through it) lets you decide whether the clone stamp tool should sample adjustment layers when cloning. Adjustment layers, such as Hue/Saturation and Levels, are meant to be a non-destructive way to change the appearance of layers. So, you can make drastic changes to a layer or group of layers without destroying the original pixels.Because of this, turning on Ignore Adjustment Layers When Cloning is almost always a good idea. This allows you to clone the original image, which can then be affected by an ever-changeable adjustment layer. If you do not choose to ignore the adjustment layer, the adjustment becomes permanent in the cloned areas.In the layer set-up below, turning on Sample All Layers would by default clone pixels from both the background layer and the adjustment layer in the foreground. Turning on Ignore Adjustment Layers prevents this. You can choose to ignore adjustment layers when cloning.The Spot Healing BrushAs you can see below, the Spot Healing Brush tool is located under the Eyedropper tool and above the Brush tool, and it can be accessed quickly by hitting J on the keyboard. Type J to bring up the Spot Healing Brush.The Spot Healing Brush is by far the simplest cloning tool in Photoshop. With little to no experience, you can repair small areas of an image. The secret to using the tool is in the name: Spot Healing. The tool is intended not for large areas of replacement, but rather to remove little unwanted spots, such as a scratch on an old photograph or a mole on a person’s face.To use the tool, simply hover over the area you want to replace and click once. Photoshop does all the work by examining the pixel data around the spot and seamlessly integrating the data into the destination. The Spot Healing Brush is perfect for repairing old photographs.As you can see above, the tool does a remarkable job of not leaving behind any noticeable artifacts or repeating patterns. The trick is to go slowly and work on very small portions of the image. Select a spot to fix, and use a brush that’s only slightly bigger than the selected imperfection. The larger the brush, the more likely you are to clone unwanted portions of the surrounding area, and the more noticeable the repetition of pixels will be. Use a brush slightly bigger than the target spot.The Healing BrushThe Healing Brush tool, located under the Spot Healing Brush tool, is very similar to the Clone Stamp tool. To begin, Option + click (Alt + click on a PC) to select your source, and then carefully paint over the destination to transfer the pixels. The Healing Brush performs this operation with more built-in intelligence than the Clone Stamp.As with the Spot Healing Brush, the Healing Brush attempts to automatically blend in the cloned pixels with the environment around it. The Healing Brush tool automatically blends the source with the destination.As you can see, using the Clone Stamp to clone the puppy’s eye results in a straight copy of the pixels, while the Healing Brush does a much better job of blending with the background.This built-in intelligence proves extremely helpful when cloning a subject with diverse colors, textures and lighting conditions. Using the Clone Stamp in these situations can leave you with a lot of noticeably patchy spots that really stand out from the surrounding area. The Healing Brush Tool makes it easy to clone visually complicated areas.The photograph above is a good example of a subject with a fairly complicated surface. Using the Clone Stamp tool would have made it quite difficult to paint over the cracked areas while retaining the integrity of the stained stone. Much of the discoloration would have been sacrificed as you sourced smoother areas to erase the cracks. However, the Healing Brush was able to effectively replace the cracked areas with smoother areas, while sampling from the surrounding area to replicate the stains.The Patch ToolThe final healing tool we’ll examine is the Patch tool, which can be found under the Healing Brush tool, as seen below. Tip: hit Shift + J to cycle between the tools in the fly-out menu.The cloning tools we’ve examined so far are best when used meticulously on small portions of an image. By contrast, the Patch tool is the best way to clone large, relatively uniform areas. As with the other healing tools, the Patch tool not only performs a straight clone but attempts to blend in the edge of the selected area with the target environment.To use the Patch tool, either make a selection with any of the selection tools, or simply select an area with the Patch tool’s built-in lasso. There are two modes to choose from for the behavior of the patch: “Source” and “Destination” (found in the menu bar above the document area).Source ModeWith the source mode selected, first select the area of the image you want to replace, and then drag that selection to the area you want to source. For instance, to eliminate the golf ball in the image below, you would first select the area around the golf ball, and then drag that selection around to find the best source. In source mode, first select the area you want to replace.As you drag the selection around to find a suitable source, watch the destination (i.e. your originally selected area) for a preview of what the source pixels will look like in that area. Keep in mind that this preview is a straight clone without any blending (the final image will look much better). Release the selection to see the actual result. The Patch tool’s result.As you can see, it does a pretty impressive job of blending the source and destination pixels all on its own. But going over areas that need improvement with the Healing Brush is good practice.Destination ModeWith “Destination” mode selected, the area you select first will be the area that is replicated elsewhere. For instance, if we start with the same selection as before, dragging the selection this time gives us a preview of copying the ball to a new location. Patch tool destination mode.After you release the selection, the golf ball is copied to a new area of the image and blended with the surrounding pixels. Result of “Destination” mode.The Clone Source PaletteThe Clone Source palette (found under Window → Clone Source) is an invaluable resource for professional-quality cloning. This tool gives you much more control over the results and functionality of the Clone Stamp and Healing Brush.The Clone Source palette contains three primary sections: cloning source, offset adjustment and overlay options. The Clone Source palette.Cloning SourcesIn the first section in the Clone Source palette, you can define multiple areas of an image as a source from which to clone and/or heal. Defining multiple sources.The image above illustrates an example of when you might want to define multiple sources. To save a source, click on one of the five source buttons, and then Option + click (Alt + click) with either the Clone Stamp or Healing Brush. That location will now be saved to that button. Now, select the next button in line, and do the same in another part of the image. Once your sources are loaded, you can quickly shift between them simply by clicking the related button.Notice that the file name appears just under the clone source buttons. This is because you can actually select a clone source outside of the image that you’re working on. Simply open a different file and set the clone source. Then, when you go back to the primary file to paint with the Clone Stamp or Healing Brush, the pixels from the other image will function as the source of the clone.Offset OptionsThe second section of commands in the Clone Source palette really increase the variety of cloned results available to you. You can set exact coordinates for the source, change the size of the cloned result relative to the original source, tweak the rotation of the result and set a precise offset (again, relative to the original source). Tweaking the cloned results.You can see these transformation effects in action in the example above. The two bails of hay are actually one and the same, but they look considerably different because of the offset options. First, I set both the width and height to 90%, so that the cloned bail would appear slightly smaller than the original. Then I changed the width to -90% to flip the clone horizontally (you could change the height to a negative number to flip the image vertically). Finally, I set the rotation to 10° to give the illusion of a small hill.Overlay OptionsThe overlay options are among the most helpful features in the Clone Source palette. Years ago, cloning involved a lot of guess work because it was difficult to tell exactly what the selected sample would look like without actually applying it. The guesswork has been eliminated with the “Show Overlay” command. When “Show Overlay” is selected in conjunction with the “Clipped” option, your brush is shown with a preview of the clone source inside. This is extremely helpful when attempting to clone inorganic areas with straight edges, such as a brick wall. An overlay of the source is displayed within the brush.Note that if you choose to turn on the overlay but turn off “Clipped,” then your entire clone source layer will be shown surrounding the brush. An overlay of the source is displayed within the brush.Working this way is actually quite difficult because the source significantly blocks your view of the destination. But if you prefer it, try reducing the opacity of the overlay so that you can see the image below.Vanishing PointVanishing Point takes cloning to an entirely new dimension, literally. The tool makes it possible to set up primitive planes across your artwork, which a clone then follows to simulate a three-dimensional space. Vanishing Point has a ton of features and potential applications, and it really merits its own entire article, so this will be just a brief introduction.When you open up the Vanishing Point dialog (found under the “Filter” menu item), you’ll see a large preview of your image, along with a small set of tools on the left side. The Vanishing Point dialog.Grab the tool sitting second from the top to set up your initial plane. With this tool, click once on each of the four corners, outlining the desired plane. Once you’ve created an initial plane, you can Command + click (Control + click on a PC) to extend the plane perpendicularly. Some images, though, like this old barn, won’t have perfect angles. In this case, you’ll have to create a second plane, entirely distinct from the original. Setting up planes.Once you’re satisfied with the planes, grab the Clone Stamp (fourth from the top), and Option + click the desired source (in our case, the barn door). Then clone the door onto the front-facing wall using the same method you would use with the normal Clone Stamp tool. Turn “Healing” on in the drop-down menu above the image preview to ensure that the source is properly blended into the destination. Vanishing Point result.As you can see, Photoshop interpreted the planes fairly well. Some fine-tuning and clean-up are definitely necessary if we want a believable image; but overall, the result is extremely impressive, given the lack of work required.5 Quick Tips For Better CloningNow that we’ve examined each tool in depth, let’s close by recalling a few things to keep in mind if we want to clone with professional results.Take Your TimeAs you undertake a cloning project, the quality of the result is directly proportional to the amount of time you put into it. Cloning photographic details can be incredibly tedious work. The world has become well acquainted with Photoshop magic, so never assume that no one will notice your blunders.Duplicate the Active LayerThe very first step to take when cloning parts of an image is to duplicate the layer you’ll be working on (or to just work on a new transparent layer). Realizing that you made a mistake so long ago that your “Undos” don’t go back far enough to fix it is beyond frustrating. Keeping the original image on a hidden layer gives you the flexibility to revert any part of an image to its original state.Be Selective With Your ToolsEach cloning tool has its strengths and weaknesses, as outlined above. Never arbitrarily grab a tool and stick with it for the duration of a project. Consider which tool is best suited to the particular area of the image you’re working on. On large projects, no single tool creates believable results on its own. Use two or more tools in synergy to achieve a realistic result.Watch for Obvious Duplication Sloppy cloning results in noticeable patterns.If you’re not careful, duplicated pixels can become painfully obvious. This is especially true of areas that should look fairly organic, like the grass above. Instead of appearing natural, an obvious pattern emerges when you use the same section of an image over and over. To avoid this, make heavy use of the Clone Source palette. Use multiple sources; and change the size, rotation and orientation of the areas you’re cloning to give the illusion of an unmanipulated image.Avoid DisastersWhen retouching significant parts of an image, overlooking certain areas becomes all too easy. Where did her leg go!?If you’re not careful, you could eliminate enough vital body parts to make the image humorous. Your goal is to prevent your work from showing up on Photoshop Disasters, which is where you’ll find the image above.ConclusionCloning in Photoshop is a difficult task that requires significant time, studious attention to detail and an in-depth knowledge of several tools and commands. To improve the quality of your results, invest some time learning Photoshop’s entire cloning arsenal. Experiment with all of the options for each tool to get a better feel for where you can excel.Additional ResourcesVanishing Point Video TurorialHow to Use the Clone Stamp Tool in PhotoshopCloning and Healing: Photoshop TutorialHow to Mirror Your Clone Stamp (video tutorial)Retouching and Healing Tools, Tutorial9(al)© Tommy Saylor for Smashing Magazine, 2010. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: photoshop, psd
March 30 2010, 2:49am | Comments »
-
I posted to smashingmagazine.com
Uncovering Toy Cameras and Polaroid Vintage Effects (With Photoshop Tutorials)
http://feedproxy.google.com/~r/SmashingMagazine/~3/ZKDn1CvlvM0/
Since its emergence, the digital photography market has gradually supplanted the traditional one. APN and digital SLR cameras entered our lives, and some people announced the death of silver-based images. This is not all lie, and yet old-fashioned images have been particularly popular in the past few years. All we do seem to do now is try to recreate the atmosphere of those bygone times anyway. Blurry, distorted and over-saturated images are not just a fad anymore. People have became familiar with the style and even consider it a full-fledged photographic genre.And this is where toy cameras play a role. These devices, made entirely of plastic, including often the lens itself, are not only toys. Sure, they cost next to nothing and have no controls to speak of, but this is what people like about them: they create unpredictable pictures, with equally unpredictable vintage effects. Once you understand this, the rest is a beautiful game. Take them anywhere, anytime, and photograph whatever you like. Photo credit: Pirouetting, by helenannsiaHow does this apply to modern design? Now that vintage websites are so trendy, why not look to this type of image for inspiration? You probably don’t want to go through the trouble of taking up silver-based photography because that would mean buying, developing and scanning film, maybe even making prints. That takes time and is expensive.What you can do, though, is use the magic of Photoshop to make your ultra-sharp, high-definition images look like they were taken with one of these cameras. Below are a list of the most famous toy cameras and some tutorials that can be used to recreate their famous effects. Most of them are part of the Lomography movement, but you might also want to consider some other options in trying to recreate that authentic look. You also may be interested in our previous article “The Disturbing Beauty of Oversaturated Pictures and Lomography.”By the way, what was the last time you visited our sister site Noupe? Subscribe to Noupe's feed for more inspirational and design-related articles.Famous Toy CamerasToy cameras are cheap, low quality and yet functional. As such, the deformations in the photos they produce are pronounced, and not all images are guaranteed to be perfectly exposed. Still, there are just so many of them these days that picking a few is hard. The ones presented here have paved the way for the success of the others. You may know them but not the stories behind them?DianaLet’s start where it all began. Picture yourself in Hong Kong in the early ’60s, when a factory starts producing the Diana. This inexpensive plastic-body camera was at the time usually given away as a novelty gift. Occasionally, it would be used by actual photographers who took advantage of the various effects it produced. And many effects there were. Because of the poor quality of materials used, the Diana camera was disposed to light leaks, leading to film damage, an effect typically fixed by sealing the seams with light-proof tape. Handy, huh?But the plastic body wasn’t the most interesting part: it was the lens, also made out of plastic. Not only did it enhance the already low contrast created by the light infiltration, but it also made for odd color rendering, chromatic aberration and blurry images. As if this weren’t enough, the image circle only marginally covered the diagonal of the film frame, which is why Diana images have heaving vignetting. Photo credit: elZekahAs photographers started to deliberately exploit these characteristics, production grew through the ’70s and opened the way for other toy camera manufacturers. Photo credit: chomdeeLomo LC-AThis is where things get a bit tricky, so pay attention. It’s now the beginning of the ’90s, and for a few years the Russian factory Lomo PLC has been producing the Lomo LC-A camera, which basically has all of the characteristics of a toy camera (vignetting in particular). But production was stopped, and the camera was all but forgotten until two Austrian students found one at a flea market in 1991 and decided to exploit its marketing potential. They convinced the director of the Lomo PLC factory to relaunch production and negotiated an exclusive contract for distribution with their brand-new company: Lomography AG. Photo credit: maakuAnd here begins the Lomography movement. If the term is familiar to you, you probably know at least two things about it. First, it promotes casual snapshot photography. Second, it is associated with over-saturated and high-contrast images. To confuse things, this second characteristic has nothing to do with the LC-A camera itself or with any other cameras for that matter. It is actually the result of the way the film is processed, which would usually be cross-processing. But Lomography is a movement, not a technique, and it was certainly the first to promote camera imperfections as an aesthetic. The success of the LC-A camera helped spread this aesthetic. Photo credit: citronnadeHolgaWith the success of this movement, Lomography AG became interested in other low-cost cameras, such as the Holga, which had been produced in China for a decade. Even though it was made by a different manufacturer, the Holga was considered the successor of the Diana. Inspired by its predecessor, the Holga was designed as an inexpensive mass-market camera. And like the Diana, it is not of the best quality and has the same flaws. Photo credit: babyabby10But the Holga became popular and was even exported to the West over time, mostly for photo-reporting, for which its low profile was appreciated. Its problems were no longer problems, and now it is not surprising to hear of Holga photos winning awards. Because it is entirely manual, one can create effects, such as double exposure and panoramas, by not winding the film. Photo credit: Bill Hansen (website)ActionSampler, SuperSampler, OktomatThese three cameras don’t have many differences. They all take multiple shots in a set period of time, thus creating micro-images that look like short animated movies. The Actionsampler and Supersampler have four lenses each, while the Oktomat has eight, fitting eight frames into the standard 35mm. Photo credit: amylynnthompsonTo make them a bit more fun, what you see through the viewfinder is not exactly what you get. Photo credit: golfpunkgirlLomo Fisheye 2As the name suggests, the Lomo Fisheye camera has a fish-eye lens. It was the first 35mm compact camera to offer such a wide angle (170°), and unlike the other toy cameras covered here, it gave surprisingly good results for the price. The second edition came with several enhancements, such a viewfinder that covered the same angle as the lens (it was blocked off before). Photo credit: aapnootmiesThe effect created, often seen in sport images, can serve many other purposes. But the user should be aware of two major characteristics: strong deformation and light leaks. Photo credit: fahaPhotoshop Tutorials And ResourcesNow, let’s put all this into practice. Even if you are familiar with these effects, have ever actually tried to replicate them? There are a lot of different effects, and you can combine them to create unique images.Faking the Holga Camera and Fisheye LensHow to Fake a Holga Photograph This tutorial shows you how to fake Holga photographs in a few simple steps.Another Way to Fake a Holga Photograph Another tutorial on faking Holga photographs.Fish-eye effect This shows you how to create a fish-eye effect for a picture taken with a regular lens. This one is a video and it addresses two important points: the lens circle border is not supposed to be so sharp when taking a fish-eye photograph, and one often deals with light infiltration.Fish-eye effect Another fish-eye tutorial. It doesn’t show how to distort the image, so you will have to add this step yourself, but it adds a nice final touch to the image by using a picture of the inside of a fish-eye lens.Recreating Low-Quality Camera FlawsVignetting A very simple tutorial on recreating the vignetting effect.Soft-Focus Lens Effect What if you’re already happy with the contrast and color saturation of your image and just want to recreate the effect of a soft-focus camera lens or diffusion filter? In this tutorial, you’ll learn a fast and easy way to add a more traditional soft-focus lens effect to images.Faking Barrel Distortion and Chromatic Aberrations Here is a nice Photoshop plug-in to fake barrel distortion and chromatic aberrations. Adding these effects to your pictures will make them look even more authentic.Light Leaks Effect, Part 1 and Part 2 Of course, this article wouldn’t be complete without a great tutorial on light leak effects. Here is an awesome one, divided into two parts, each covering a different effect: a white-blur light and a colored bar leak.Working on Colors and Light ExposureGetting That X-Pro Lomo Look This tutorial is fairly quick and easy. It shows you how to get that great x-pro Lomo look by tweaking color. You’ll be exploring a new method of vignetting, and you’ll be widening and blurring the image a little.Cross-Processing Tutorial With so many possible permutations of film stock and processing techniques, there is no single, identifiable look to cross-processed images. The most common combination is C-41 as E-6, in which slide chemistry is used to process color negative film; and mimicking it in Photoshop is a quick job. Image contrast is usually high, with blown-out highlights, while shadows tend towards dense shades of blue. Reds tend to be magenta, lips almost purple and highlights normally have a yellow-green tinge.Cross-Processing Another cros-processing tutorial.Vintage Effect Age your images a give them a vintage effect.Using Textures and Double ExposureThrough the Viewfinder Did you know that Flickr has a Through the Viewfinder group? The idea is that you shoot through the viewfinder of an old camera using your modern digital or film camera and create an interesting framing effect. Here is a tutorial on how to create this effect.Resources of Speckle Pattern Yes, there is also a Flickr group called “Noise and Dust Through the Viewfinder.”Paper Texture Effect Here is a quick and easy tutorial for those who want to learn the art of taking a photo and turning it into an old-fashioned vintage picture.Some More Paper Texture Effect Another tutorial (this one a video).Filmstrip Effect Download a filmstrip template and use it to create negatives of your pictures.Double Exposure When you take a double-exposed photograph, the results are usually a bit unpredictable. With Photoshop you have much more control over the result.Another Way to Create Double Exposure While the most common way to create a double exposure is by using a different blending mode on the top layer and adjusting its opacity, this method accurately simulates how a camera takes a double exposure.Other IdeasNo tutorials are needed to create these effects. They are included here merely to give you more ideas. You’ll still need to work on your pictures to get that vintage look. Then, just put them together and enjoy.Shoot Series Like the Oktomat and the Actionsampler Draw inspiration from the Oktomat and Actionsampler cameras. You’ll get either four or eight images in the same frame, each of them having been shot after an interval of only a few seconds. Photo credit: Look!, by MoyöShoot Series like the Supersampler The Supersampler effect is quite similar to the Actionsampler: four images in the same frame, but spaced differently. And remember that you can arrange layers both horizontally and vertically. Photo credit: moving clocks run slow, by aleinsomniacPanorama 1 Panorama images don’t necessarily have to be perfectly arranged. Here is an example of what else can be done. Photo credit: Christophe Dillinger (website)Panorama 2 Another inspiring panorama. Photo credit: bruceberrienPanorama 3 The panorama view can be combined with a filmstrip effect. It simulates a double-exposure panorama taken on a manual camera. Photo credit: mikrofoniuszWant More?PolaroidIf cheapness is a defining characteristic of toy cameras, it surely isn’t for Polaroids. The Polaroid camera itself is not expensive, but because Fuji is now the only company that produces the film for it, getting affordable ones has become difficult. But this may change in the next few months thanks to the Impossible Project.Going back a bit, the world’s first commercial instant camera was the “Land” camera, unveiled in 1947. Since then, Polaroid has become synonymous with instant photography, because most of the cameras have been created by the Polaroid Corporation. Nowadays, the cameras are used by photographers mainly to preview their work before actually shooting. But as toy cameras, they are fun to play with and can make for nice effects. Photo credit: paine666Polaroid and Transfer EffectRetro Polaroid Coloring on Your Photos This is a simple tutorial on how to get that retro Polaroid coloring in your photos.Polaroid Transfer Effect This Photoshop tutorial shows you how to create a cool old photo transfer edge effect using a piece of stock photography, an alpha channel and the burn and dodge tools.Showcase of Beautiful PicturesConsidering that Flickr has a group for almost every subject, it is no surprise that there is one for toy cameras. Here is a showcase of the most beautiful images from it. Photo credit: have I told you lately, by cHr1st1an S Photo credit: ubu84 Photo credit: 000038, by qwj Photo credit: 54330027, by etara Photo credit: Ipanema Beach – Brazil, by marcelo_maia Photo credit: Hélicoïdal, by Cathy Lehnebach Photo credit: Purgatoire, by stiveune Photo credit: untitled, by Greg Zauswoz Photo credit: untitled, by bradbrochill Photo credit: .., by cjlomo Photo credit: spree1, by hellomelly Photo credit: Love me two times, by laszlo_ototh Photo credit: exit, by renaishashin Photo credit: untitled, by Sergio Conde Sánchez Photo credit: Akhirnya buat lomba juga -__-, by febryanyovi Photo credit: Cosy Clausterphobia, by miss_michelle Photo credit: svema_test1, by ashtonleee Photo credit: untitled, by poppart Photo credit: lomographicsocietyinternational Photo credit: La Bòfia – Redscale, by fgali1964 Photo credit: chomdee Photo credit: offcenter Photo credit: Holga Tennis, by Nick Whitmoyer Photo credit: golfpunkgirl Photo credit: eyetwistFurther ResourcesOld Toy Camera – Photoshop action This Photoshop action makes images look as though they are aged prints, shot on a toy or antique camera. Also included are two actions that create borders similar to those seen on photos from many antique and toy cameras.Toy Camera Contest FILE presents here a selection of images submitted for its Toy Camera Contest. This collection gives an idea of the challenge facing the judges to find three winners. The range and quality of the submitted images are impressive.Gallery This project is home to photos taken with toy cameras. Most are plastic: Holga, Diana, Dorie, Debonair, Lubitel, Banner, Snappy and Yunon. Distortion, blur and imperfection are some of the characteristics that endear these cameras to enthusiasts.Abduzeedo: 60 Interesting Lomo Fisheye Shots Gathered here are a few Lomography fish-eye shots. Some were taken with Lomography cameras such as the Diana and the LC-A+ with a fish-eye lens adapter attached.Lomography.com Lomographic Society International Website.(al)© Jessica Bordeau for Smashing Magazine, 2010. | Permalink | 11 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: photography, photoshop, toy camera, tutorial, Tutorials, vintage
March 10 2010, 6:23am | Comments »
-
I posted to smashingmagazine.com
Photoshop Keyboard Shortcuts Cheat Sheet (PDF)
http://feedproxy.google.com/~r/SmashingMagazine/~3/gN97K_NtU7g/
Over the last months we released a variety of icon sets, tools and templates, but now we would like to release something a bit different for a change. In this post we are glad to release Photoshop Keyboard Shortcuts, a PDF-file with a handy overview of most useful keyboard shortcuts available in Adobe Photoshop. The cheat sheet was created by Kenneth Setzer and released especially for Smashing Magazine and its readers.The cheat sheet is a mousepad-sized image featuring a typical PC keyboard. Photoshop’s keyboard shortcuts are listed for each key, with the shortcut and its icon printed on the individual key. In red is the shortcut you will get by hitting the key in combination with the Ctrl key. For example, typing "t" in Photoshop will activate the Type tool, while typing Ctrl+t will allow you to use the Transformation tool. Additional shortcuts requiring more than two keys are listed as well.Download the cheat shee for free!Of course, you can use the PDF for all of your projects for free and without any restrictions. The PDF may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you want to spread the word.large preview (.jpg)download the set (.pdf, 2.5 Mb)Behind the designAs always, here are some insights from the designer herself:Originally, I intended to buy a keyboard overlay with Photoshop shortcuts, but couldn’t find any for a PC, just for Macs. So I compiled a list of keyboard shortcuts, and thought they would fit nicely on a mousepad. I think printing it out and hanging it by the monitor works just as well. I hope those learning Photoshop will find it useful, as well as the more advanced users who may have forgotten some of the less-often-used shortcuts. They save a lot of time, and can impress your boss!Thank you very much, Kenneth! We appreciate your efforts.© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 8 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: cheat sheet, PDF, photoshop
- Tags:
- Freebies
- photoshop
- cheat sheet
February 10 2010, 1:40am | Comments »
-
I posted to smashingmagazine.com
Mastering Photoshop: Unknown Tricks and Time-Savers
http://feedproxy.google.com/~r/SmashingMagazine/~3/pHC7rrU8n2c/
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 we’d 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 don’t even have equivalent menu options.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.[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]LayersSelectionSifting through nests of layer sets to find the layer you need quickly becomes tiresome. Luckily, there are a number of ways to select layers more intuitively. Using the Move tool (V), you can Command + click on the canvas to select the uppermost layer with pixel data located directly below the mouse. If your layers are grouped within layer sets, this action may have selected the entire folder. You can change this behavior to select the actual layer by using the Auto-select drop-down in the Move tool’s property bar.Changing auto-select behavior.There will be times when you want to select a layer that is located below a number of other layers. By right-clicking with the Move tool, you’ll bring up a contextual menu containing a list of all layers located below the cursor. If your layers are properly named, you should be able to quickly select the layer you need. By holding Shift while using either of the selection methods above, you can select multiple layers. After selecting multiple layers, you can link the layers together by right-clicking and selecting Link Layers.Right-clicking to display all layers beneath the cursor.The keyboard can also be used to select layers. Pressing Option + [ or Option + ] selects the layer below or above the current layer, respectively. Pressing Option + < selects the bottommost layer, and Option + > selects the uppermost. Option + Shift + < selects all layers between the current layer and the bottommost layer, and Option + Shift + > selects all layers between the current and uppermost.SortingSorting layers with the mouse can be clumsy and slow. A few shortcuts speeds up the organizing. Command + [ and Command + ] moves the selected layer up or down one position in the stack. If multiple layers are selected, they’ll move relative to the uppermost or bottommost layer. Pressing Command + Shift + [ or Command + Shift + ] brings the selected layer to the top or bottom of its current layer group. If the layer is already at the top or bottom of the layer group, it jumps to the top or bottom of the parent layer group.ViewingOption + clicking the eye icon of a layer is a commonly known way to hide or show all other layers. There is also a way to expand and collapse layer groups: by Command + clicking the arrow next to the layer group, you can close or expand all other layer groups; this does not work on nested layer groups. Alternatively, right-clicking the arrow gives you a menu to perform the same actions; but this will work on nested layer groups.DuplicatingThere are a number of ways to duplicate data from one layer to another. Duplicating an entire layer is as simple as pressing Command + J. If a selection is active, you can use the same shortcut (Command + J) to create a new layer based on the selected area of the original layer. Pressing Command + Shift + J with a selection creates a new layer while cutting the data from the original layer. Holding Option while pressing one of the arrow keys allows you to duplicate the current layer and nudge it by 1 pixel. Holding Shift and Option nudges the new layer by 10 pixels.Duplicating data from multiple layers can also be done more quickly using some keyboard commands. Using Command + Shift + C with an active selection copies the data contained within it to the clipboard. You can then paste it to a new layer (Command + Option + Shift + N, Command + V). If you’d like to create a flattened copy of the entire document, use the shortcut Command + Option + Shift + E: a composite of all visible layers will be added as a new layer to the top of your layer stack. BrushesShape and SizeBeing able to quickly adjust the brush tool is crucial to getting a swift workflow. Many know about using [ and ] to decrease and increase the brush’s diameter, as well as Shift + [ and Shift + ] to decrease and increase the brush’s hardness. However, CS4 introduced an even more intuitive way to do this. By holding Control + Option and dragging on the canvas, you can change the brush’s diameter with a visual aid. Control + Command + Option and dragging gives you control of the brush’s hardness.The on-canvas drag makes brush adjustments more intuitive.If you would like to completely change the brush shape to a different preset, press < or > to cycle through them and Shift + < or Shift + > to select the first or last brush. Right-clicking inside the canvas also displays a condensed menu of brushes.Opacity, Flow and ModeThe opacity of the brush tool can be quickly tweaked using the number keys: 3 = 30%; 3 + 5 = 35%; 0 + 3 = 3%; 0 = 100%. Holding Shift when inputting the numbers sets the flow of the tool. Note that if Airbrush mode is on, these two shortcuts swap (i.e. holding Shift controls opacity instead of flow). You can toggle Airbrush mode on and off using Option + Shift + P. The same numeric input method can be used to determine the opacity of a layer when the Move tool (V) is active; pressing Shift allows you to alter the Fill of the layer.Quick FillInstead of selecting the Fill tool (G), you can quickly bring up the Fill menu using Shift + F5. Even better, bypass the menu entirely using Option + Backspace to fill with the foreground color or Command + Backspace to fill with the background color. These keyboard commands can also be used to quickly set the color of a type or shape layer. To preserve transparency when filling, you could first lock the transparency of the layer by pressing / and then fill, but there’s an easier way. Pressing Option + Shift + Backspace or Command + Shift + Backspace fills with the foreground or background color while preserving transparency.Pressing Command + Shift + Backspace to preserve transparency while filling.Blending ModesYou can cycle through blending modes or jump to a specific one by using just the keyboard. By pressing Option + Shift + (+) or Option + Shift + (-), you can cycle forward or backward through available modes. Alternatively, you can set a specific mode using the shortcuts below.TypesettingSetting type is a delicate and time-consuming process, but shortcuts speed it up. First off, hiding the inversed block that is created by selecting text is extremely beneficial. Command + H allows you to toggle the visibility of both the highlight and baseline stroke, making it easier to see the final result. When finished editing your text, you can commit changes by pressing Enter on the numeric keypad or Command + Return. Pressing Esc discards changes.VariantsThere are six shortcuts for changing the font variant, but they should be used with caution. If the appropriate variant or character does not exist within the currently selected font family, Photoshop creates a faux variant. These fake variants are frowned upon within the typosphere and are extremely easy to spot. So, if you use these shortcuts, make sure that Photoshop has selected an actual variant and not faked it. Now, onto the shortcuts:JustificationTo set the justification, use one of the commands below. Note that a selection must be made within the target paragraph for these to work.Spacing and SizingProperly sizing and spacing type is a tedious task, but Photoshop does provide some handy—albeit broad—shortcuts. Unfortunately, there is no way to fine-tune the increments by which they adjust. Note that these shortcuts will work only if a text selection is made; selecting a type layer is not enough. To change the type size by increments of 2, press either Command + Shift + < or >. To bump the increment up to 10 points, use Command + Option + Shift + < or >. Leading can also be modified by 2 or 10 point increments using Option + Up or Down arrow or by Command + Option + Up or Down arrow.The arrow keys can also be used to adjust kerning and tracking. Pressing Option + Left or Right either kerns or tracks 20 units depending on whether or not a type selection is active (i.e. if the cursor is between two characters, kerning is applied; if multiple characters are selected, then tracking is adjusted). The increment can also be changed to 100 units using Command + Option + Left or Right arrow. Finally, the baseline can be shifted by 2 or 10 points using Option + Shift + Up or Down arrow or Command + Option + Shift + Up or Down arrow, respectively.ResetsSometimes, we have to return to the defaults. Below are some shortcuts to get you back on track.MenusHidden within many of Photoshop’s menus are a number of shortcuts that make adjustments faster and easier. Just about every menu—whether for Adjustment, Filter or anything else—allows you to revert to the original settings; by simply holding Option, the Cancel button will turn into a Reset button. Depending on the menu, holding Option might even change some of the other buttons (e.g. the Done button in the “Save for Web and Devices” menu will change to Remember). Certain menus, such as the Filter Gallery, also allow you to hold Command to turn the Cancel button into a Default button.Using modifier keys to uncover in-menu options.Spring-loaded CommandsBy default, most menus transform the cursor into the Hand tool or Move tool. These tools can be used on the canvas while the menu is open to pan the document or to adjust settings, such as the Angle and Distance settings for a Drop Shadow. More tools, however, are available via spring-loaded shortcuts. The zoom tools can be accessed using either Command (to zoom in) and Option (to zoom out) or Command + Space (to zoom in) and Command + Option + Space (to zoom out). The hand tool can also be accessed by holding the space bar.Holding Command + Spacebar to access the zoom tool within the Blending options.Adjustment Menus and LayersThe Curves adjustment, like most other adjustments, contains some handy shortcuts. Similar to how you can cycle through the Channels in a document, you can cycle through the adjustment’s channels using Option + 2, 3, 4, 5, etc. You can also cycle through the points on the actual curves using - and =. With a point selected, you can nudge the points in increments of 2 in any direction using the arrow keys. Holding Shift in conjunction with the arrow keys moves the point by 16 units. When working with an adjustment menu, you can toggle the Preview option on and off by pressing P. Adjustment layers don’t have a Preview option, but you can temporarily disable it by pressing and holding .SummaryHopefully, reading this has taught you a few new tricks and uncovered for you some of the more obscure options within Photoshop. While memorizing shortcuts can be a chore, integrating them into your daily workflow saves you an incredible amount of time. Do you have other obscure time-savers? Share your favorites in the comments!Related ArticlesPhotoshop Secret ShortcutsJohn Nack on Adobe: Shortcut Changes in PS CS4Adobe Photoshop Keyboard ShortcutsPhotoshop Keyboard ShortcutsAdobe Photoshop CS3 Keyboard Shortcuts(al)© Thomas Giannattasio for Smashing Magazine, 2010. | Permalink | 147 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: photoshop
January 20 2010, 7:09am | Comments »
-
I posted to smashingmagazine.com
Space Explosion Photoshop Tutorial
http://www.smashingmagazine.com/2009/02/22/space-explosion-photoshop-tutorial/
by Tyler Bramer Digital space art is one of the most inventive and beautiful art genres of this era. This tutorial shows you how to create your own space scene using three stock photos and Adobe Photoshop. The majority of the effects use the brush tool, layer effects and the filter gallery. You may want to set aside an hour or two before starting this tutorial because it requires quite a bit of work to accomplish. So get those creative juices flowing and let’s get started! Download the files Before we begin, we need some resources to use for this tutorial. Let’s also preview the image that we will have created by the end of this tutorial. You can also download the full source files.
Download images Download full Photoshop source files (.zip, PSD)
- Note: Planet and moon were found on Google Images. The rock was taken from stock.exchng. Step 1: Placement of Planets Create a new document that is 1200 x 1600px with a black background. Then, place the image of the planet in your document and move it to where you want it located. Because the colors of the planet are a little dull, let’s modify a little. Duplicate your planet layer by right clicking it and selecting Duplicate Layer. Set the new layer’s Blending Mode to Overlay. Go back to your original planet layer and grab your Burn Tool. Set the brush size to 300 px and make sure the Range is Midtones and the Exposure is 50%. Burn the lower left half of the planet, making sure you follow the curve of the planet as you do so.
Place the image of the moon in the upper-right area of the planet. Like we did with the planet, duplicate the moon and set the layer to Overlay.
Step 2: Creating the Environment Before creating an environment for our space scene, you may want to look at some resources and art work done by others to get some inspiration and knowledge. PSDTUTS has a great post with some amazing artwork done by talented artists. Make sure all of these layers are located beneath the planet layer. You may also want to put them in a group. Creating the Coloration Create a new layer and fill it with White. Grab a 300 px soft brush with 75% opacity and turn Scattering on.
Erase across your layer so that there are random areas of white and gray. Then set the layer opacity to 25%.
Create a new layer. Make sure your foreground and background colors are black and white, and go to Filter > Render > Clouds to fill your document with some black and white “clouds.” Then apply Filter > Render > Difference Clouds about three or four times.
Set the blending mode to Overlay, the Fill to 75% and apply the following Gradient Overlay.
Create two new layers. On each of them, render some clouds and apply difference clouds on only one of them. Set both of them to Overlay.
Creating the Stars Make a new layer and fill it with black. Go to Filter > Noise > Add Noise. Set the Amount to 10%, Distribution to Gaussian, and make sure Monochromatic is checked.
However, this adds way too many stars to our document. To fix this, go to Image > Adjustments > Levels. Set the left slider to 50 and the right slider to 100. This will keep only the larger stars and a few medium ones in the image. Then, set the blending mode to Screen so that only the stars show up and that the black areas of the layer are hidden. You may want to create multiple layers with this technique and lower the Opacity to create more depth.
Create a new layer and grab a white 5 px soft brush. Then change the brush settings to the following:
Brush areas of the new layer to add some larger stars. Don’t add too many, and try to put them in places that make them pleasing to the eye. Then add a white Outer Glow, with the blending mode set to normal.
More Coloration Create a new layer and fill it with a dark blue color, such as #1b1464. Grab a large 300 px soft eraser brush with 75% opacity. Turn the Scattering on and erase areas of the layer so that only certain parts are colorized. Try to leave more in the upper-right area of the layer, because this is the focal point of the graphic. Set the layer to Screen, and lower the opacity to 40%.
Repeat this process again with a different color, such as with a green, #20410a. Set this layer to 50% opacity.
Create a new layer and grab a large soft black brush, between 300 px and 800 px. Brush once or twice behind the upper-right corner of the planet. Lower the opacity to 40%, and then apply Outer Glow of the white, set to Overlay.
Color Balance Now for the fun part. This next step brings the background environment together! Go to Layer > New Adjustment Layer > Color Balance. Shadows:
Cyan/Red: +20 Magenta/Green: -3 Yellow/Blue: +20
Midtones:
Cyan/Red: -1 Magenta/Green: +23 Yellow/Blue: +31
Highlights:
Cyan/Red: +52 Magenta/Green: -17 Yellow/Blue: -76
Light Bursts Create a new layer. Grab a 300 px soft white brush, set to Dissolve, and brush once on the layer in the upper right. Then go to Filter > Blur > Radial Blur. Set the amount to 75, Zoom, and Best. Set the layer to Overlay. Repeat the process using a larger brush and apply it further down.
Empty Space On a new layer, grab a 500 px black brush and brush around the outer edges to create some nice black space. Make sure the bottom-left corner has more because we want that area to be dark.
Step 3: Planet Effects Make sure the following layers are all placed beneath the moon layer, so that they only apply to the planet. You may also want to put them in a group. Darkening Areas Duplicate your planet layer. On the bottom planet layer, apply a Filter > Blur > Gaussian Blur of 3 px. Then apply an Outer Glow of white, set to Overlay.
Create a new layer above your planet. Then, select your planet by Ctrl + clicking on the layer thumbnail of the planet. Fill the selection with black, and set the layer to Overlay. Then lower the opacity of the layer to 40%.
Create another new layer, and once again select your planet. Grab a 500 px soft black brush and brush around the outer edge of the planet, but leave the upper right untouched, because we want this to be the bright side of our planet.
Creating an Inner Glow Create a new layer, and select your planet. Grab a 300 px soft blue (#00aeef) brush, and brush around the outer edge of the selection, making sure you get more blue on the upper right of the planet because this is where our bright side is.
Create a new layer and select your planet. Fill the selection with white. Drag the selection diagonally down and to the left, and delete most of the white. Then apply a Gaussian Blur of 5 px.
Then give the layer an Outer Glow of white, set to Overlay.
Color Balance Once again, select your planet. Then go to Layer > New Adjustment Layer > Color Balance. You’ll notice that the color balance layer now has a mask applied to it of the selection we made. Shadows:
Cyan/Red: +6 Magenta/Green: -1 Yellow/Blue: -3
Midtones:
Cyan/Red: -78 Magenta/Green: 0 Yellow/Blue: +29
Highlights:
Cyan/Red: +47 Magenta/Green: -8 Yellow/Blue: -33
Glow Effects Once again, create a new layer and select your planet. Grab a 300 px white soft brush and brush around the bottom ¾ of the planet. Try to make the brushes fit the curvature of the planet. Then set the layer to Overlay, and lower the opacity to 50%.
Create another new layer and select your planet. Using a 300 px white soft brush, brush inside the upper-right side of the planet. Then set the layer opacity to 20%.
Create another layer, similar to the last one, except create more white space on this layer. Also, change the layer to Overlay and the opacity to 50%.
Create another new layer. This time, grab a 300 px brush and a nice red-orange color (#e6602b). Select your planet and then brush an orange area underneath the moon. Change the brush color to a yellow (#fdfc92) and brush a smaller area underneath the moon. Lower the layer opacity to 50%.
On a new layer, select a 200 px black brush and then brush around the bottom ¾ of the planet. Don’t restrict the selection to the planet this time. Let some of the brush overlap the background.
Intermission! I would like to take this moment to congratulate you if you’ve made it this far. This is quite a long tutorial and requires a lot of dedication from you to follow. Don’t be frustrated, either, if your example doesn’t look like mine. It takes years to develop your skills in Photoshop. Keep experimenting, and find some great inspiration and resources to keep you moving along. When working on a document of this complexity, make sure you keep all of your layers organized and labeled. Below you can see how I currently have my groups and layers organized and labeled, so that I can easily recognize them when I look back at them later. Ignore the hidden layers, those will come later.
Large view
Step 4: Moon Effects and Explosion Make sure all of the following are located above the moon layer. You may also want to put them in a group. Glow Effects Remember when we used a red brush and a yellow brush to create a glow in the upper right of the planet? We are going to do the same thing to the lower edge of the moon. Grab a 200 px red-orange (#e6602b) brush, and brush around the outer edge, ¾ of the way around the moon. Repeat the same process with a 100 px yellow (#fdfc92) brush. Then lower the opacity of the layer to 20%.
Remember how we created the white glow in the upper-right area of the earth? Repeat the same process for the moon. Select the moon on a new layer, fill it with white, move the selection down some and then delete most of the white. Apply a Gaussian Blur of 1 to 2 px. Then give it an Outer Glow of white set to normal.
Explosion Create a new layer and grab a 65 px white soft brush. Then brush a small area where the moon meets the planet. This layer will add to the effect that the next two layers create.
Create another new layer and keep your 65 px white brush. Brush a larger area underneath the moon. Make sure you follow the curvature of the moon as it meets the planet. Then, grab a small 3 px brush and turn Scattering to 1000% and Size Jitter to 75%. Brush some white particles around the area that you just brushed white.
While still on this layer, apply an Outer Glow with the color #ffa800, set to Overlay.
Create a new layer and fill it with black. Then go to Filter > Render > Lens Flare. Set the Brightness to 100% and the Type to 50 to 300 mm Zoom. Move the flare so that it is positioned towards the bottom left, and then press “Okay.”
Erase most of the layer, only leaving a small area around the main part of the flare. Then position the center of the flare over the moon. Then set the layer to Linear Dodge.
Create a new layer. Use a number of soft brushes with a nice red color (#ed1e26) to create a red hotness above the moon. Then lower the opacity of the layer to around 10 to 15%.
Step 5: Creating the Asteroids To create our asteroids, we are going to add another stock image to our document. There’s a great picture of a huge rock over at stock.xchng, so we’ll use that! Normally, you would use the pen tool to cut the rock out yourself, but I’ve done it for you to speed up the process.
Large view Open the image, and select the white background using the Magic Wand Tool. Then go to Select > Inverse to invert your selection, so that the rock is selected. Copy and paste it into your document. Then position it over the planet, rotate it so that the light part is facing the explosion, and finally resize it to a nicer size. Then duplicate it, and set the new one to Overlay. Press Ctrl + E to merge the two layers together so your asteroid is one layer again.
Duplicate your asteroid multiple times, resize it and rotate it. Do this until you have a nice little cluster of asteroids. If any of the asteroids gets blurry, go to Filter > Sharpen > Sharpen to sharpen it up a bit.
If you have any asteroids above other asteroids, they need to cast a shadow. Select the asteroid that has a shadow cast on it. Then, on a new layer above that asteroid, use a small soft black brush to brush a shadow in.
As before, use a nice orange (#e6602b) and yellow (#fdfc92) color to color the edges of the asteroids. Do this by Ctrl + clicking on the layer thumbnails and then using a large soft brush to brush the edges on a new layer. Set the layer mode to Multiply and the opacity to 50%.
Repeat the process multiple times for the other asteroids. Try to find other pictures of rocks to get some different sizes and shapes.
Step 6: Final Touches These next steps are for really going in and chiseling out the look we want. This stage usually involves a lot of experimentation and patience to get the look you want. Create a new layer on the top level of your document. Go to Image > Apply Image and press “Okay” to paste a merged copy of your document onto the layer. Go to Image > Adjustments > Desaturate to make the image grayscale.
Then go to Filter > Blur > Gaussian Blur and apply a blur of 2 px. Set the layer to Overlay and lower the opacity to 50%. What we just did was make our dark colors darker and our light colors lighter, and also add a small blur between them to give it a glow.
Large view Final Step: Pat Yourself on the Back There we have it: our Space Explosion is complete! I don’t know about you, readers, but I’m exhausted. Normally, pieces like this take days or weeks to put together, and now that you know how to do it you can create some original pieces of your own. Below, you will find some links to works that inspired this tutorial and others that are for inspiration. Resources
PSDTUTS: 40 Mind-Blowing Digital Space Paintings deviantART: Art deviantART: Brushes
About the author Tyler Bramer loves graphic design and game development. He constantly seeks to improve himself and find as much inspiration as he can. He passes any knowledge he has on to others as best as he can. You can follow Tyler on Twitter. (al)
© Tyler Bramer for Smashing Magazine, 2009. | Permalink | 22 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Submit to Reddit | Submit to Facebook | Who is linking? | Forum Smashing Magazine
Post tags: explosion, photoshop, tutorial
February 22 2009, 6:14am | Comments »
-
I posted to smashingmagazine.com
The Ultimate Collection Of Free Photoshop Patterns
http://www.smashingmagazine.com/2009/02/12/the-ultimate-collection-of-free-photoshop-patterns/
by Steven Snell Photoshop users can save themselves a great deal of time and end up with better results by taking advantage of readily available freebies, such as brushes, patterns and shapes. With the wide variety and (often) high quality of resources available, whatever you need or are looking for is in most cases already available somewhere. The only problem is that the vast quantity of freebies can make it difficult to track down what you need. Hopefully this collection of excellent Photoshop patterns will help. The resources featured here are all available as downloads in PAT format, which can be placed in Photoshop. In addition to this format, there is also a number of quality resources online for creating or using patterns in other formats that can be used by any program, not just Photoshop. As with any type of freebie, always be sure to check the license or requirements set by the creator. Skull Patterns Two skull patterns from Go Media using an image from one of its vector packs.
Carbon Fiber A carbon fiber pattern.
Patterns from PunkSafetyPin This set of 15 patterns from a deviantART user offers more than 30 other packs of patterns.
Grunge Pattern Set Nine large and high-quality grunge patterns.
Dots Pattern Set Eight dot patterns of various colors and styles.
Hexagonal Patterns Seventy-two black-and-white horizontal and vertical patterns.
Skulls and Hearts Three different gray, white and pink patterns.
Charcoal Demask One seamless pattern.
Victiorian Dreams Textures Ten textured patterns of different variations.
Paisley A set of eight stylish paisley patterns.
Checkered Patterns Three different patterns featuring a checkered design.
Different Texture A swirling flourish pattern.
Scanline and Screentone Patterns A big collection of 27 different patterns.
Spiderman Pattern One tileable metal pattern.
Patterns from DesignSpice A set of 10 repeating blue patterns.
Zig-Zag Pattern Set Eight colorful zig-zag patterns.
Scanlines1000 A set of 21 transparent patterns of scan lines.
Patterns by Raimyu A set of 20 patterns of different kinds.
Squidfingers Pack A huge set of 108 different patterns of all kinds.
Textured Stripes Six patterns of textured diagonal stripes of various colors.
Floral Patterns A set of 17 patterns with different floral styles.
Tile Patterns A large set of 36 patterns of tiles. Brick and wood patterns are also included.
Animal Print Patterns This set includes 18 different animal-fur print and skin patterns.
Grungy and Dirty Patterns Seamless, big texture patterns. There are 27 in the set.
Micro Patterns A big collection of 54 patterns.
Vector Patterns Twelve attractive patterns in this set.
Wallpaper Patterns A total of six patterns (two different sizes of three patterns).
Dots and Stripes Patterns Ten patterns, four of stripes and six of dots.
Floral Patterns Includes 28 patterns, plus PNG files for each.
Cards Pattern Eight different variations of the pattern are included.
Handmade Paper Patterns A set of seven patterns (the same pattern in seven colors).
Patterns by Camilak3 A set of 17 patterns that include stars, butterflies, hearts and paw prints.
Web 2.0 Pattern Collection A huge set of 133 patterns in various Web 2.0 styles.
Seamless Patterns Six different patterns to choose from.
Stripes Patterns This set includes four patterns in various colors.
Wood Pattern Textures Set This set includes 19 wood patterns with different shades and styles.
Plaid and Checkered Patterns A total of 25 patterns are included in this set.
Lace Patterns This set contains 19 seamless lace patterns.
Noise Patterns Ten seamless noise patterns for adding texture.
Brick Texture Patterns This set includes eight brick patterns.
Composition Patterns Five patterns of notebook paper and a composition book.
PS Patterns Pack A set of three different patterns, including squares, dots and hearts.
Fire Patterns A set of 20 high-resolution fire patterns.
Chevrons Pattern Set A set of eight patterns of different shapes and colors.
Fiber Paper Pattern Set A set of 10 patterns of different colors with a textured look.
Patterns #22 A set of 30 colorful patterns.
Spring Fling This set includes 36 pink and green patterns.
Stripes Patterns A set of 30 disturbed stripe patterns.
Line Patterns This set contains 25 colorful patterns of lines.
Bourbon Stripes A set of 12 stripe patterns, both vertical and horizontal, with different color combinations.
Hearts and Boxes Three patterns in a hand-drawn style.
Related Resources, Tutorials and Articles: How to Install Photoshop Patterns If you’re unsure how to install and use the patterns featured here, this article explains the simple process. Photoshop Tutorial: Creating Custom Patterns Hongkiat has a tutorial that demonstrates the steps in creating a simple repeating pattern.
Creating Patterns in Photoshop CS2 Veerle demonstrates how to use Illustrator and Photoshop to create a seamless pattern.
BgPatterns A fun and useful tool for creating your own JPG file to use as a repeating pattern.
Stripe Generator If a striped pattern is what you’re after, this tool will let you create your own any way you like it.
COLOURlovers COLOURlovers has a great collection of user-submitted patterns for downloading in PNG format.
About the Author Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)
February 12 2009, 7:00pm | Comments »
-
I posted to smashingmagazine.com
Light Blurs Brushes and Decoration Pack For Photoshop
http://www.smashingmagazine.com/2008/12/15/light-blurs-brushes-and-decoration-pack-for-photoshop/
Over the last few weeks, our readers have complained that we have been releasing “way too many freebies“. Apparently, we have been posting “too many filler articles” containing freebies that can be found elsewhere on the Web. We would like to make it clear that we do try to release useful things, and we do try to keep the high quality of these freebies and it has never been our intention to fill our publishing schedule with freebie posts. We are going to continue to release freebies from time to time (though not as often as we have over the last months), and we’ll make sure they meet our (and your) standards of high quality. Please let us know your opinion in the comments section below and in the poll below. Thank you. In this post we release two sets, a Light Blurs Photoshop Brushes, a set of 23 high-quality “light” brushes and Vector Photoshop Brushes Decoration Pack, a set of decoration brushes for Photoshop. Light Blurs Photoshop Brushes Light Blurs Photoshop Brushes is a set of 23 high-quality brushes, created for Adobe Photoshop and available for free usage without any restrictions whatsoever. The set is created by Ben Collier especially for Smashing Magazine and its readers.
You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.
large preview download the set (.zip, 18 Mb)
Motivation behind the design Here are some insights from the designer himself: “I recently discovered the fireworks mode on my Sony Cybershot and have since been experimenting with a bunch of different light sources. The results have been pretty interesting, so I thought I would make some of them into a brush set. For this set I used candles, a desk lamp, my iPhone, my car radio, my car cigarette lighter, a clock radio, street lights and some sparklers (the most fun!). I then took the image, changed it to a grayscale document, inverted the colours, then adjusted the levels until I was happy with the contrast. They’re all quite large brushes and could be useful for a lot of different effects so I hope you enjoy! Feel free to use them for anything you like - both commercial and personal. Some of them are released for free on my weblog. Please send me a link if you end up using any of my brushes in your designs – I would love to see them!” Thank you, Ben. We appreciate your efforts and your intentions. By the way, together with a couple of professional Photoshop tutorials for glows and light effects you can certainly use this set to add some beautiful lightning effects in your designs. Vector Photoshop Brushes Decoration Pack A set of decoration vector brushes compatible with Photoshop version 7 and higher as well as a vector .eps-file compatible with Adobe Illustrator 8. Designed by 123freevectors.com exclusively for Smashing Magazine and released as a gift to its readers.
You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.
large preview download the set (.zip, 1.7 Mb)
We would like to express a sincere gratitude to designers helping us to release professional high-quality freebies. We appreciate your support and your good intentions. Would you like to have freebies on SM? We would like to know your opinion. Would you like to have more or less freebies released on Smashing Magazine? Or you think that SM’s freebies are unnecessary and do not fit to our magazine? Let us know in the poll and in the comments! And please also suggest some freebies you would like to have released via SM! Please notice: multiple choice is possible in the poll and you can also add your own suggestion to the polls. Do you want SM to release freebies in 2009? ( surveys) What freebies should SM release (if any)? ( surveys)
December 15 2008, 10:19am | Comments »
-
I posted to smashingmagazine.com
The Ultimate Collection Of Photoshop Custom Shapes
http://www.smashingmagazine.com/2008/12/11/the-ultimate-collection-of-photoshop-custom-shapes/
By Steven Snell Photoshop users are able to benefit from the vast amount of high-quality resources that are freely available to the community. Brushes get a lot of attention, but custom shapes are also extremely useful in the right situations. Finding a custom shape that has already been created can save you some time and headaches in your design, and fortunately there is a very wide variety of custom shapes available. This post highlights 80 different sets of custom shapes (over 2,500 individual shapes) in several different categories. If you plan to download and use any of these shapes be sure to check to terms and conditions set by the creator of the shapes. 1. People People Silhouettes (306 shapes)
Costumes and Characters Shapes (56 shapes)
Skateboarding (9 shapes)
Skater Collection (3 shapes)
Skateboarders (8 shapes)
Stock Girls (8 shapes)
Businessman Silhouettes (12 shapes)
Business Girls (12 silhouettes)
Jumping People Silhouettes (104 shapes)
Break Dancing (8 shapes)
Hoops (57 shapes)
Presentational Shapes (10 shapes)
Random People Shapes (11 shapes)
People Shape Set (25 shapes)
Hot Babes (7 shapes)
Go-Go Girls (18 shapes)
Sexy Stances (13 shapes)
Ladies (7 shapes)
Sexy Girls (47 shapes)
- Animals Birds (12 shapes)
Butterflies (38 shapes)
Horses (9 shapes)
Horses (15 shapes)
Zebras (6 shapes)
Sea Creatures (27 shapes)
Animals (10 shapes)
Animal Patterns (13 shapes)
Bugs (20 shapes)
Weathered Flying Bugs (21 shapes)
- Planes and Boats Aircraft (21 shapes)
Maritime (27 shapes)
WW2 Planes (13 shapes)
- Guns and Weapons Guns (30 shapes)
Guns (26 shapes)
Ray Guns and Laser Blasters (15 shapes)
I Love Weapons (12 shapes)
- Halloween Shapes Halloween Shapes (23 shapes)
Halloween Shapes (10 shapes)
- Trees Trees (17 shapes)
Dead Trees (24 shapes)
Live Trees (21 shapes)
Plan Trees (20 shapes)
- Circles Retro Circles (10 shapes)
Circles (10 shapes)
Circles, Lines and Sunlights (108 shapes)
- Random Shapes Stars (200 shapes)
Sunbursts (30 shapes)
Splats and Drips (15 shapes)
Splat Shapes (8 shapes)
Stains & Blots (34 shapes)
Drips (25 shapes)
Paisley (24 shapes)
Kiddy Stuffs (72 shapes)
Ribbon Collection (3 shapes)
Voters Collection (2 shapes)
Surfing Themed Shapes (6 shapes)
Hero Shapes (13 shapes)
Flames (5 shapes)
Markers (23 shapes)
Vector Shapes (13 shapes)
Arrows (10 shapes)
Speech Bubble Shapes (42 shapes)
Cartoon Shapes (25 shapes)
Assorted Logos (38 shapes)
CD & DVD Logos (7 shapes)
Foliage Shapes (371 shapes)
Tools (9 shapes)
I Love Skulls (12 shapes)
Urban Shapes (31 shapes)
World Map (3 shapes)
Banner and Scrolls (28 shapes)
Art Supplies (16 shapes)
Skyline Collection (6 shapes)
Arabeski (23 shapes)
- Combination Packs Custom Shapes Pack v. 1.1 (100 shapes)
Custom Shape Pack (45 shapes)
50s Custom Shapes (14 shapes)
Revolution Collection (6 shapes)
Custom Shape Mix (24 shapes)
Vector Shape Mix (50 shapes)
If you’re interested in learning more about the basics of custom shapes, how to load them, and how to create your own, try the following resources.
What are Photoshop Custom Shapes? Loading Custom Shapes Creating Custom Shapes Create Your Own Photoshop Custom Shapes Creating Photoshop Custom Shape Sets
About the Author: Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)
December 11 2008, 8:20pm | Comments »
1 2