Extract Color Palettes

17 May 2010
Category : Code & Design
0 Comments

If you’re a web developer or someone who works with color schemes and color palettes, you might already rely on software or tools to help you find the best set of matching and harmonious colors.

ColorSuckr is a cool online service that allows you to create color schemes based on pictures. Just enter a image URL and the website will generate 12 of the most common colors on that image. You get a preview of the actual color and color codes in Hex value, web safe value, and RGB numbers.

The website also has a few other useful features such as the ability to enter the URL for a webpage, instead of just a single image. It will scan the page and show you all the images and let you choose from there.

You can also install the ColorSuckr bookmarklet for the Firefox add-on. This is great and convenient if you work a lot with color palettes. Just click on the bookmarklet button from the webpage you’re on containing the image you would like to work with and go from there! Enjoy!

Visit ColorSuckr to start extracting your color palettes!

Possibly Related Posts:


Gravatar

11 May 2010
Category : Code & Design
0 Comments

After looking through my blog comments, I noticed how many people didn’t have Gravatars.

What is a Gravatar?

Gravatars are Globally Recognized Avatars created by Tom Werner. Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. They help identify your posts on blogs and web forums, and is recognized by your email address every time you leave a comment.

Leaving behind an avatar image on every blog comment is a relationship builder. It will also create awareness with the blog owner and other readers that come to that blog post. Most people can connect more with an image of a face or a logo than the default image place holder. It is much harder for people to connect with a default image because it lacks personalization.

If you are really active in leaving blog comments in niche communities you will get notice a lot by others in that community. If people see your comments everywhere it is like “Wow this gal or guy is everywhere!”

So how does Gravatar work?

You upload your image to the Gravatar website where it is stored on their computers. The Gravatar is attached to an email address that you specify during setup. Anytime you leave a comment on a blog and enter your email address you specified during the setup process, your Gravatar image appears next to your blog comment.

I’ve revamped my blog to include Gravatars to appear next to your comment(s) on my blog entry pages so sign up and start customizing your Gravatar!

Visit Gravatar.com to customize your globally recognized avatar.

Interested in having Gravatars appear on your blog? Check out WordPress Codex to learn more.

Possibly Related Posts:


WordPress Subscribe-to-Comments Plugin

6 May 2010
Category : Code & Design
0 Comments

I’m sincerely grateful and thankful for everyone who’s taken an interest in reading my blog and leaving friendly comments every now and then. Until today, I was unaware that commenters on my blog didn’t receive any type of notification that I had responded to their comments. Those of you who’s left questions and remarks are probably feeling a bit ignored due to this oversight. My blog is a work-in-progress and I’m a real newbie when it comes to blogging with WordPress.

So I found and installed a plugin that will now allow commenters the ability to subscribe to the blog entries they are interested in receiving email notifications. This way, commenters will receive my responses as well as future comments by other visitors.

For all you WordPress bloggers, check out this essential plugin:
Subscribe-to-Comments is a robust plugin that enables commenters to sign up for e-mail notification of subsequent entries. The plugin includes a full-featured subscription manager that your commenters can use to unsubscribe to certain posts, block all notifications, or even change their notification e-mail address!

To download and install for your WordPress blog, visit Tempus Fugit by Mark Jaquith.

Possibly Related Posts:


Abstract Watercolor in Adobe Photoshop

13 March 2010
Category : Code & Design
1 Comment

This is my interpretation of a tutorial I came across on the Internet. Using Adobe Photoshop, you can create this abstract watercolor effect with any photo using layers, masks and splatter brushes. You can find parchment paper texture from Bashcorpo and download free splatter brushes from Brusheezy.

Open Photoshop and create a new document. I’m using 1920×1200.

Copy and paste your photo onto the canvas. Even though the photo I’m using here has small resolution, it won’t matter since I will be using filters that will remove any sort of pixelation.

Use transform and scale it to fit our canvas by going to Edit → Transform → Scale. Hold down the Shift-Key to keep the original aspect ratio of the photo.

Go to Image → Adjustments → Brightness/Contrast to add more brightness and contrast.

Turn the photo into grayscale by going to Image → Adjustments → Desaturate, then duplicate the layer. Name the original layer “Watercolor” and the duplicate layer “Threshold

Apply Watercolor filter to the “Watercolor” layer by going to Filter → Artistic → Watercolor. Use 12 for Brush Detail, 1 for Shadow Intensity, and 2 for Texture.

Select the “Threshold” layer and go to Image → Adjustments → Threshold. Move the threshold level to anywhere between 160 and 180.

Set the blending mode of the “Threshold” layer to Multiply. Merge the “Threshold” layer to the “Watercolor” layer by going to Layer → Merge Down. Rename this merged layer to “Photo

Now it’s time for some painting! Create a new layer called “Brush” and select some splatter brushes and start painting over your photo.

When you’re done painting, select and copy the “Photo” layer. Go to the “Brush” layer and add a Layer Mask. Alt+Click on the layer mask and you will see the canvas is now white.

Paste the image copied from the “Photo” layer.

Go to Image → Adjustments → Invert. This will hide the blacks in the layer mask to reveal the whites of the photo.

Click out of the layer mask and delete or hide the “Photo” layer. We can see our image is now in abstract watercolor!

Add a nice parchment paper texture and place it on top of the other layers. Set the blending mode to Linear Burn.

Finally, add some more watercolor splashes and a fancy text and you have your abstract watercolor design. Have fun!

For more information about the Abstract Watercolor Effect, check out Tutorial Magazine.

Possibly Related Posts:


Digital Bokeh Effect in Adobe Photoshop

4 January 2010
Category : Code & Design
0 Comments

This my interpretation of a tutorial I came across on the Internet. The process is very easy if you’re patient and follow the steps carefully. We will be using one of the coolest things in Photoshop: the super powerful Brush Engine.

First, open Adobe Photoshop and create a new document. I’m using 1920×1200.

Step 1: Creating the Bokeh brush

Select the Ellipse Tool (U) and create a circle. You can create a proportional circle if you go to Ellipse Options and select Proportional 1:1.

Use black for the color, and go to Layer → Layer Style → Blending Options. Change the Fill Opacity to 50%. Select Stroke and use 10 pixels for the size, Inside for the Position and Black for the color.

Go to Edit → Define Brush. Name it “Bokeh” and now we have a new brush! You can hide or delete the layer with the Ellipse because we only needed that shape to create the brush.

Now let’s define the brush. Go to Window → Brushes (F5). The first thing to do in the Brush Engine is to select our new Bokeh brush. The size won’t matter because you will change that when you use it. The Spacing, however, is very important. Change the value to 100%.

Select Shape Dynamics. Change the value of Size Jitter to 100% and Minimum Diameter to 50%.

Select Scattering. Change the value to 1000%. Also, increase the Count to 5 and lower the Count Jitter to 1%.

Select Other Dynamics. Change the values of Opacity Jitter and Flow Jitter to 50%.

Now that the Bokeh brush is ready, you will need to set the stage for your canvas.

Step 2: Creating the Canvas

Create a new layer and fill it with a very dark gray (#262626), not black. If you fill it with black the effect won’t work.

Go to Layer → Layer Style → Blending Options. Select Gradient Overlay. Change the Blend Mode to Overlay and Angle to 45º.

Change the gradient colors by clicking on the color box to open the Gradient Editor. The colors I used are: Yellow (#FFF799), Cyan (#1BDAEB), Purple (#9B3B81), and Orange (#D27E34).

Step 3: Paint!

Now that the stage is ready, we’re ready for the fun part, let’s paint! Create a new Folder in the Layer Palette. Rename the folder to Bokehs and change the Blend Mode to Color Dodge.

Create a new layer inside the Bokeh Folder. Choose white for the color and select the Brush Tool (B). Start painting some ellipses with our custom brush. For this first layer use a big size, like 500-600px.

Go to Filter → Blur → Gaussian Blur. For this first layer use 20 pixels for the Radius.

Create another layer and paint more brushes. This time use a smaller size for the brush, like 350-400px. Again blur the layer by going to Filter → Blur → Gaussian Blur. Use 4 pixels for the Radius.

Create another layer and repeat the previous step, this time use a much smaller brush, like 200-275px. Apply the Gaussian Blur to this layer as well, but use only 1 pixel for the Radius.

You can try different shapes for this effect, like hexagons or hearts for example. Play around with the blurs to add more depth to the final design. It’s entirely up to you! Have fun creating your digital bokeh wallpaper!

For more information about the Digital Bokeh Effect, check out Abduzeedo’s Tutorial.

Possibly Related Posts:


Older Entries »