Staining Bathroom Cabinets - My First DIY Project!

I DID IT!

Yes. Me.

I stained the super-ugly-pink-bathroom-cabinets all by myself. And guess what? It's my FIRST DIY project. That's right. My first.

If I can do it. You can do it! (This project proves it.) It just takes time, patience, and some work. :) But it isn't rocket science.

I first saw this project at One Good Thing by Jillee who directs you to Monica Wants It for the full tutorial. It sounded "easy" enough. I did know that it wasn't necessarily "easy" though, but for me (being my first DIY project) I felt like I was confident enough that I could do it. It does take patience and hard work (I may be reiterating this throughout the post). A lot of bending over (and achy backs), but I actually did enjoy doing it.

I honestly didn't think these cabinets could get any worse anyways. They are over 19 years old and really ugly. They had some sort of weird, light pink stain applied to them when the home was purchased. I dunno....they just looked so awful. I'm surprised my eyes haven't burned out of their sockets after 19 years of looking at them.

My biggest worry with this project was that my cabinet color was not the same as Monica's. Hers are that oak color you see in a lot of homes that you buy. Ours are pink!! What the heck?!

Anywho, follow Monica's blog post. She did such a perfect tutorial and, let's be honest, the tutorial would be a beast to write. ;)

Photos of My Process

First, here are the photos of each phase.

My Tips 

First, here is another lovely picture of how the vanity turned out.

And without further ado, here's what I learned from this process.

• Use the men's sock! Seriously. I read over Jillee's post and she said she preferred the cheap foam brushes. For me, the foam brushes took twice the amount of time to stain than the sock did. I felt that the sock was super easy and you have more control. The foam brush was great to get into some nooks and crannies you otherwise can't get into. My foam brushes were all different sizes and I found that the small ones are great to dip into the can, but, of course, the big ones are impossible to dip. Put on a laytex glove, put a sock over it, and start spreading!
• Use a tiny paint brush for the spots you can't get (after applying the second coat). There were some spots that even the foam brush and a sharpie couldn't get. My cabinets were really worn and had a lot of spots. Check out one of the photos above for proof of how horrible they looked. I would definitely go over your cabinets with a tiny paint brush (that you don't care about throwing away) and get into the nooks and cranny after you have applied the second coat of stain. We did it after the 3rd coat and I ended up having to apply a 4th because the brush made it looks like it had some "patchy" spots. The 4th stain took care of it, but if we had brushed in the nooks after the 2nd stain, then I would only have had to do 3 stains.
• My 2nd coat looked REALLY bad. Don't stress if the 2nd coat looks almost as bad as the first. The 3rd coat really does make the difference. Don't believe me? Check out some photos of my 2nd coat above. I about killed myself.
• I decided to try a spray can for the poly. Go with the bucket, not the spray can! My hands aren't the strongest and so they started hurting early on when spraying all of wood. Luckily, my brother was there and did most of the work spraying them (hehe). It took longer than I think brushing the poly on would have took. Plus, it was kind of hard spraying the vanity inside the bathroom without getting it on everything. So yeah, bad idea on my part. Plus, it's probably more expensive? I didn't even compare.
• For me, the 3rd coat of stain really did look rather nice. You could still see some brush strokes (from the sock, lol) but it gave them character. However, the 4th coat really did finish them off for me. I think it's because my cabinets were a weird color to start. So, they still turned out really pretty and I love them, but your color may come out different depending on the starting color of your cabinets. I don't remember Monica's and Jillee's looking quite as dark as mine do.

Knick Knacks and the Overall Cost

So, what did the project cost me? Let's divide it into sections so you can see the whole thing come together.

Staining the Vanity (supplies)

• Tack Cloth (pack of 12): $13.01 -- I ended up using 2 tack cloths so that cost me about $2.17 for those two cloths.
• Java Gel Stain, 1/2 Pint: $8.49 plus $5.99 shipping. I only used half the can for 4 coats. Serious! So I can stain a whole other vanity, which I might end up doing. So the cost for this vanity was $7.24 for the stain (if you don't count the other half of the can).
• 4 Foam brushes: About $3.50. I wish I had only purchased 1 though, as only 1 was needed for me. However, it wouldn't hurt to purchase 2 small ones just in case.
• Painter's Pyramids: About $5.00 for a 10-pack. Once you have them, you can use them for multiple products! This was a good buy.
• Handles and knobs: $18.55
• Angled sanding blocks: $6 a piece. We had initially purchased 2 because my mom and I were going to do the project together, but I got impatient because we kept putting it off and just went ahead and did it myself. So now we have an extra sanding block. So that was $12, but it could've easily been $6.
• Polyurethane (spray can): About $7-8. I forgot to keep track of the price of the Poly. Sorry! But I'm pretty sure it was around that price.

Please note that this is only a few of the supplies needed for this project.

We had everything else. Total it cost us about $74.54 to stain the vanity. However, if I take into consideration leftovers and stuff that will be used over and over again for other things, then the cost comes to $43.21. So, I believe you can do it for about $50 if you are smart about it and if you take into consideration that tack cloths, painter's pyramids, and the leftover stain will be used for other things. If you are missing the majority of the items that Monica mentions though, then it could easily cost you about $75 like it did for us.


Knick Knacks and Extras

• Paint for the walls (we chose Thin Ice from the Olympic brand and had it mixed at Lowes): about $32 for a quart (which will be used to paint another room as well).
• Lantern: $9.00 (from Amazon)
• Rug: $10 at TJ Maxx
• Tree: $10 at TJ Maxx
• Moss: $2.50 at TJ Maxx
• Soap dispenser: $10 at TJ Maxx (everything seems to be $10 there!)
• Towels: $10 total for 2 hand towels and 2 large towels (at Walmart)
• Ribbon: $3 at Walmart (sewed the ribbon onto the towels)

That's it! I had everything else and just thought really hard about how to use things and make it look pretty. So, to paint the room it cost $32 (we already had all the painting supplies) and it cost me $54.50 to decorate the space and add new towels.

So far this bathroom makeover has cost $161.04. There are just a few more things I'd like to do to it though. My mom (it's her bathroom if you didn't know) purchased a new faucet, which we will hopefully get to install soon and then I'm planning on framing the mirror to give it that final touch. The faucet cost $94, but I did see a pretty nice one for around $50. However, we decided to be picky and go with the exact one we wanted.

I'm not sure how much the frame will cost. There is a company that I was looking into that makes some really easy to install frames, but the cost is a little over $200. Now, that's a lot better price than buying a whole new mirror for the space, but it's still too costly for me. My plan is to purchase 3 baseboards and cut and install them onto the mirror myself. I'm guessing it will cost around $45 to do it. Hopefully less! Depends on the trim. ;)

I hope you enjoyed this look into our bathroom and feel inspired to do your own! If you end up doing it based on my blog post, please share it on my Facebook page. :)

Adobe Illustrator Techniques That Will Make Your Life Easier

Let's face it, we all want to be able to create something amazing, but not spend a bajillion hours in the process. Illustrator has some really cool features that aren't so noticeable to the newcomer. Here are some shortcuts and techniques that are sure to win you over.

1. CTRL + D

Confession time. Once I found out this amazing shortcut key, I have never stopped using it since. It is definitely my favorite!

Basically, CTRL + D repeats the last step that you took. So, for example, if you created a shape and then copied it to the right, CTRL + D would then repeat you copying and moving your shape. You'd have to copy and move the shape at the same time of course. Here's an example:

 

Still not convinced this is cool enough for you? Ever wondered how to make a complex shape fit around a perfect circle? CTRL + D is a really great method for this. In the future I will make a tutorial on how to do the perfect circle, but for now, here is a shape that has been put into a perfect circle using the CTRL + D shortcut.

2. The Arrow Keys and CTRL Key

If you are looking to make your own custom starburst shape or you need that perfect swirl, then what you need are the arrow keys and the good ol' CTRL key on your keyboard. (And sometimes some chocolates to munch on can give you a little boost.)

First, grab the star tool and begin drawing your star, but don't let go of the mouse button! While you are drawing the shape, hit either the up arrow or the down arrow on your keyboard. The up arrow will increase the amount of points your star has. The down arrow will decrease the amount of points your star has.

Once you have the amount of points you want, you can now hold down the CTRL key on the keyboard and move your mouse closer to the center of your shape or farther away from the center. Doing so will either make your points more pointy or less pointy.

NOW you can let go of your mouse button. You'll need to make sure you are holding it the entire time you are making these adjustments.

You can do this same thing with the Spiral Tool, except instead of creating points, you are creating more spirals.

3. New Pattern Brush

You are probably like....New Pattern Brush? How in the world is that going to help me? Well, if you know Illustrator well then you will know that a new brush can change the way your strokes look.

Let's visualize this. You've drawn out a complicated shape with the pencil tool.

Of course it's pretty boring as is and you want it to look like a chain or maybe a rope. How in the heck are you doing to do that without it taking a month to do? This is where the New Brush comes in handy. Listen carefully!

Draw out the pattern that you would like to use for your stroke. Here's mine:

Select your pattern and create a New Brush. The New Brush icon is under the Brushes window. Select "New Pattern Brush" and hit OK.

The Pattern Brush Options will open up. You don't need to touch anything other than the Fit area. Make sure "Approximate path" is selected so that your pattern doesn't look all weird after you have created it. You can test the others out if you'd like to see what happens.

Hit OK. You're almost done! You should notice your pattern is now in the Brushes window. Select your stroked shape and then click on the pattern you'd like to replace the stroke with. Here's mine!

4. MadPattern Templates

Okay, so this isn't so much of a technique as it is a huge help to those of you who want to create some amazing seamless patterns.

MadPattern Templates are templates made specifically for Illustrator to make it easy for you to create your own seamless patterns. Go to www.madpattern.com and download the templates. They're free!

There are instructions inside each template on what to do. If anyone would like me to write a visual tutorial on this, I'd be happy to. But I'm not feeling too much motivation right now unless it's really wanted or needed. (Yeah, we can all be a little lazy sometimes, right?)

I really hope these 4 techniques help make your Illustrator experience much easier.

Creating Zig-Zag Borders in Adobe Photoshop and Illustrator

Want some Zig with that Zag?

Creating zig-zag borders in Photoshop isn't as hard as you would think! Just invite your friendly neighbor Illustrator to join in on the fun and it's super cinchy.

Extra Tip: Sometimes some good ol' Trololol will help make the zig-zag design process even quicker. ;)

Step 1: Create multiple triangle shapes side by side

Load up Illustrator and, using the Polygon Tool, draw a simple triangle in any color of your choice. Simply click once on the artboard and choose 3 sides or begin drawing your polygon shape and use the down arrow on your keyboard to give it less sides.

Copy your shape by holding down the ALT key and dragging your shape to either the left or right. If you have Smart Guides turned on, it will make it easier to line your shape up without much effort.

Now press and hold CTRL + D until you have as many triangles as you want. CTRL + D will duplicate the last step you made in Illustrator. If you don't want your zig-zag to be as pronounced, you can select all of your triangles and shrink them vertically.

Step 2: Copy your zig-zag and paste into Photoshop as a shape

Select all of the triangles in Illustrator and copy them to your clipboard. Pressing CTRL + C is the easiest and quickest way to copy the shape to your clipboard.

Open Photoshop and paste the zig-zag as a Shape. After your shape is pasted, you can even make it into a custom shape and use it over and over again in the future.*

*Custom shapes will be covered in a future tutorial.

Step 3: Create a rectangle shape below the zig-zag shape & align the shapes

Using the Rectangle Tool, draw a rectangle and make sure it is below your zig-zag shape so that you can see it. Select both the rectangle layer and the zig-zag layer and align the bottom of both shapes to each other.

Step 4: Create the desired zig-zag border using a layer mask

Go ahead and hide your zig-zag layer by click on the eye icon and turning it off.

Select the rectangle shape layer. Click the Add Layer Mask icon. You should now see a white box on your rectangle layer. Make sure it's selected.

While your mask is selected, hold down the CTRL key on your keyboard and click the vector mask thumbnail (the box next to the words Shape 1 on my example). This will create marching ants in the shape of your zig-zag.

Make sure black is your current background color. Once you have confirmed this, press the Delete key on your keyboard. You may now deselect the zig-zag by pressing CTRL + D or going to Select > Deselect in your menu.

Zig-zags are a growing trend in design right now and can give your design movement. Have fun with it!

How to Center A Website Using CSS

Back in the day of tables, centering was as easy as creating a center tag and placing it around whatever you wanted. With CSS, centering can be a bit tricky depending on what you are wanting to center.

In this post we are only going to cover the basic centering code used to center your entire website and then we'll touch base on some problems you may run into.

Step 1: Start with a container

To begin, create a container (or wrapper, it doesn't matter what you want to call it) in your HTML. This container will box in all of your content. Let me provide you with a visual so that you can see what this container is doing.

Here is the code you'll want to start out with (in between the body tags of the HTML):

<div class="container">
     Header, content, and footer will be placed inside here.
</div>

According to the code, you will place all of your content inside of this container. Because all of your content is within the container, all you have to do to center the content would be to center the container.

Step 2: Set margin's left and right to "auto"

Using CSS, we will use the property "margin" to center our container horizontally on the page.

.container {
     margin: 0 auto;
}

The first attribute that we give to margin is "0". This will give us a top and bottom margin of 0 to our container. The second attribute is "auto". Auto does different things depending on the property it is assigned to. When it is assigned to margin's left and right attribute, it will center it on the page.

Step 3: Give your container a width

However, we are not quite finished. If you leave the CSS at that, nothing will change. The reason is because your container doesn't have a width. If you don't set a width to your container, then your site will automatically have a 100% width and will fill in the entire page. Let's give our container a width.

 .container {
     margin: 0 auto;
     width: 980px;
}

Now our website is centered.

{ DOWNLOAD THE FINAL CODE }

Increase Amount of Undos in the History Window in Adobe Photoshop

It may seem like Photoshop has a personal vendetta against you and doesn't want you to be able to utilize the undo like you want. Personally, I quite like having the power to be able to undo infinitely.

Although Photoshop doesn't allow you to undo as many times as you want, you can at least increase the amount of undos you are allotted. Here's how:

Step 1: In your main menu, go to Edit > Preferences > Performance.

Step 2: In the History & Cache section you will see a number. You can increase this number to 1,000 (max).

Increase Font Preview (Sample Text) Size in Adobe Photoshop

Ever bothered by the fact that the sample text next to your font names in Adobe Photoshop are so small that you wonder why they are even there at all? Have no fear, there is a simple way to change the size of the font preview (also known as the sample text) in Photoshop so that you'll never have to squint again. Below is a preview of the final result.

1. Access the preferences

Click on Edit > Preferences > Type.

2. Change the font preview size

Simply select the dropdown box (the default is Medium) and choose the size that best suits you. The final preview I have above showcases the font preview as Huge.