Thursday, December 27, 2007

Ron Shiver

dad


Many of you may have noticed that I have not been around much over the past several days. I apologize if you have tried to get in touch with me, as I have not responded to e-mails, Tweets, etc since Saturday night.

My father unexpectedly passed away Sunday morning. After going to sleep Sunday around midnight, he had two consecutive heart attacks in his sleep. He was only 52.

At approximately 6:45 am on Sunday a Sheriffs Deputy phoned me and told me I needed to get to my parent's house as soon as possible, but would not give me any details. Upon arriving the deputy let me know me father had passed away and then led me into the house where I found my mother in tears. I've never seen my mother or sister cry so hard in my life. The strangest thing is that until I phoned Liz I had been unable to cry. As soon as I actually had to say aloud that he had passed away I began to cry uncontrollably. Almost as if saying those words finally made it true.

Due to the fact that he was young and had no previous health problems the medical examiner was required to do an autopsy. That and the holiday caused us to be unable to make funeral arrangements until Wednesday and for the services to be pushed back until this coming Sunday.

This week has been one of the most horrible experiences of my life, thus far. If not for Liz, and my sister's boyfriend, Patrick, I do not know how we would have made it this far. While there are still tough times ahead I wanted to take a moment to get online and let everyone know why I have been absent, and will be for a while longer.

I will miss my father very much. I already do. He was one of the nicest guys you'd ever want to have met. He had a big heart and a kind soul. He would do anything for you, and if he liked you you were sure to be teased and picked on. The world lost a wonderful man, and an amazing father and husband on December 23, 2007.

Thursday, December 20, 2007

Holiday time

The elixir crew will be taking a short holiday break beginning on Friday. We'll be back and at full-steam come December 28. I will definitely be checking in on support queries between now and the 28th, but the will be a noticeable difference in our response time from normal. I will try to jump on any 'emergency' support problems that might crop up though over the next week.

If you've filed a bug report or problem already, be assured that I am still looking into them and working on them, we just need a little downtime to spend with family and friends.

On our way out of the proverbial door for the holidays I will leave you with these quick updates:

• Our next icon pack currently contains 180 icons, and is still growing.
• We have a new theme that is about midway to completion.
• There are a couple of other 'secret' projects that are in the works that should start cropping up in the first month or so of the new year.

Hope everyone is having a great holiday thus far.

Tuesday, December 18, 2007

A whole new world

posted by Liz



If any of you have some extra cash burning a hole in your pocket after the holidays and are fellow Floridians (or feel like traveling to a warmer climate), you should looking into attending Photoshop World. The seminar is April 2-4, right here in Orlando.

I'll give it to you straight: It's not cheap. But based on the one day Adam and I spent at the Photoshop CS3 Power Tour with Dave Cross, I'm betting this little soiree is more than worth the cost, especially if you run your own business or do much freelance graphics work. You can save $100 on the event if ...

1. You're a NAPP member. (Non-member registration fee includes NAPP membership.)
2. You register before Feb. 29. (That's right, it's a leap year!)

I won't give away all the details. Check it out for yourselves. Or better yet, add it to your Christmas wishlist!

Wednesday, December 12, 2007

Artsy Fartsy

posted by Liz

Okay, I'm trying to get back on the ball with things after moving and getting sick for so long. I've started delving back into some projects I'd put off for a while and thought I'd post a couple of links for you all to check out.

The first is a little history on the color wheel for those of us who are art geeks. The second is for those of us who are ... well ... just plain geeks.

Hope you enjoy!

Tuesday, December 11, 2007

Spread the word

posted by Adam

After you have developed your site with RapidWeaver and populated it with all of your amazing content, how do you get the word out to the rest of the internet?

Well, there's always Google and Yahoo!, which will eventually index your site and allow people to find it via their search engines. But there are other ways to let people know about your site as well.

Website showcases
While website design showcases are great for getting inspired by others' designs and following the trends across the web, they're also very helpful in driving traffic to your website. If your site is chosen for their showcases they can often bring a lot of extra visitors to your site. Some of the most popular website showcases are:

Webcreme
CSSTux
FaveUp
CSSRemix
Light on Dark
Design Meltdown
CSS Container

Also to be mentioned is a newly relaunched RadpiWeaved.com. The site features only RapidWeaver built sites, and also plays host to a blog written and maintained by RapidWeaver users.

3, 2, 1, launch!
Another service that makes it easy to get the word out about your brand-new, RapidWeaver-built site is LaunchFeed. LaunchFeed allows you to submit your newly created site, allowing a plethora of different people to take notice, both on the LaunchFeed site and through RSS feeds.

Leave comments
Most blogs and forums allow you to sign your posts with a signature or some sort. Be sure to include some sort of link to your new site in this signature. Then when you post on various forums, or leave comments on blogs you frequent others have the opportunity to visit your site. This is however not an open invitation to spam these two mediums. Don't post more than your normally would, or chime in with one line posts just in an effort to promote your site. This will do nothing more than alienate you in these venues and discourage people from visiting your new site.

Get some feedback
The Realmac Software forums are a great way to get some help when you're designing your new RapidWeaver-built site. But did you know that the forum is a good way to some attention as well as constructive criticism and comments? The folks over at Realmac Software have setup a critiques and comments forum to allow other RapidWeaver users, experts and novices alike, to check out your site and give you feedback in an effort to help polish your site.

While there are even more ways to publicize your site and get those first visitors, who will hopefully spread the word, these are a few of the easiest ways to get the ball rolling.

Wednesday, December 5, 2007

A nasty virus

posted by Adam

I wanted to take a minute to post and let everyone know that Liz and I have not dropped off the face of the Earth. We actually both got a nasty virus. Of the human, not computer variety. We've had a pretty rough couple of weeks. While we're both still not well, I think we're at least on the mend.

I am in the process of catching up on all of my e-mail. There is a ton of it but I promise to get through it all as quickly as possible.

We've got some really cool things in the works, so bear with us as we medicate and get some rest. Hopefully we'll be back up to full-speed soon!

Friday, November 16, 2007

Cloudy no longer

posted by Adam

I have sent out updates for Cloud customers that fixes a problem in which links would no open in external windows. This bug has been fixed and the moo.fx javascript updated to a newer version. This update only works in RapidWeaver 3.6 and above.

Drop me a line if you have questions or comments or if you do not receive your update via e-mail within the next 24 hours.

Instructions for updating your theme are included in the ReadMe file. Be aware that updating your theme will remove any modifications you've made to the theme.

We need your icon input

posted by Adam

So, as many of you know we're putting together a new set of icons. If you didn't already know you can see our post here on the Realmac Software forum.

In assembling this new icon package we're looking for your input as to the types of icons you would like to see included.

They style has already been decided, and it is one that I think a lot of people will like. I've currently got about 30 icons designed, but, I'm only just beginning. So please be sure to list your thoughts and ideas either here in the comments, or in the above forum thread.

We also think that you will like our new pricing on the icons as well. We will be making it easy and inexpensive for you to obtain amazingly high-quality icons (up to 512 x 512 px).

Along with this new icon pack we have a few new projects that are being assembled. While we're not ready to divulge any details or a release date on these new projects, I think there is a pretty good chance that they will be of use to the RapidWeaver community.

Friday, November 9, 2007

Out of the office

posted by Adam

Aside from a couple small tasks I have to finish up today, I will be out of the office for most of the weekend. I will be helping Liz move into her new apartment, and will most likely be quite exhausted. Also it seems that we double booked ourselves this weekend in that we bought Magic tickets during the summer and forgot that on the main moving day we have a Magic game that night. Needless to say I will be shot and in no shape to answer many e-mails this weekend.

I will take a quick look through them at some point, and if I notice anything urgent I will get back to you. Otherwise, I will get back on track early next week on Monday/Tuesday, depending on if the move goes seamlessly or not. Wish us luck.

Friday, November 2, 2007

Halftone Patterns & Shapes

posted by Liz

I've never had so many follow-up questions on a tutorial as with the one back in August on halftone dots. One commenter called Ted left a question about creating patterns and shapes with halftone dots and I want to go over each of those. So, luckily for you, here's the second tutorial in two days.

Halftone Patterns
To create warped patterns with halftone dots, here's what I recommend. While in quick mask mode, experiment with different types of gradients. Try using a radial or reflected gradient instead of the linear one to start with. Now apply a color halftone filter, changing the radius you use each time. Stay in Quick Mask mode and use at least one other filter to distort the pattern. Such as Distort>Twirl, for example. Then return to Standard Mode and fill the selection. You can make all sorts of mind-bending patterns this way. (Use a reverse gradient if you want the color to fill the outer edges instead of the middle or Inverse the selection once you've applied all the filters.)



Halftone Shapes
If you want to make halftone dots in the shape of a specific object, you can do it using Channels. Here are the steps:

1. If your object is part of a photo, make a selection around it and paste it onto its own layer using Command+J. If it's already on its own layer, go to step 2. I'm using a car.

2. Once you have your object on a separate layer, Command-click on the thumbnail in the Layers Palette to make a selection around it. Now expand that selection a little, maybe 5 to 10 px by going to Select>Modify>Expand. Don't overdo it or you'll begin to lose the shape of your object.

3. Switch over to the Channels palette and click on the Create New Channel button.

4. Fill the selection with white by making sure white is your foreground color and hitting Option+Delete. Deselect with Command+D.



5. Two filters next. First, Gaussian Blur. Mine is set at 7px, but you may want to increase that for larger files. The second filter is Pixelate>Color Halftone. Mine is at a 5px radius.



6. Command-click on the halftone thumbnail of the new alpha channel you made to create a selection around it. Then go back to the Layers palette and create a new layer under your object layer. (You can do this by making sure you're on your object layer and then Command-clicking on the Create a New Layer button.)

7. Now just pick a color to fill it with and hit Option+Delete.



Fancy it up however you want. This is a nice way to create a textured burst of color behind any object.

Thursday, November 1, 2007

Removing Tints

posted by Liz

I've been working on a project for the tutorials, so I haven't put one up in a while. But after attending a Photoshop CS3 workshop with Adam recently, I learned an amazing technique for color correction by Scott Kelby and Dave Cross, so I thought I would share it with you all.

Watch the video to see the process and check the written instructions below for clarification on what I'm doing.



Steps:
1. With your photo open, make a copy of the image by dragging the image layer to the New Layer button. Then go to the Adjustment Layer button at the bottom of the Layers palette and choose Threshold.

2. Move the slider all the way to the left and slowly slide it back until some dark spots appear. Shift+click on it to mark it with a 1. [Update: Due to some confusion, I want to clarify that you should click on the areas that appear in the document, not on the slider in the Threshold window.]

3. Now move the slider all the way to the right and slowly slide it back until some white spots appear. Shift+click to mark it with a 2.

4. Cancel Threshold. Your markers will temporarily disappear.

5. Go to Curves (Command+M) and first select the black point eyedropper. Click on the #1 marker with it.

6. Now select the white point eyedropper and click on the #2 marker. Click OK.

7. Make a new layer, go to Edit>Fill and choose 50% Gray from the "Use" drop-down menu. Set the blending mode to Difference in the Layers palette.

8. Open up Threshold again, move the slider all the way to the left and start sliding it slowly back to the right until you see white spots. Mark it with Shift+click and then cancel Threshold.

9. Delete the grey layer.

10. Open Curves again, select the grey point eyedropper and click on the #3 marker. Done.

Tips:
1. To get the crosshairs view of the Eyedropper Tool while you're using Threshold, turn on Caps Lock.

2. To zoom in while in Threshold, press Command+Spacebar to temporarily activate the Zoom Tool.

Tuesday, October 23, 2007

Flexible and fun

origami_hdr

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.

Friday, October 19, 2007

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.

e-poster

e-clapper2 e-booking

e-kittchen e-knitting

e-flask2 e-tv

e-graph

Tuesday, October 16, 2007

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!

Tuesday, October 9, 2007

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.

Wednesday, October 3, 2007

Crate version 2 is here

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

crate

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.

Monday, October 1, 2007

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.

Thursday, September 27, 2007

Crate upgrades in the works

cratesmall
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.

Wednesday, September 19, 2007

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.

Thursday, September 13, 2007

Your shipment has come in

crate-blog


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.

Tuesday, September 11, 2007

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.

Friday, September 7, 2007

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...

Thursday, September 6, 2007

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.


First1


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%.


First2


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.


OneA


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:


TwoTwo


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:


TwoThree


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.


TwoFinale


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.


Third3


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.


Third2


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.


Last


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.

Wednesday, September 5, 2007

Light upgrade

light2

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.

Contributors