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-

Of course you can. Just go through the Google Analytics process as usual. Copy the javascript code snippet that they provide into your custom theme’s markup. (Click “customize” on the dashboard, then “Theme”). The google analytics code snippet goes just above the <body> tag.

Take that tumblarity! Now I can clearly see my literally dozens of site visitors.

Students can be counted on to produce unlimited quantities of high-quality content to fill the holes in your Information Architecture. For some reason, the will be more interested in things like free pizza then monetary remuneration for doing this.

I try to never, ever, under any circumstances resort to hyperbole, so I’ll just say that I’ve heard this plan “a lot” in the short time I’ve worked on Notre Dame’s web projects. It mostly comes from clients, but occasionally the idea that students represent a vast, untapped resource of fresh, engaging content bubbles up from our own team. I’m guilty of falling back on it myself at times.

It’s easy to see where this myth derives. Our students are millenials. They produce copious amounts of content in the form of online picture galleries and facebook profiles and quizzes that inform them which Crayola Color they are. This content appears impressive because of the sheer volume of it. What we sometimes fail to notice is that 99% of it is useless or of interest to an exceedingly small group of close contacts. Any plan that relies on students to produce an endless stream of high-quality content cheaply is almost by definition doomed to failure. Hell…you may as well replace the word “students” with “anyone” in that last sentence. It’s just as accurate.

University web content staff should do their best not to fall into this trap. Too often, “We’ll buy the students free Papa John’s and get them to produce videos that we’ll show like YouTube. Everyone loves YouTube,” represents a flimsy bridge that we use to get over the task of actually sitting down and putting together the content that the site requires. This could because it’s too daunting, because we’re just not capable of producing it, because we don’t have any new or fresh ideas, or because we’re just lazy, but I would suggest that the actual problem is Content Overthink.

Content Overthink is a symptom of the larger problem “Overestimating Your Audience,” which develops when a site’s content is designed with the idea that everyone who visits the site will move through the content linearly, like a book, hitting all of the high points and missing nothing. Once they finish all of the important information, we need to entertain them and give them a reason to come back daily, right? It’s reasonable to assume that a giant bolt-on section of the site containing constantly updated viral student-produced content will attract return visitors and longer page views. There are two problems here: 1) No one uses an informational site for entertainment. 2) Students really aren’t all that reliable. Generally.

Content teams should concentrate on figuring out what is the most important information to their users, organize that information to make it easy to find, and then figure out an engaging, easy to read voice for the content. Whenever you find yourself at the edge of a huge gaping chasm in your content and someone suggests a vague plan to lure students into producing it for you cheaply and on an ongoing basis, consider cutting that section of the site entirely and concentrating your efforts on areas that can return more on the investment in time required to produce them.

Now…just remember, okay…It’s not a love. It’s not a love. It’s not a love song. (Emphatically. It’s not. Dammit!)

The good people at Camp Tannadoonah who always accept everything I say from a design consulting perspective with absolutely no hair pulling, wailing or gnashing of teeth recently directed me to “draw a Polar Bear for a T-shirt design.” Projects like this remind me of why I enjoy being a designer. Whether or not it’s the best single-color vector Polar Bear you’ve ever seen is, in this case, subordinate to the fact that it was really really fun. I can’t wait for these shirts to come out so I can proudly wear one around until I wear holes in it.

The design was done in Illustrator. I built from this pencil sketch:

I generally sketch on a section of a long roll of cheap tracing paper. It takes the pressure off to come up with a perfect sketch because you can always rip of another sheet and trace over it if you mess up. Also the paper kind of carries with it the idea that, under no circumstances are we producing a show piece here. It’s crappy paper, it’s not going to last. That reduces some of the pressure to be an anal perfectionist as well.

I don’t have a scanner so I literally took a snap with my Nikon D40, used Photoshop to convert to grayscale and then used adjustment layers to lighten the image up and bump the contrast a bit. I save files like this out as .tiff when I’m going to be using them in Illustrator. I’m pretty sure I do this because .tiffs end up full resolution when placed in Illustrator. (The truth I do it because that’s how I’ve always done it, but I think that resolution is why i started doing it).

Clearly, the sketch is too detailed (even as loose as it is) to make a good t-shirt. I’m going to be relying on a screen printer to reproduce this, and I’d prefer not to give the poor guy a migraine, so my illustration has to be designed with screen printing in mind. That means no little tiny hair lines, no gradients, etcetera. One ink, big thick lines.

I drew the basic outline shapes with the pen tool and bumped the stroke weight up to thicken them, then drew in the white area of the bear behind the stroke outlines. I expanded the strokes. This is the result in outline preview:

The thick, double outline is the expanded stroke. The rough, jagged line that runs all the way around the bear shape is the white fill area in the background. I can further refine this shape, so that I’m providing one, easy to print vector to my printer though. Ideally, I want to send him one solid white shape with no extra vectors to add complexity. The first step is to use the Pathfinder to merge the ice cube shape and the white background of the bear into one shape. Then I select this newly created white shape and the blue expanded outlines (making sure that the outlines are on top). Use pathfinder one more time to take the expanded outlines and use them to clip the white shape underneath. Below is the result:

Much simpler. Much easier for anyone with a basic knowledge of Illustrator to open and immediately understand. A designer’s life is made so much easier when he isn’t putting unnecessary hurdles in the path of his production vendors. At this point, if you’re really anal (as I am) the one thing that’s left is to use pathfinder to take the eyes and nose and clip them out of our white shape.