Load Selections with Channels in Photoshop
I was working on a project the other day that took advantage of a technique very similar to the one used in the image above, and I realized that I haven’t seen any tutorials online that really explained this process, so I figured I would share it in the case that you’re ever interested in achieving a similar effect. It’s also a chance to go over exactly what channels and load selection can do for you as a designer working in Photoshop.
Channel controls aren’t just for color/plate separation. We can wield the power of channel selection to capture elements of an image—very similar to creating paths—and apply them to our design. This can come in handy when you want to do anything from knocking out a white background from a logo, to creating true monotone images right in a RGB PSD file. The uses are endless. Load Selection, on the other hand, is a slightly more hidden feature, though just as powerful as Channels. You might know Load Selection through the use of paths you’ve created in Photoshop or imported over from Illustrator. Loading a Selection in tandem with a Channel works pretty much the same way. With that said, on to the tutorial.
Continue reading "Load Selections with Channels in Photoshop"
Viget.com gets iPhone-ized
Throughout the year the team here at Viget embarks on numerous internal projects aimed to expand our expertise. With that thought in mind, we just recently designed an built an iPhone-specific site to accommodate the majority of our mobile users. The overall process was an enjoyable one. Here's a glimpse of how the project came together.
Bridging the Gap Between the Print and Web Community
There are three things that I hold dear to my heart: design, the web, and community. Being a web designer who loves participating in both educational and social events, I have noticed a strange divided amongst the web design and traditional design communities. In the DC area, these two very distinct circles seem to rarely mix.
My observations were recently confirmed and discussed in a very public blog post called “Dear AIGA, where are the web designers?” by Jeffery Zeldman which raised a lot of interesting comments. Jeffery’s post specifically addresses the absence of web designers speaking at the AIGA Business and Design Conference:
Continue reading "Bridging the Gap Between the Print and Web Community"
Viget Flash Mob: T-Shirts
Recently, our team set aside some time to make another flash mob happen. If you’re unfamiliar with what that is, take a look back at our first. This time around, we decided to use our 4 hours to whip up some t-shirt designs that reflected some of our “inspirations”. We talked about defining parameters, but bailed quickly on that and decided to leave it wide open. To keep it fun (somebody needs bragging rights), we’re asking that you check out the design concepts and vote on your favorite. We’ll then print up 3 of the winning design and draw randomly from the commenters who respond to this post to see who gets them. If you want to purchase one of these t-shirts in the meantime, we’ve set up a no-commissions Spreadshirt shop where you can grab one. We’ve ordered a couple of test shirts and the quality is nice, although not perfect (it’s what you’d expect from a one-off, digitally printed t-shirt shop). We’re pretty happy with the results, though.
Creating Alpha Gradient Masks in Flash
The major use for a transparent mask in Flash is the alpha gradient. In the following examples, I'm going to show you how to create a gradient mask with either the Flash authoring tool or ActionScript.
Flash Authoring Tool
Start by placing two objects on the stage, one an alpha gradient you want to use as a mask and the object you want to be masked. It is necessary to convert both the mask and object being masked to movieclips so you can apply caching properties to them. Something we are not doing is creating a mask layer and a layer to be masked. A masked layer does not allow for bitmap caching, so we're going to have to do that using ActionScript. On the timeline, enter the following code:
object.mask = mask_mc;
Now, set both the mask and the object to be cached as a bitmap at runtime. If you need to, open up your properties panel by clicking Windows => Properties => Properties. Now, click the "use runtime bitmap caching" box for both your mask and the item being masked.
That's it! Publish your movie and you will see your alpha gradient movieclip masked.
ActionScript
If you just want to use only ActionScript (this way is easier if you are dynamically placing objects onto the stage), you need to set both the alpha gradient mask and the mc being masked cacheAsBitmap property to "true." Using ActionScipt to set the caching is the same as checking "use runtime bitmap caching."
mask_mc.cacheAsBitmap = true; object.cacheAsBitmap = true;
And, just like above, apply your mask to your object.
object.mask = mask_mc;
Why do we need to bother with the "cacheAsBitmap" property anyway?
When you set the "cacheAsBitap" property on a display object to "true," what you are doing is telling the Flash player to cache an internal representation of the vector object as a bitmap. Using bitmaps is much more efficient than using vector. When vector is rendered on the stage, the Flash player will render everything. So, if you have a movieclip with 10,000 vector objects stacked on top of each other, it will render each of those 10,000 objects even if objects are hidden behind other objects. When using bitmaps, you are only rendering what is visible on the stage. So you can see that when working with alpha and gradients, which are already heavy on your CPU, you want to render them as bitmaps.
Overall, bitmaps can increase performance significantly, especially if you are using complex objects, lots of animation, and/or high frame rates. Objects with these aspects require more from your processor because they are redrawn each frame. Higher frame rates mean quicker redrawing. Quicker redrawing of highly complex objects ... wel,l you get the idea. (Then, add that to slower machines, and your animation will slow down and become jerky).
Source files for the above example can be found here.
Behind The Scenes: Working with PBS on Digital TV
(Or: How I Learned To Stop Worrying and Love Constraints)
"Limitations are the soil from which creativity grows."
- Jeffrey Zeldman, 2000
When I heard PBS wanted us to design their educational site about the Digital TV transition, I was a little nervous. After all, this was PBS, the station I grew up watching — the awesome channel that brought Mr. Rogers and antiques and wild zebras and British comedy into my TV long before I had 90+ cable channels to contend with.
PBS represented so much to so many people that I couldn't pin down any solid ideas. For the week before our first meeting, my head was spinning with concepts, none of which quite seemed worthy of the project or the brand.
Continue reading "Behind The Scenes: Working with PBS on Digital TV"
Visual Storytelling on the Web
Designers face many challenges when creating for the modern web. When embarking on a new project, we bounce around words like style, layout, mark-up, usability, visibility, and the flow of content. These elements are crucial to a cohesive online presence, and overlooking any of them would be a mistake. In our process, we sit down and conceptualize solutions that embody all these traits, but yet it’s easy to overlook a key element of design: storytelling.
Recent Comments
@Samantha, I’m not aware of a “find/replace font” function. That essentially would be exactly what we need, which is a type styles feature/palette. It’s indeed unfortunate, and is one...
- Peyton Crump on 'Photoshop Type Time Savers'.
- kaske on 'Photoshop Type Time Savers'.
- kaske on 'Photoshop Type Time Savers'.
Subscribe to Comments RSS