Flexible and fun

Ever tried making

Origami

? It's easy if you follow three simple steps:

1.

Pick up paper.

2.

Fold carefully. 

3.

Admire.

With the

Origami

theme, you can choose paper in toned down shades for something mellow or pick bright clean paper to give it some punch. You're the sculptor! So make your website a piece of art.

Origami offers you the ability to create a clean and classy site within minutes. But if you really like customizing the colors and styling of your site, it is quite easy with Origami's use of the Color Picker and built-in theme styles. Here's a quick rundown of variations (below) that are included in this new theme. For more details check out Origami's product page.

Variations offered in Origami:

• Sidebar —

Off, right, left

• Width Variations —

900px, 700px

• Title location —

Right, left, off

• Slogan display —

On, off

• Breadcrumb display —

Off, on (top of site)

• Menu display —

On, off

• Site logo –

Off, right, left

• Accent lines —

Off, on

Color Variations:
Origami

makes extensive use of RapidWeaver's Color Picker, allowing you to easily change the appearance of your entire site with a couple clicks of the mouse. We also provide many built-in color schemes. For more information see the Colors section below.

Origami

has 9 built-in theme styles that make it easy to quickly change the look and feel of your site.

For more details, be sure to have a look at the product page for this theme. You can see an example of Origami in use on our preview site here.

Shiny happy icons

posted by Adam

We've been locked away in the lab recently knocking out another big project for the fine folks over at e-junkie.

Here are a couple of our latest creations that I have cooked up for everyone's favorite distribution service. Click the images below to see them in all of their full-sized glory.

* Please note that all of these icons are the property of e-junkie and are not to be used or distributed without their written consent.

A day of Photoshop goodness

posted by Adam

Liz and I spent Monday at an all-day, Photoshop seminar. It was a quick course of sorts that covered a variety of subjects presented by NAPP (National Association of Photoshop Professionals).

Our instructor, Dave Cross, was exceptional. He was not only knowledgeable, but also had a good sense of humor. Something that I find essential in a speaker.

The day was full of photo adjustment techniques, quick tips, design and much more. Some of what we learned was new, some of it was refresher, but all of it was superb.

What does this mean to you? We like learning new things, and we think you do as well. While we won't be duplicating what we learned at the seminar for you here, as that just wouldn't be fair to the NAPP folks, we hope that some of our newfound knowledge will find its way into our tutorials, as well as other projects that we're working on right now.

If you're a Photoshop user, we highly recommend becoming a NAPP member. It is well worth the money!

Quick Keys in Photoshop

posted by Liz

There are many useful shortcuts in Photoshop. I like using keystrokes to move through my project rather than racing my mouse back and forth. If this sounds like you, check out this list of shortcuts. (Not all shortcuts are useful to everybody, but if there are some that you get into a natural habit of doing, it can save you time.)

1. ⌘J places a selection on a new layer

2. ⌘E merges selected layers

3. Holding Spacebar while drawing a marquee selection moves originating selection point

4. Holding Option while drawing a marquee selection moves it outward from the originating point

5. You can hold down ⌘ and click on a layer to create a selection around it.

6. Press ⌘+Shift+I to select the opposite (inverse) of something. (Sometimes the easiest way to select a complex area is to select the simpler area and reverse the selection.)

7. Use ⌘D to deselect.

8. While using the pen tool, hold ⌘ to temporarily convert it to the direct select tool and manipulate the path handles; release it to switch back.

9. Hold Option and drag layers in the Layers Palette (or in your document) to copy them or hold Option and drag existing layer styles from one layer to another to apply the same drop shadow, etc. to other layers.

10. Hold ⌘ and click on the new layer button in the Layers palette to create a new layer under the currently selected layer.

11. ⌘Z to undo one step, ⌘+Option+Z to undo multiple steps,
⌘+Shift+Z to go forward in case you back up one too many. (The default number of steps you can undo is 20. To increase the number of "undo" steps, go to Photoshop>Preferences>Performance and under "History & Cache," modify the number of History States.)

12. Use the brackets "[" and "]" to lower and increase your brush size. (Works for anything that uses brush sizes: brush, eraser, clone stamp, etc.)

13. ⌘0 fits the document to the screen. ⌘+Option+0 zooms to 100%. (That's zero, not the letter O.)

14. ⌘T gives you the free transform box. Right click or Ctrl + click inside the box to skew, warp, flip, etc.

15. Zoom in with ⌘= and use ⌘- to zoom out. You can also click and drag the zoom tool to magnify a specific area. (The key commands here are especially useful for zooming while you're in free transform and are temporarily locked out of the other tools.)

16. Hit ⌘+Return when you've finished typing some text to exit the text box.

To change the keystrokes connected to each command or to set quick keys to a command that does not have a default combination applied to it, go to Edit>Keyboard Shortcuts and click on the command you want to assign a key combo to. If you choose a combination that's already in use, it will give you the option to switch the shortcut from one operation to another.

Also, most tools have letters applied to them and I'm constantly pressing "V" for the move arrow and so on. Just hover your cursor over a tool to see which letter activates the ones you use most.

One quick tip for the Mac:
Hold down ⌘ and then hit Tab to cycle through your open applications. You can switch to different apps this way or simply Tab over to the one you want and press Q to close it. Release ⌘ when you're done.

What quick keys do you use? Share yours in the comments.

Crate version 2 is here

We're proud to announce an upgrade to our recently released Crate theme...

What's new?

We've upgraded Crate and added a whole lot of new features, as well as made the theme more visually pleasing and compatible with Internet Explorer 6. So what exactly is new or upgraded?

Backgrounds

• Crate now offers 14 new backgrounds, including the class Crate wood background. Previously this was not possible due to the limitations of Internet Explorer 6. Thanks to goes out to Adam Merrifield for his suggestion of using a couple of javascript libraries to make the transparency of the theme and the multiple backgrounds work IE 6.

Title bar

• In addition to great new backgrounds and increased compatibility in Internet Explorer 6, we've updated and added to the title bar variations. It is now possible to have a semi transparent title bar as well as to affix it to the top of the site.

Customization

• With these new background options it is possible to really customize your site. If you're adventurous and don't mind getting your hands dirty, you can open up the theme and replace the images within the theme with your own.

To open up your theme you need to open the theme drawer in RapidWeaver and richt-click, or ctrl-click, on your theme in the drawer. This will open a pop-up menu. From the menu select 'Show Contents.' The background images and associated CSS files are found here. The background images are in the 'Images' folder in a folder title, appropriately, 'backgrounds.' If you're really adventurous, the related CSS files can be found in the 'CSS' folder in a folder titled 'background.' Be warned, you're on your own past this point. ;-)

We hope you enjoy the new upgrade. All of our customers who have already purchased the Crate theme will be receiving a free upgrade via e-mail. If you have not received it within the next 24 hours, contact us with your original receipt or download link and we will get that sorted out for you.

Upgrading

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.

The Pen is Mightier

posted by Liz

The Pen Tool. It's one of the hardest tools you will learn in either Photoshop or Illustrator. An important one to know, but hard to explain.

Let's start with a simple exercise.

The images below were created in Illustrator for easier viewing. All of the techniques I'm going to go over work exactly the same in Photoshop, so if you're using Photoshop, I recommend setting the Pen tool to Paths before starting.

Making a line (As far as I know, you can only do this in Illustrator; you have to use the line tool or a brush in Photoshop.)



Click somewhere in the document and then click somewhere else. Ta-da! If you want to make a line that's perfectly vertical or horizontal, hold down Shift while clicking the second anchor point.

Now let's try tracing a basic Bezier curve to get the hang of things.

Making a curve
Save this image to your desktop and use it as a template if you'd like.


Drag a horizontal guide down from the ruler to form the base of your curve. With the Pen tool selected, choose a starting point somewhere on the guide, click and drag upward. Hold Shift to maintain a precise vertical line. Release the mouse just above the top of the curve if you're tracing my template. Otherwise, just drag the handle up a little ways and let go. This handle will tell your line to start by going up.



Now click on the guide somewhere a little to the right or left and drag downwards. This second handle tells the line to end by going down. It should now match the original template. Again, holding Shift helps.



If you didn't get it exactly right on the first try (and don't worry, nobody does), take the Direct Selection Tool, or white arrow, and click on your curve. (Click and hold the Path Selection Tool button to reveal the white arrow underneath.) It will show your two anchor points and the handles that extend out from them. You can grab and move either of the anchor points if you didn't place them correctly or grab the tips of the handles and fine tune the curve.

Now, let's add on.

Adding more line segments

Method #1: Draw a new curve identical to the first one for practice. Now imagine that the anchor point you just finished your first curve with is also the starting point for your next curve. Choose a spot a little farther along your guide (I'm going to the right), click again and drag upward. Curve number 2 completed!



So this is all I need to know, right?

Well, it works great if you're tracing an image from a photo or a sketch because it's fast and it ensures that your line segments flow together smoothly. I would recommend this method for certain projects. But a lot of times, you'll run into problems if you do it this way. Why is that? Think about it like this:

What if you wanted to attach a second upward curve to the first one instead of the downward one we just did? Start with your original curve again, but this time click to the right of it and drag downward instead of up. Did you get something like this?



That's because this new curve doesn't have two anchor points of its own. It's using the second anchor point from your first curve and the one you just added. Let's break it down. You told your first curve to start by going UP and end by going DOWN. But your didn't give your second curve a new starting direction. You just added onto the last DOWN handle with another DOWN handle. Of course the results were different.

The other problem with this method is that when you finish drawing your path and try to go back with the Direct Selection Tool to fine tune it, you'll realize that you can't adjust specific areas because all the line segments are sharing the same handles. If you try to adjust one line segment, the one next to it changes too, whether you like it or not.

Method #2: To set fresh handles for each new line segment, hold down Option (Alt) and click on your most recent anchor point (the one you ended the first curve with). Now you can drag your mouse in whatever direction you want your next segment to flow because you're giving it a new starting handle.

Create a new curve to practice with. This time when you make the second curve, hold Option, click on the bottom right anchor point of your original curve and drag UP. Release Option, click a little farther down the guide and drag DOWN to create a second, downward-facing curve.



You'll notice that now you can take the Direct Selection tool and adjust the handles on the each curve separately. Click on the segment you want to adjust and it'll pop up the two handles controlling that line.

I will say that the extra control this second method gives you means more work. Now you're responsible for making sure all the line segments blend smoothly together because they won't do it automatically anymore. The key to getting this right is to draw the first handle of each new segment in approximately the same direction as the second handle of the one before it.

It's important to practice so you can figure out how close together or far apart you need your anchor points to be in order to get a precise outline. Farther apart means getting it done faster, but usually, closer together means a more exact tracing.

The Pen tool has more complex features, but this is a start.

One important thing to note if you're using the Pen tool in Photoshop is the toolbar at the top. If you want to draw a shape, stick with the default setting Shape Layers. But if you're trying to outline something in a photo to cut it out, use the Paths setting. Then go to the Paths palette and click on the Load Path as a Selection button at the bottom. (I recommend feathering your selection by 1 or 2 px, depending on your image size, before cutting it out to avoid hard edges.)

Pen tool using Paths in Photoshop. Notice the two handles on this line segment and how they guide the curve around the neck of the swan.


The Shape Layers setting is not good for outlining because it fills in as you draw and covers your image. Still, look again at the handles and see how they guide my line segment.


Hopefully that was in-depth enough to get you started. My final tip is to always zoom in. I think I traced this swan image at about 300%.

Thank you to Markus for requesting this tutorial! If anyone has further questions about this or about anything else, let me know in the comments.

Milestone approaching

Our Chameleon theme is quickly approaching a sales milestone, and to celebrate we will be offering a discount on both Chameleon and our Bundle Package, which includes Chameleon, this week.

You will get 50% off of Chameleon, or $5 off of our Bundle Package through this coming Sunday (October 7, 2007). Simply use the discount code CELEBRATE during the checkout process in the shopping cart window.

Thank you all for making Chameleon one of our all-time, best selling themes.