Search
Sponsored Links

Twitter
Facebook

Monday
Jun042012

Photoshop Nugget: Copy Color's Hex Code

The Eyedropper tool’s contextual menuIf you’re a designer or developer, Photoshop is probably one of the cornerstone tools in your toolbox, but even if you use it every day, chances are there are a few tricks that may have slipped under your radar. For example, back in Photoshop CS4, the Eyedropper tool was given a new contextual menu item that allowed you to copy the selected color’s HTML value to your clipboard, in the format color=”#7d7e82”. In CS5, we gained the ability to copy just the color’s hex code to the clipboard, like so: 5a6e6f. So now, to quickly get colors from a mockup in Photoshop over to your code, simply choose the format that works best for you, hop over to your editing tool of choice and hit Cmd/Ctrl-V, et voila.

Wednesday
Aug312011

Photoshop Nugget: Kill the “Copy”

Here’s a Photoshop quickie: ever notice how when you duplicate a layer in Photoshop, it appends the text “copy” to the end of the duplicated layer’s name? And when you do that a couple of times, soon you have a Layers Panel full of “Layer 2 copy 12”, and it’s really sloppy looking? Well, I hate that. Luckily, as of CS5, Photoshop includes an option to turn that off.

Layers Panel Options
Uploaded with Skitch!

 

In Photoshop, click on the triangle menu at the top right of the Layers Panel. Towards the bottom, select Panel Options, and from the resulting dialog box, deselect the checkbox labeled “Add “copy” to Copied Layers and Groups. Tah-dah.

 

Wednesday
Oct282009

Faux Tilt-Shift Tutorial

Faux Tilt-Shift Effect from Simon Abrams on Vimeo.

I cooked up this little tutorial to demo how to make that very cool tilt-shift effect that’s quite popular these days, using the Lens Blur filter in Photoshop.
Monday
Aug032009

How Photoshop CS4 Saved the Day

When I first learned about Photoshop’s ability to import and edit video files (introduced in CS3), I had the same initial reaction as most people that I tell about this feature: “That’s cool, but why would you want to?” After all, Photoshop is for photos; it’s the premier image editing software, not the premier video editing software – that’s what After Effects is for, right?

I deal mostly in Flash and in photography, so I filed this nugget of information far away in the back of my mind. It wasn’t long before I was presented with a challenge that this feature solved handily. I was at work (at Deutsch, my 9-to-5), when a producer came up to me in a panic. Apparently, some copy in an intro video for a site we were building for Alzheimer’s sufferers and their caregivers needed to be edited, but we didn’t have the source After Effects files in-house (the video was produced by a motion graphics firm), and even if we did, we didn’t have an AE guru on hand to make the changes.

Photoshop made short work of editing the text on this video file

I was about to tell the already distraught producer that being an After Effects neophyte, I couldn’t help her, when I remembered Photoshop CS4. I opened the video file in Photoshop, and after copying  a clean section of the background texture onto a new layer, inserting a few keyframes and new text layers here and there, I had the finished, re-exported video file done in less than an hour. The producer was happy, money and time were saved, and the site is now live at exelonpatch.com.

It was all incredibly easy, and I’ll give a more detailed walkthrough of exactly how I did this in a future tutorial.

Thursday
Jul162009

Super-Handy Photoshop Action

So I’m feeling pretty pleased with myself - I just cooked up quite possibly the simplest, most obvious Photoshop action for myself — and now I’ll share it with you.

How many times have you wanted to put guides at the precise horizontal and vertical centers of your Photoshop document? There are a couple of ways you could go about this. One of the slickest is to select New Guide from the View menu, and enter the pixel location of the guides numerically. That’s great if you’re a math whiz (which I’m not), or handy with a calculator (which I am).

The next best way is to enter the values as a percentage - to place the guides in the center of your document, enter “50%” in the numerical text field and the guide will be dropped precisely at the halfway mark of your image. Do this twice - once for a horizontal guide, and again for a vertical guide, and you’re all set.

To make this even more streamlined, I had the lightbulb moment of making an action of that, which you could optionally assign a keyboard shortcut to for the ultimate in speedy guide-making.

[Update: Whoops - this action has a glitch - I need to figure that one out, and I’ll re-post it. Stay tuned…]

Because I love you, I’ve already saved out this action, which you can download here.

Bonus: Included in this set of actions are two other actions I use frequently when working with Flash. The first one duplicates the selected layer(s) or layer set(s) into a new document, and trims away all of the transparent background. This is my preferred way of importing bitmap elements from Photoshop into Flash.

The second action is a variation of this, the only difference being that it doesn’t trim the document. This leaves you with a new document that’s exactly the same pixel size as the original file.