Crate upgrades in the works

While we have a lot of stuff going on in the ol' elixir labs right now when it comes to custom projects and other theme designs, we wanted to let you know that we will be working on an upgrade to the recently released Crate theme.

Let me be clear, this is not a bug fix release, but instead an upgrade which will add more features to the theme. The largest of the features will end up allowing you to have a variety of different backgrounds for your site. It will also add transparency to your site in IE 6. Yes, you heard that right. In IE6. So those background will not be limited to the classy wood background in IE 6 any longer.

There is no release date for this upgrade, but we wanted to keep you in the loop and know that it will be coming eventually. So, don't e-mail quite yet wondering where it is or when it will be here. We'll post to the blog here and in the Realmac Software support forums when it is done and ready.

The upgrade will be free to all who have already purchased Crate.

Making a Selection

posted by Liz

I thought I'd go over some "beginner" stuff because not everyone who visits this site is a Photoshop expert and even those of us who are more experienced sometimes miss things along the way. One of the most essential skills, as a designer, is to be able to cleanly cut objects out of your stock/source photos.

These are my 5 favorite ways to make a selection in Photoshop, starting from simplest to most complex.

1. Marquee Selection Tools
Pretty basic. More for making something like, say, a glossy button than cutting a shape out of a photo. The Elliptical and Rectangular Marquee tools are the quickest, easiest ways to make a selection. Click and drag. By holding down Shift to add to your selection, or Option to subtract from it, you can make complex selection shapes using even these basic tools.

2. The Magic Wand
The Magic Wand is a wonderful time-saver when cutting something out of a document with high contrast because it makes selections based on color.

Hold down Shift and keep clicking around until your selection is complete. If you accidentally include something you didn't want, hit Command+Z or hold down Option instead of Shift to deselect an area.

Tip: Raise or lower the Tolerance value in the top toolbar to increase or decrease your color range. This will allow you to accept or exclude more colors and get a better selection for your document.

Magic Wand


3. The Lasso Tools
Here we've got the Lasso, the Polygonal Lasso and the Magnetic Lasso tools. The Lasso tool is not for the artist with the shaky hand, but it makes a quick, though rough, selection. The Polygonal Lasso tool is one of Adam's favorites because it lets you just happily click around your shape bit by bit and you can be as specific or non-specific as you want.

The Magnetic Lasso tool is similar to the Wand Tool in that you will get the best results if the object you are selecting is in high contrast to the background. Meaning, don't use the Magnetic Lasso to cut a strawberry out of a pile of strawberries. But it can work wonders with a strawberry on a white background.

Magnetic Lasso Tool


If it isn't making anchor points quickly enough or in the right spots, you can make your own manually by clicking your mouse as you go along.

Tip: Hitting Delete will back up one anchor point on either the polygonal or magnetic lasso tool. Escape will exit the selection entirely. Also, make sure you fine tune your lasso tools to the document you're working on. Don't assume the default settings will always do the best job.

4. Quick Mask
Quick Mask is good for a document that doesn't have high contrast. Put the document in Quick Mask mode either by pressing Q or clicking on the button at the bottom of your toolbar.



This mode reverts you to the default black and white. All you have to do is paint with a brush in black around the shape you want to select. Switch to white to erase if you accidentally cross over and mask part of your object. Change your brush type and size to your needs.

The default mode for quick mask is to show the areas you are masking in 50% red. You can double-click on the Quick Mask button to change this. If you change the setting to show selected areas instead of masked areas, you'll want to paint over the object you're cutting out instead of the background.

Tip: I've discovered that you can use the Move Tool in Quick Mask Mode by clicking and dragging from one of the corners of your document. The arrow will act as a sort of crosshair and you can quickly eliminate a chunk of the background.

Brushing in Quick Mask Mode


To see your selection at any time, simply exit Quick Mask mode and it will show you what you've selected.

5. Pen Tool
The Pen tool is one of the most difficult tools to grasp, but it's extremely handy in both Photoshop and Illustrator. This is my personal favorite because I'm sort-of-a-little-bit anal retentive and, for me, this method is as precise as it gets.

You draw using Bezier Curves, which can be complicated if you're not used to it. Make sure you change the default Pen setting at the top from Shape Layers to Paths, otherwise you'll simply draw a shape over your object rather than creating a path around it.

Setting the Pen Tool to Paths


Without getting too complicated...

If you click the Pen tool in one spot and then click in another, it will draw a straight line between the two points. If you want a perfectly horizontal or vertical line, hold down Shift when clicking the second anchor point.

If you click and drag the Pen tool, you'll create a directional handle that shows you which direction your curve will flow. Click and drag in a new spot to complete the curve. Practice will show you how to be more precise with this tool, but the best part of this is that you can go back with the Direct Selection tool to relocate the anchor points and also toggle the handles to adjust the shapes of the curves you've created, so you really don't have to be that good at it. (If anyone is interested in going into more detail with the Pen tool, let me know.)

Drawing a Bezier Curve


After you've made your first curve, hold down Option, click on the anchor point you left off with and drag it to create a fresh directional point. Release Option and click and drag a little ways ahead to complete your second segment. Continue outlining your object. To close the path, connect the last segment to the beginning anchor point. You'll see an open circle appear over it, which indicates that you're closing the path.

To turn your path into a selection, go to the Paths palette and click the Load Path as a Selection button.

Tip: Once you've finished drawing the path, if you feel that you didn't make enough anchor points to really hug your object, look under the Pen tool in the toolbar for the Add Anchor Point tool. Simply click on the path to create an anchor point. Use the Delete Anchor Point tool to get rid of extra points.

Bonus Tips:
* Always zoom in to create a more precise selection.
* Once you've made a selection, it's sometimes a good idea to feather it (Select>Modify>Feather) by at least 1 or 2 pixels to avoid a hard edge to your cutout.
* A quick trick for setting this selected object on its own layer is Command+J.

This is not an exclusive list. You can also select things using Extract (which I dislike with a vengeance), Paths or even Channels. However, using Channels is complicated and will require a tutorial all to itself.

Your shipment has come in

We're proud to introduce our latest theme — Crate

Crate is one our most visually appealing RapidWeaver themes, to date. It provides a slick, web 2.0 look with clean stylings. It is great for small businesses, blogs, personal sites, portfolios and much more.

Overview

Here is a quick list of some of the options found in the Crate theme.

• 2 Sidebar variations
• 2 Title variations
• 4 Title bar variations
• 2 Blog tag variations
• 2 Font style variations
• 4 Blog title decoration variations
• 2 Blog archive variations

Crate works exclusively with RapidWeaver 3.6 and above and includes the use of the new Color picker and Theme Styles.

Plays well with IE

Crate is designed to have a slick, transparent look to it in places. Unfortunately Internet Explorer 6 does not usually play well with there transparent images. We have worked much of this out in Crate. Where possible we've simulated the transparency for IE6. We have also put in place some code workarounds. And where neither of those two options were available we've replaced the transparent area for a solid version that shows up for only IE6 visitors.

Learn more

Check out Crate's product page to see, in detail, what it offers.

Desktop goodness

We've also add Crate inspired wallpaper to the desktops section of the site.

Woodgrain in Photoshop

posted by Liz

Woodgrain effects can look awful and outdated when they're done badly, but this filtering method may help you achieve a clean, modern style.

Step 1: Choose your foreground and background colors. You'll want two contrasting brown shades that will blend smoothly. Don't be afraid to try dark reddish browns or light yellowish browns for more striking results. For my example, I used #A46A45 and #73462A.

Step 2: Go to Filter>Render>Clouds. The clouds will be built based on the colors you just chose, so you can already tell by this step whether you've chosen colors that will work well together. If not, go back and adjust them before moving to step 3.



Step 3: Go to Filter>Noise>Add Noise and choose your settings. Mine are pictured below. The only one I'll "set in stone," so to speak, is the Monochromatic option. If you don't check that box, you'll end up with multi-colored noise, which won't look right at all. Other than that, modify as you please. (A higher amount yields a bolder, more contrasted grain; a lower amount yields a softer, blended grain.)



Step 4: Go to Filter>Blur>Motion Blur. I generally set my blur at the highest possible setting, with the slider all the way to the right. Don't forget to set the direction of the grain. Here's the outcome of the settings I used:



Bonus
I'm sure everyone knows how to use any color or pattern as a background, but in case you haven't done this before, I'll show you how to mask it inside a shape or type.

All you have to do is place the woodgrain layer above the layer of the shape you want to apply the woodgrain to and use Command+Option+G or go to the drop-down menu in the top right corner of the Layers palette and select Create Clipping Mask.



Your shape should now be filled with the woodgrain.



I want to add a thank you to the people who have encouraged me to continue making these tutorials and to consider a secondary platform for them. I hope to be able to do something with these in the near future. I'll keep you posted.

Where's the nearest Apple store?!

posted by Liz

If you were one of those reckless early iPhone buyers, *cough*, you'll want to check out this letter from our friend Steve. It seems that not only a few people felt a little miffed at spending $599 on a phone that now costs $200 less only two months after its release. I wasn't one of those who complained, but I will say I'm impressed with Apple's response. Every few weeks I go on a rant about cell phone and insurance companies and express my despair with the decline of customer hassle ... I mean service.

$100 store credit to all early iPhone owners! Can we say shopping spree? I'm eyeing one of those new keyboards...

Glossy Buttons

posted by Liz

This tutorial was requested by Maghoo and I hope that others of you will find it helpful. Here are three of the many, many ways to make glossy buttons. First one is the easiest way I know. The second two are a little more complicated.

Method 1

Step 1: Choose your button color and draw either a rectangle or a rounded rectangle.

Step 2: Now draw a white rounded rectangle (regardless of your first shape) over the top of your button like this.

Step 3: Go to Layer>Rasterize>Shape to rasterize the top white rectangle.

Step 4: Hold down the Command button and click on the thumbnail on your original button layer to create a selection around it. Make sure you are still on the white rectangle layer. Select the inverse either by pressing Command+Shift+I or going to Select>Inverse.

Step 5: Press Delete to trim off the excess. Deselect with either Command+D or Select>Deselect. Lower the opacity to around 20% or 30%.

Method 2

Step 1: Draw your button shape. (You can draw this one in the default black because we're going to add layer styles to customize it.) My layer is named "Button."

Step 2: Go to the Layer Style button at the bottom of the Layers pallet (the FX button) and select Gradient Overlay. In this window, click on the gradient bar in the middle to bring up the Gradient Editor. Now we'll modify the color of the gradient using the color stops.

Double-click on the two color stop sliders (circled in red) to select a color for each. For my button, I've used #FDA553 for the light orange and #CA5C19 for the dark orange. It's not pictured here, but I've also pulled the Color Midpoint (the diamond in the center of the gradient toolbar) to the right to 65%. Click OK to close the Gradient Editor.

Tip: When drawing the gradient, remember this: Top to Bottom = Dark to Light. You want the lighter color to be on the bottom of your button.

Step 3: While you're in the Layer Style box, you may want to go ahead and add a Drop Shadow. Generally the default works fine, but customize it as you want.

Click OK. This is what mine looks like now:

Step 4: Create a new layer and make sure you're now on this layer. Mine is named "Highlight." Select the Elliptical Marquee Tool and draw a selection over your button that looks similar to this:

Step 6: Now fill the selection with white, either using Option+Delete or Edit>Fill.

Step 7: Hold down the Command button and click on the thumbnail of your rectangle on the "Button" layer to create a selection around it. Make sure you're still on the "Highlight" layer. Select the Inverse either by pressing Command+Shift+I or going to Select>Inverse. Hit Delete to trim off the excess part of your highlight. Deselect with Command+D or Select>Deselect.

Step 8: Lower the opacity of your "Highlight" layer until it looks like it's just a bit of light bouncing off your button. Mine is at 30%, but you should adjust it to your colors and preference.

The second example I'm showing here was done exactly the same way. The only things that are different are that I used a rounded rectangle, added a Stroke in the layer style and changed the color of the gradient overlay.

Being able to go back and make changes is one of the greatest benefits of using layer styles. You just have to go to your "Button" layer and double-click on the gradient overlay. It'll pop up the same box you used before and you can change the colors.

For the second button, my gradient colors were #FFFFFF and #DCDCDC, with a stroke of #EBEBEB.

Method 3

I'm not going to go into detail with this one to keep it short. Only a few changes to the last method.

Step 1: Draw another button shape and do a gradient overlay with your custom colors. I'm using #505050 and #1E1E1E. Add a Drop Shadow if you want.

Step 2: Make a new layer and make sure you're on this layer. Use the Rectangular Marquee Tool and drag it over the top two-thirds of your button. Though I would consider this part optional, I like to feather the selection. To do this, go to Select>Modify>Feather. Mine is set at 2 px.

Step 3: Make white the foreground color. With the gradient settings at "White to Transparent" in the top toolbar, draw a linear gradient inside your selection from bottom to top.

Step 4: Repeat Step 7 from Method 2 to trim the excess of the highlight. Then lower the opacity to 25% or whatever works for your design.

The typeface and type color is up to you. You can always get more fancy with the shape of your button highlight by drawing something more customized and applying the same fill, trim and opacity method we covered here. For example, you might recognize this style from your Finder window's buttons.

Hope this helps, Maghoo! And everyone, feel free to request tutorials if there's something you would like me to cover. Either leave a comment or send me an e-mail.

Light upgrade

We have now finished the upgrade for our Light theme and currently are sending out e-mails to all customers who previously purchased this theme. The upgrade adds RapidWeaver 3.6 features such as EXIF data tags for photos, updated blog features, tag cloud support and much more.

We have also included a series of Blocks library items as well as styling for RapidBlog built into the theme.

When you receive your download it will contain two versions of the Light theme. Inside you'll find a version for RapidWeaver 3.6+. We have also included a ZIPed version for RapidWeaver 3.5 for those who have not, or do not want to, upgrade to RapidWeaver 3.6.

If you are upgrading from a previous version of this theme, be sure to first delete the original theme. To do so, right-click (or crtl-click) on the theme in RapidWeaver's theme drawer and select 'Delete' from the popup menu. Please note: Upgrading this theme will remove any modifications you made to the theme previously. So, please be sure to backup your data if necessary.

If you have purchased Light in the past and do not receive an updated download link, please drop us an e-mail via the contact form on our site here and we will get back to you as soon as possible. If requesting an updated download link for the upgrade please cut and paste your original e-junkie e-mail into the contact form message field as well, or send it as an attachment. This will make the process much quicker. If you have any questions, let us know, we're glad to help out.

New Help Desk

posted by Adam

In an effort to provide quicker and better support we've added a Help Desk section to the site. This will not only allow you to have immediate access to help, but will also alleviate some of the support e-mails in order to help us have some extra time to produce more themes and other products and services for everyone.

The Help Desk contains a Frequently Asked Questions page, an improved Videos page, and access to one of the best RapidWeaver resources on the web — the Realmac Software Forums. We will update the FAQ and Videos pages as time goes on in order to better provide you instant help resources. If you fail to have your questions answered through the FAQ, Videos, and Forum, we want to hear from you. Drop us a line using our contact form and we will get back to you as soon as possible, as always.

During this upgrade we've also updated, as well as cleaned up, our Clients and Projects page. So stop by and take a look at some of the many projects we've done for our clients.