A recent conversation:

Me (desperately trying to learn the nuances of HTML/CSS in order to fit in with the Kewl Kidz of my personal metaphorical high school. I call it oAk High.): “So…what if I want to put two borders on one of my images with CSS? Can I do that.?”

Steve (a.k.a. Ordered List): “Yeah. Give it a background color, padding and an outline.”

So that’s what I’ve done below.

I hooked this image with class “doubleborder” and then in my style sheet specified the following declaration:

img.doubleborder { border: 1px solid #000; background-color: #dbaea8; padding: 5px; }

This works because the padding reveals five pixels of the background color while the border declaration rings the entire image with one pixel of solid black. Nothing particularly brain busting here, and clearly, I’m not covering anything that hasn’t been discovered and discussed exhaustively elsewhere…but to a designer learning to code, this is cool stuff.

Because I’m an adventurous sort, I wasn’t content to rest on my laurels with this, and I got to thinking that, theoretically, instead of declaring a background color I could just as easily declare a background image and draw some of the ATCO color scheme in to the border area. Assuming I were to use the graphic that is the declared background image of the sidebar, the effect looks like this:

The CSS declaration here reads as follows:

img.doubleborder_alternate { border: 1px solid #000; background: #f8f8f8 url(/wp-content/themes/atimcalledoak/images/sidebarbackcolors.jpg) no-repeat top left; padding: 5px; }

Mocking this up in Photoshop

Until Photoshop allows us to specify a background image instead of a color or gradient for a stroke in Layer Styles (How ’bout it, interwebs? Is this possible?), the second concept would still have to be mocked-up by hand (although the black outline can still be applied with Layer Styles as described below). The first image, with the solid color background can be done very quickly and easily with Layer Styles. The explanation is below.

Layer Styles

These are sets of controls that are accessible through the button bar in the Layers panel panel that looks like an italic “fx” (see image below). Probably the quickest, easiest, most basic Layer Style with which most people are intuitively familiar is the Drop Shadow.

In my example image, the Layer Style button is grayed out because I am working with a flattened JPEG, and the background layer (which is the only layer in the file) is locked. To unlock it I’d simply double click the Background Layer and set it as Layer 0, at which point the Layer Styles button would become available.

Copy and Paste: The Coolest Part of Layer Styles

Once a layer is styled in Photoshop, those settings not only remain fully customizable, the entire group of settings can be copied and pasted to other layers and reapplied exactly as they appear on the original layer. This means, that when we finish with our border effect in the PS mock-up, applying it to other images is as easy as right clicking on the layer, selecting “Copy Layer Style,” then right clicking on the target layer and selecting “Paste Layer Style.”

The ability to copy and paste layer styles makes me think back to all of the hand drawn effects that I used to put together in a previous life, meticulously selecting, expanding, creating new layers, filling with color…etcetera…then redoing it on all other images. Using layer styles allows you to get on with more important things

So…How do we replicate the double border CSS effect in Photoshop using Layer Styles?

As a reminder, here’s what we want our image to look like in photoshop using CSS:

In an actual mock-up, I’d bring this image into Photoshop by using the rectangular marquee tool to draw the shape in the mock-up that I want the image to take up. I then Select All (Cmd+A) in the image file, and Copy (Cmd+V). In the mock-up file, I create a new layer and, with my selection still active, I select “past into” from the Edit menu (Shift+Cmd+V). This pastes the content of my image in a new layer and automatically uses the selection I indicated with the rectangular marquee to create a mask around the image. Then I just resize the image using Cmd+T until I’m satisfied with the crop. The image in place would look something like this:

Applying the black outline is pretty straight forward. Click the layer styles button (”fx”) at the bottom of the Layers panel, and select “Stroke” from the pull-down menu. The stroke settings will appear. The sidebar represents all of the other settings that we can change for this layer. Any or all of these settings can be applied at the same time. (we’ll get to this in a second).

Set the color to black (#000000), the size to “1 px” and the position to “inside.” It’s important to set the position to “inside,” because if the stroke is applied to the outside of the image, it will curl around the corners forming a sloppy looking rounded cornerish kind of thing. We don’t want that. Use “inside” for this setting.

Next we want to apply the inner stroke, on the image (the salmony kind of color in my sample image above). You can’t apply multiple strokes to a layer using styles. What you can do is apply a stroke and an Inner Glow or Inner Shadow to replicate the same effect. The secret is the “Choke” and “Range” settings, which allow you to specify the degree of fade on the effect, or turn it off entirely to get a solid edge.

From the sidebar, select “Inner Glow.” Change the color to #dbaea8. We want to get rid of any transparency, so set Opacity to 100% and make sure Blend Mode is set to “Normal.” Set Choke to “0%” and Range to 1% (which is the lowest setting for Range). Then set the Size to whatever thickness you want for your inner stroke. I’ve used 5 px. This is what my settings look like:

Click “Okay.” Here’s what our layer looks like with the Stroke and Inner Glow applied:

Both of these effects are now contained in the settings for the layer styles as noted by the arrows in the image above. I can turn these effects off one at a time or both at the same time using the Eye icons. I can also double click either of the effects to adjust the settings if I want to, for example, change the colors of the borders or increase the thickness. Finally and probably most importantly, I can right click on the layer styles and select “Copy Layer Style” from the pull down menu that appears, and then Paste all of these settings onto any other layer of my document, or any other layer in another open document without having to manually reset all the settings by hand.

What I Don’t Know How To Do…

It seems like there should be a way to make these settings global across all pasted instances of the same Layer Style so that a change to one is automatically applied to the rest, but I’m not sure how to do this, or even if it’s possible. If so, please comment on this post and let me know, I’d love to figure out if this can be done.

Post questions in the comments, I’ll try to answer them as best I can.

-oAk-

Praise the lord and sound the trumpets…I finally got around to googling one of my most consistent vexations in InDesign: the dreaded “WTF black box around the placed URL from the client’s Word document.” An Example:

Without having done any research, I assumed this was just an artifact of placed text and tried to ignore it to the extent I could ignore something so glaringly wrong. Turns out, this is an indication of hypertext as far as InDesign is concerned. To lose these boxes you need to use the “Hyperlinks” panel (Window>Interactive>Hyperlinks). Highlight the text with the box around it and drag the corresponding hyperlink item in the Hyperlinks Window to the trash. It’s easy as that.

This post answered this question for me. So J.J., whoever and wherever you are, a tip of that hat and a beer in your honor. Thanks.

-oAk-

Flickr’s Commons is an astonishing repository of cool public domain imagery from such collections as the Smithsonian Institute and the Library of Congress. It’s stated goals (according to the FAQ):

• To increase access to publicly-held photography collections, and
• To provide a way for the general public to contribute information and knowledge. (Then watch what happens when they do!)

Recently I needed an image of Charles Darwin and came across this photo:

Now, I know jack squat about Charles Darwin, so this particular member of the general public can’t do much in the way of adding information and knowledge to this photo. What I am capable of doing, however is removing all those weird black spots and boosting the contrast a bit on the image:

I then reposted this image in my own flickr stream and left a comment on the original with a link back. Nothing has changed at the Smithsonian’s original file.

This seems to me to be a really good way to leave the Flickr Commons better than you found it. If you see an image in need of some retouching, why not clean it up and repost it? Especially if you find another use for it.

At the very least, It’s good retouching practice.

Appendix: I’m not a legal scholar so if I’m breaking several thousand ordinances against Good Samaritan Photoshopping, I’m sure I’ll hear about it soon enough at which point I’ll pull this post and sheepishly explain myself elsewhere on this blog, although I fail to see why anyone who object to crowd-sourced photo retouching. If I’m missing something, I pre-apologize.

-oAk-

I used to hate the Mighty Mouse until I started using one regularly. (Don’t laugh…I questioned the relevance of Twitter at first too). I have a hard time using a computer without one now, and Expose document switching within an application is a big reason why.

If you use a Mighty Mouse regularly, consider setting the center button to invoke Expose’s application controls. You can get to this by:

• Going to the System Preferences and clicking on Keyboard & Mouse.
• Click on the Mouse Tab.
• Select “Expose - App Windows” from the pull down menu on whatever button you want to set it to. (I use the center button a.k.a.: “clicking the scroll wheel”).

Once Expose is enabled, clicking the center button will make all of the active windows in your application fly out across the screen enabling quick selection of the file that you want. I’ve found this extraordinarily convenient when using Photoshop with multiple images open.

It’s also really handy when copying and pasting elements between different active InDesign documents: Cmd+C to Copy, click the center button to switch documents and then Cmd+V to Paste.

Please add the following to my Photoshop Wish Listâ„¢.

When I have multiple layers selected, let me right click on one of them and select “Group Layers,” prompting photoshop to create a brand new layer group and move all of the layers that I currently have selected into this new layer group. I also want this process to preserve the layer order among the selected layers. Additionally, I would like this new layer group to create itself in the layer structure in the same position as the layer I originally right clicked on, two sentences ago.

(If you’ve already taken care of this in Photoshop CS4, then disregard. I don’t have CS4 yet, which reminds me…if you want to bring me a copy of Creative Suite CS4 Design Premium, that would be great!)

What d’ya say, Adobe Santa?

Enjoy the milk and cookies.

Sincerly, 

oAk