Tutorial - Distress imagery in Photoshop

Often times we are called to create imagery that reflects a specified tone or incorporates certain imagery to coincide with other marketing efforts for our clients. Adding a sense of realism to a logo on a wall, or aging a icon on a T-shirt adds that sense of believability that makes your digital work stand out from the rest of the crowd.

This is another technique to add some more life in your digital composites using some good free textures available through a quick Google; Mayang's offers some great shots for free (limited to 20 downloads a day or you can purchase them all for $45) and where I got this background.

Let's add a bit of retro type to a brick wall. Fire up Photoshop and create a new image; I am using 1024X768 pixels. Establish your brick wall and crop accordingly.



Duplicate this background image to a new document. Convert that document to grayscale and save it; we'll use it as a displacement map and a layer mask later in the process.

Now in your original document, add your text to the image. I am working with a great font that really evokes the old time baseball era and as such will use my favorite team as the subject.



Now duplicate this text layer and place it under the original text item. On this duplicate layer, go to Filters > Distort > Displace and adjust your settings to match mine.



After you click OK, a dialogue will come up asking you to locate the displacement file we had created earlier.



Navigate to the file and click Open. The resulting layer should look like this:



The grayscale image has been used to distort you flat graphic, conforming it to the bricks in the image. Using that same grayscale brick image, we will add a layer mask to this text layer and change the Blend Mode to Multiply changing the image to resemble this.



Selecting this new layer mask we created, hold the option key + drag the mask to the initial text layer. Change the original text's Blend Mode to Multiply as well which will result in the image below:



As you can see, this clearly looks better than simply adding a logo to the background image. The text looks weathered and worn and appears to belong in the shot. We can further tweak out the blend modes of the layers as well as add some lighting effects if needed to further enhance the image.



The great thing about Photoshop is the ability to customize every aspect of the image. You could continue to enhance this image to suit any purpose, but this is where this tut will end. I hope these steps are clear and this may help you on a project. As always, however, I am happy to discuss any of your design needs and develop a custom solution for your next design challenge.

Tutorial - Faking 3-D in Photoshop

Within the design industry we are sometimes called upon to make simple things look much better than they actually are…like a make-up artist at the Emmy's (aw c'mon did you watch the show?). One of the tricks that I have learned over the years is adding more depth to elements creates a better sense of reality to the image.

While I was working at Disney, we had to develop numerous events and broadcasts. Without the time to really develop a 3-D model, light it and render out I came up with a simple series of steps in Photoshop to provide more depth to a simple Illustrator logo or icon. These plates always seem to generate a positive response from all of the associated parties.

First, let's start with some text. Once you get these steps down you can import a logo or icon as the base graphic.



Nothing too earth-shattering here, but it is just the start. Now we will add some layer styling to this simple text. I use these settings, but you can certianly experiment depending upon the look you are hoping to achieve.



Using these settings you now have a slightly beveled bit of text. Duplicate this text layer and reduce it by 99% - 99.5% (this will vary by the font used). Repeat duplicating each successive layer a couple of times; I dupe'd it four times and arrived at a file that resembled this:



Now selecting these duplicated layers, shift+command+copy them and past them onto a new layer of their own and turn off the series of duplicated text layers. Selecting this new layer choose save layer and name it silhouette.



While the layer is still selected, go to Filter > Blur > Gaussian Blur. In this dialogue box select a radius of 1 and hit enter. Repeat the blur to achieve a soft blending of the extrusion. When you blur the image you will get a soft fuzziness around the text, this is where the silhouette layer comes into use. Go to Select > Load Layer and select silhouette and save it as a vector mask.



The image looks good enough, but we can still tweak it quite a bit. Let's add some shadows and the requisite reflection. For the reflection, just duplicate the logo and flip it vertically; positioning it beneath the logo to create the reflection. adjust its transparency per your taste. For the shadows, create a layer beneath this layer and name it shadow, then select the silhouette mask again. Fill it with black and go to Edit>Transform>Distort. Manipulate tis layer so it looks like a projected shadow falling from a stage light in front of the logo. When you are satisfied with the positioning apply the transformation. Create another shadow layer for a second softer shadow on the opposite side of the "stage".



These shadows are a bit harsh, so lets soften them up a bit. Drag your cursor across the width of the stage:



Go to Select>Feather and apply a 5 pixel feathering. Then go to Filter>Blur>Gaussian Blur again with a small radius (since we will be applying this a couple of times to the shadow). Move the selection lower on the shadow and repeat the blur. Do this a couple of times until the shadow has a softening depth to it. Repeat for the other shadow and you should have a simple fake 3D logo.



There are a lot of treatments and adjustments you can do to this file to lend an even greater air of realism. Also the whole gamut of filter effects and adjustment layers opens up further possibilities. An extension to this is the ability to create very slick looking chrome text that makes you want to get a custom van and a mullet…well maybe not the mullet.

Having said that, some of these steps can be automated with Photoshop actions and reused in your workflow…that's what I have done. Also you can vary the position of the extrusion so it is not always centered, but you can experiment at your will. I hope these steps are clear and this helps you on a project. As always, I am happy to talk with you about any of your design needs and develop a custom solution for your next design challenge.

Flash 9 Alpha

Adobe Labs has released the Alpha version of Flash 9. You must sign up to have access to downloads, but I would recommend signing up. There are some great options available from this type of pre-release software to their support forums.

I happily installed it and realized immediately that this is truly Alpha software. I am not sure, but I am guessing this is being rewritten in XCode, since some of the functions are not available in this version (i.e. components seem to be non-functioning). The first thing you notice, even before opening the app, is that it now resides in a folder labeled Adobe Flash 9 Public Alpha; a minor detail but something you have to get used to.

I have seen some great examples of AS 3.0 code online and am looking forward to experimenting with the app. Some of the things I am hoping for this new release:
• Better support of HTML/CSS
• More streamlined way of importing layered Photoshop files without third-party plug-ins
• More detailed tutorials, as well as components, dealing with object-oriented programming

Flash is a great tool for developing immersive sites and RIA (rich internet apps) and I would imagine this release will only add to the tools already offered by the new Adobe Flash. I would also imagine that there will be a set of tools, or easier workflow, to produce sites that leapfrog ahead of AJAX/Web 2.0 offerings of today.

Some Open-Source Resources for Design

One of the greatest assets that the internet and its associated online communities is the availability of open source solutions to design problems. Some of these solutions are the ready availability of code examples that can be used in your project(s) to full-scale applications that provide complete solutions for today's designers.

Here are some recent finds for some of the projects I have been working on. JetPhoto is an open-source image management software like iPhoto. Although it is not an iPhoto replacement, it offers a different feature set than Apple's great app. [taken from their site: JetPhoto Studio is a personal digital photo management software to transfer, store, organize, edit, print, and share digital photos. JetPhoto provides easy-to-use tools to help user to efficiently organize digital photos with time, location, keyword tags and notes on your desktop computer. A photo calendar, a tags editor, an EXIF reader and a GPS-driven photo locator are provided in JetPhoto Studio. The software can generate beautiful Flash album movies, slide shows, screen savers, wallpaper with picture collages, or make pocket-size photos and send to cell phones. JetPhoto Studio also enables user to easily fix, crop, resize pictures or add watermarks in batches.]

SlideShowPro is a great application to develop Flash-based slideshows. It costs $20 and is available here. Before it was commercially available it was provided as an open-source project via his blog. My company bought Slideshow Pro for its ease of use and robust feature set, but you may not need such a fully-featured app.

If you would rather not use Flash for your project, there are many options available to you. FlickrShow is a great bit of code that can pull imagery from your flickr account (you are using flickr aren't you?) It is a very easy way to implement a nice slideshow to your site with very little overhead or coding.

There are also some great snippets of codes and easy to follow tuts at DynamicDrive. They provide a great resource to learn new techniques that will help you build your next site or web app. There are many more sites that provide equally rich alternatives for code, design and development of web sites. The great thing is that this community continues to grow and the quality of these open-source solutions only grows. From moo.fx to lightbox and beyond, the design community seems to be flourishing online. There are design forums providing open-source templates and numerous locations to get connected with forums and learn about the latest design movements and techniques. I encourage you to explore, and if you like report back with some of your favorite resources.

As always we are eager to speak with you regarding your web strategy and how our expertise can benefit you on your next project.

iMac, now means intel Mac

I have recently upgraded to a new machine. I got tired of waiting for the latest and greatest, although any announcement made today at WWDC may make me rethink that strategy, and bought a 20" iMac. Developing sites, and other associated creative endeavors, necessitated a faster machine. With Adobe products being a staple of any designer's toolset, I was curious to see if the new machine would be able to run those apps without a serious hit from Rosetta. Some first thoughts on the new set-up:

• Adobe CS2 runs fine. It quits a little more than usual, but it runs fine. I am in the midst of a new project dealing with some large-scale photographs and running PS on the iMac is still significantly faster than my trusty 17" TiPB.

• Macromedia apps seem to run fine, although I only use Dreamweaver and Flash. I have not tried any of the extensions, but rather the standard install of each app.

• The Final Cut Suite package is amazingly snappy on the iMac.

• Shake is a very cool app that I will need extensive time to explore properly. Thankfully I am working on a project that will leverage all of the Apple Pro apps.

• Parallels is a must! It is so convenient to switch to Parallels to review a site and make the necessary modifications for the worst browser in the world - IE.

There is naturally a lot more to testing a machine and determining its value. Ultimately, however, if the new hardware makes more efficient use of time, then it is worthwhile. Per that metric, this new iMac is a raging success. I am sure there will be newer and faster machines announced soon, but if you wait for the faster machine, you will always be waiting.

Web DNA

This is another thing I love about the web. I found this on the RapidWeaver Forums and thought it was an intriguing way to showcase data. Enter the URL you wish to have reviewed and this site will generate a visual representation of your site. It reviews the code and generates the image based on several criteria: H1 is brighter than H2 is brighter than H3, etc., table is brighter than TR which is brighter than TD, DIV layout is brighter than a table layout, and on. A semantically coded site will appear brighter than an invalid page.