11.05.2012

Free Scrapbooking Kits for Fall and Thanksgiving

'Free' doesn't necessarily mean 'cheap'. There are some beautiful scrapbooking kits and papers that won't cost you a dime. All you have to do is dig your way through a website to get those great freebies.

Below are some amazing free Fall and Thanksgiving scrapbooking kits for the taking. You can download them and then either use them digitally or print them yourself! Just be sure to read their terms of use so that you don't get into any unwanted trouble. ;)







10.18.2012

Free Scrapbooking Fonts for Halloween

Haunting Attraction !Sketchy Times Caribbean Island Carnivalee Freakshow Eight Fifteen Grafik Text Grant's Ghosts Minster No 2 FFF Tusj Freeze! Halloween is creeping up on us fast! If you have any final decorations or invitations you want to make, then these free Halloween fonts are the thing for you!

Free Halloween Fonts


Below are the names of each font you see above. You can either click on the text in the picture for the font that you want, or you can click on the links below. The links will take you to a separate website to download the fonts. Make sure you click on the correct download button! Sometimes these sites have ads that look like they are the right button, but they are not.
  1. Happy Halloween: Haunting Attraction
  2. Trick or Treat: !Sketchy Times
  3. Scary Creepy Spooky: Caribbean Island
  4. Candy Corn: Carnivalee Freakshow
  5. Jack o Lantern: Eight Fifteen
  6. Count Dracula: Grafik Text
  7. Hallow's Eve: Grant's Ghosts
  8. Adam's Family: Minster No 2
  9. Rest In Peace: FFF Tusj
  10. Frankenstein: Freeze!

10.16.2012

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!


10.11.2012

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.

10.09.2012

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



10.04.2012

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.


10.03.2012

Free Squirrel PNG (from The Emperor's New Groove)

I'm digging through some super old files from 2003 that I STILL have on my external hard drive. I think I must have clung to these for so long because I put so much effort into them.

This was back in the day before I knew the awesomeness of Photoshop. Paint Shop Pro was my canvas, and I preferred to do everything slowly by hand. At first I would carefully go over all of my images and delete (with the brush tool) what I didn't want. Even when I upgraded to Photoshop, I didn't know about all of the tricks to quickly cut out an image and ended up using the Pen Tool for the longest time.

However, I don't regret doing it! It was fun and I learned how to be very meticulous and precise. And let's not forget patience. :)

So, without further ado, here is a freebie of the squirrel from The Emperor's New Groove for everyone. The cutout is in no way perfect and might look a bit choppy on a dark background.

Please make sure to only use this image for personal use. The image does not belong to me.

To save the file click on the image to expand it, right click on the image, and click 'save image as'.