Want more?

If you don’t see a color combination you like, comment with 2 Hex codes you would like me to add to this collection!

View this design on an HTML page

Ever wondered how to get that vintage film-like vignette on your photos? Here’s an easy tutorial to show you how.

Step 1

Open your image in photoshop.

Step 2

With your photo selected, go to your menu bar: Filter > Distort > Lens Correction…

Step 3

Lens Correction settings will pop up. To add a vignette, move the slider bar left or right to make your vignette darker or lighter under “Amount”. Under “Midpoint” is where you can adjust how far in the vignette goes. FYI: try not to lighten your vignette on the bar, it dodges out your photo.

All done!

The final product:

More examples:

Want more?

If you don’t see a color combination you like, comment with 2 Hex codes you would like me to add to this collection!

View this design on an HTML page

A Quick Color Explanation

By Joe Burns

Basic Hexadecimal Notation:

Hex numbers use 16 digits:

0 1 2 3 4 5 6 7 8 9 A B C D E F

Zero, “0″, is the smallest representations of a color. It’s almost the total absence of color. F is 15 times the intensity of the color of 0. Combinations of these digits create different shades of a particular color. Double Zero, “00,” is equal to zero hue. FF is equal to a pure color.

This color representation is done three times, once for red, once for green, and once for blue, in that order. Put the three, two-digit, codes together and you get a 6-digit hex code. The hex code is just a representation of the red, green, and blue intensity, in that order. The computer creates the three intensities, mashes them together, and you get a single shade of color.

For an example, here are the opposite ends of the color scale:

FFFFFF

The code above is equal to white. Why? Notice the three colors are all set to FF. That means the highest level of red, green, and blue. As I said above, in a computer, or television, the combination of all three primary colors creates white. Now here’s black:

000000

This is just the opposite. All three settings of red, green, and blue are set to a total absence of color. Black.

Now, here are a few other codes and their breakdown:

FFFF00

Let’s start with the concern from up above, yellow. The code above produces pure yellow. Notice the red and the green are at full tilt. There is no blue. By mashing the red and green up against each other, the red cancels out the blue and all that is left is the yellow. It’s actually a subtractive color method being employed in an additive world. Man, this gets loopy, huh?

DC143C

The code above creates a shade of red called “crimson.” The red setting, DC, is pretty intense. There’s not much green. Blue is set a little less than halfway up.

EE82EE

That’s violet. The Red and the Blue are at pretty high levels. The green is there, but at a lower level. Now, this is not purple, but violet. Purple, as I said above, is a combination of red and blue alone. The code is 800080. Notice there’s no green at all. Just an equal amount of red and blue.

FFA500

That’s orange. There’s lots of red, not quite an equal level of green, and no blue.

That’s how the hex codes work. This lesson probably won’t make you an expert in color creation, but at least you’ll be able to understand the creation of color in a computer.

So, are there more hex code colors that what I show above? Oh, yes. There are thousands upon thousands covering every color in the scale from pure black to pure white. Every time you change even one of the red, green, or blue levels, you change the color.

Enjoy!

Ever wondered how to add a background to your website? You can apply this technique to any page that allows HTML/CSS.

The basic code:

<style type=”text/css”>
body {
background-image: url(”name-of-image.jpg”);
background-repeat: repeat;
background-color: white;
background-position: top left;
}
</style>

Background Repeat Guide

There are 4 different ways to repeat your background. Here’s a visual guide to help you understand. Memorize it! Because when on the go, you will find it much easier to know the various directions from memory. By default, all backgrounds align to the top left, 0px 0px.

Repeat

Simply put, repeats your background infinitely.

No-Repeat

Only repeats your background ONCE. This repeat is an option to be used on Twitter backgrounds, as a way to advertise your Twitter page (example: Heartbreak Cupcakes).

Repeat-x

Repeats your background Horizontally.

Repeat-y

Repeats your background Vertically

Background CSS Shorthand

<style type=”text/css”>
body {
background: #ffffff url(”name-of-image.jpg”) top left no-repeat;
}
</style>

Want more?

If you don’t see a color combination you like, comment with 2 Hex codes you would like me to add to this collection!

View this design on an HTML page

Want more?

If you don’t see a color combination you like, comment with 2 Hex codes you would like me to add to this collection!

View this design on an HTML page

Greyscale

Rounded Corners can be used as a pretty cool effect. This tutorial demonstrates how to create smooth rounded corners when editing photos, specifically. This is a very detailed demonstration but once mastered, should take 5 seconds to fully complete during your photo editing! PSD included. For a tutorial on Rounded Corners for use in Web Design: Web Design Rounded Corners Tutorial.

Step 1

select the rounded rectangle tool.

make sure your rectangle tool is on PATHS not shape or fill pixels. you can change your radius to any size. the example photo is 10 px.

30 px	50 px

 

Step 2

draw out your path. make sure to leave an even space on all 4 sides.

otherwise corners will look like this:


^ notice that there is no smooth transition between points.

Step 3

then just right click with either direct select or path select arrows, and make selection.

a tiny window will pop up asking if you want to feather and make new selection. if you feather you may come out with a cool effect

but unless you want that, just leave it at 0, then press ok.

Step 4

once your path is selected, inverse it. Command + Shift + I (PC: shift + ctrl + i) or select > inverse.

create a new layer above that and use your fill bucket to fill it with another color of your choice…

For a more dramatic effect

Select the Layer Effects button at the bottom of your Layers Window, and click on Outer Glow

Input the following criteria and press Ok. All done!