Topic: Tips and Tricks
Background-clip, Text-shadow, & Gradients; Oh My!
I’ve had a couple of designs recently where I have been able to play around with background-clip: text in combination with text-shadow and gradients, and I wanted to share my experience.
Before we get too far, background-clip: text is not supported in all browsers. I believe it is still only supported in Webkit browsers, so make sure you have sufficient fallbacks. The demos on this page will also only show up with all the fanciness in webkit, so I’ll wait for you to switch over.
Okay, ready?
Continue reading "Background-clip, Text-shadow, & Gradients; Oh My!"
7 Simple Photoshop Typography Tips You’re Already Doing, Right?
Just because you can do something in Photoshop doesn't mean you should do it, especially if you're designing web sites in Photoshop. This is most definitely true of how you handle typography in Photoshop. It's always frustrating to painstakingly craft your type, just to find out it's impossible or impractical to use it the way you envisioned in the finished product. Here's a list of little things you can do to ensure that the design you create in Photoshop will and can be perfectly translated into a built-out site. They're mostly common sense, but I know I've been guilty of just about all of them at some point, so hopefully this is a helpful refresher.
Continue reading "7 Simple Photoshop Typography Tips You’re Already Doing, Right?"
JS 201: Run a function when a stylesheet finishes loading
This is the first in a series I’m calling, “JS 201.” It’s not introductory material, but is instead that helpful middle ground between the basics and pretty much anything John Resig writes. Short, practical, typically plain-ol’-JavaScript tips is what you’ll get.
I’m in the middle of working out a new feature for a project that requires JavaScript to append some markup, stylesheets, and scripts to a page. The task is fairly straightforward: JavaScript has native capability to do all of that. I’m looking at you, createElement and appendChild.
I did run into a problem, though. A piece of JavaScript required styles be applied to certain elements before it should execute. Unfortunately, the script was executing while the stylesheet was being loaded. Like most reasonable front-end developers, I figured I’d just run a function when the onload event fired on the link element. It works for images, why not for stylesheets, right? Wrong!
Continue reading "JS 201: Run a function when a stylesheet finishes loading"
Photoshop Masking Tips
The work that I've been doing recently has required quite a bit (read: tons and tons) of masking in Photoshop. While working through the images and trying to improve efficiency along the way, I've picked up a few useful methods that I'd like to share because they've been helpful to me. The intent of this post is not to explain what layer masks are and the very basics of using them. Rather, I am simply wanting to pass along some reflections and techniques that I've picked up from doing a fairly specific type of masking work. Also, for any new Photoshop users, if you aren't currently using layer masks, start now because you're missing out!
I will say as a side note that there are tons of different masking scenarios. It all depends on what you need to mask. In my case, the last couple of weeks have been spent on product images for the big Puma.com launch. This means that for the most part, I'm dealing with clearly defined objects that are on a white background (in some cases with a light gray vignette).
FEDs: What’s In Your Toolbox?
One of the cool things about working at Viget is being around serious power-users all day — people for whom nothing is fast or efficient enough, and who are always scouting new tools that might improve their workflow. Now that I live in Vancouver, it's a little harder to keep track of this stuff, so last month I polled the team to see what unsung apps they're using on a daily basis.
There's some cool stuff in here, so I figured we should throw it up and share with readers. Have a look, then post any cool stuff you've found in the comments!
Internet Explorer, Transparent PNGs, and jQuery Animation: The Black Background Issue Solved
This is an issue I ran into a few months ago. I couldn't find much documentation around this on the interwebs, so I thought I'd post my findings here. Hope this helps a few people out.
I was working on a project where I was animating the opacity and position of transparent 24-bit PNGs with jQuery. Everything was going great until I fired up IE (big surprise). I hadn't thought it would be a problem, since both IE 7 and IE 8 both support PNGs with alpha, but as it turns out, like most things in IE, it's a little buggy.
Everything displayed properly at first, but the second I animated the opacity, this nasty black background/border/fringe junk showed up.
After much googling, one semi-solution I found was to give the image the same background color as your page with CSS. That's all well and good if your image is on a solid background. If you give the image a background color or image, the PNG displays properly on top of it, BUT that background is still opaque, and that pretty much defeats the purpose.
THEN I remembered a RGBa to IE filter converter I had come across (thanks, Michael Bester). So I wondered what would happen if I gave my problem PNGs a transparent background using an -ms-filter background converted from rgba(255,255,255,0). Fully expecting it not to work, I used the converter and tried this:
.item img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE 6 & 7 */
zoom: 1;
}
Kazaam!! Goodbye black, and hello working, animatable transparent PNGs in IE 7 and 8.
You can now use jQuery's fadeIn(), fadeOut(), and animate() on your transparent PNGs in IE 7 and 8 to your heart's content. Hope this saves you some time and frustration down the road.
Seven Typography Shortcuts for Photoshop
I've recently picked up a few new Photoshop shortcuts related to typography so I figured that I'd share them. If you spend a lot of time in the program, you probably have seen most of these, but hopefully there's a new one in here for you. I know I always like finding ways to be more efficient and everyone likes to learn a new trick, right?
Paragraph Size
(with type tool selected) Option + Click. If you know you need a column of text that is a specific number of pixels wide (or tall), this can be a faster solution than using your guides and rulers.
Highlight Text in Layer
Double Click Text Layer Icon. This is one I haven't yet incorporated into my workflow but seems helpful. Double-click the "T" in the layer palette and all the text on that layer will highlight, then make desired changes.
2011