Facebook Timeline Header Image Size

Facebook, the most known social networking site that connects you and your friends.


Facebook pages and profiles has changed to Timeline Layout last March 30, 2012.
Facebook header/banner plays an important role especially on a company and business.

Main Header Image Size: 815px by 315px
Profile Header Image Size: 125px by 125px

On its, header you can upload images of your choice to make your timeline personalized. The image uploaded will automatically fit its width, it cannot be resize, however it has the option of  "Drag to Reposition Cover".

If you prefer to make or customize your own Facebook Timeline Header, here is the exact size of its width and height:

Custom Photo Tab Images Size: 112px by 75px

So here goes mine:

Difference of JPEG, PNG, GIF (Image File Format)

It is important that you know what type of image file you must use for saving your project. Is this file format acceptable on web?  Do you know the difference of these 3 image file format?

JPEG
(Joint Photographic Export Group)
The most common format of an image by photographic capturing devices (digital cameras) and in web pages. JPEG format compresses data to be smaller in a file, so make sure that you save your image file into a higher quality as JPEG have options on saving. Saving your JPEG image repeatedly can produce lower quality of your image file as it keeps on compressing your file too.

PNG 
(Portable Network Graphics)
PNG has just been invented recently, it has transparency for 24 bit RGB images, slower to read or write. This is actually invented to replace and or improve GIF type of images. It is a bitmap image format, and does not support CMYK colors.

GIF
(Graphics Interchange Format)

GIF is great in web and graphics which has an animation or moving images feature but with limited number of colors. It can be use for small animations or in low-resolution clips. Graphics of limited colors, GIF is smaller in size and with pure colors compare to JPEG format.

Quick Guide for making a Color Bar Wallpaper

Today, I am going to share a quick tutorial on how to make your very own Color Bar Wallpaper. Of course, screenshots are provided to make it more easier to do.


Here is the image that what we have to do:

First create a New Document (File > New > your preferred size > Ok)
I just use 640px by 480 px as a sample for this quick tutorial.

On Tool Bar, left side click on Gradient Tool (G). Right click on it to see Gradient Tool/Paint bucket tool. On its properties, let's edit the color gradients that we will be using on the Gradient Editor.

And these are the colors that we are going to use for this tutorial. To edit a color, simply double click the Color located below (red as sample) and input the color code below, Once done click OK.

Choose Linear Gradient beside the Gradient Editor on top, drag the mouse from left side to right side and this will be the result. Set the Background Color Pallete as Black located below the Tool bar.

On Menu Bar, choose Filter > Pixelate > Pointillize. Cell size will be 4 > OK

Then Filter > Blur > Motion Blur > Angle at 90 degrees > Distance at 721px > OK

We have the Color Bar already here, but it looks dull and dark, so let's add something to enlighten the image a little bit. On Tool bar, click on Marquee tool (M) > Elliptical Marquee Tool > Set feather as highlighted on screenshot as 60px, drag your mouse to the image.

Create a New Layer (Ctrl + Shift + N)
Use White as the Foreground Color > Paint bucket (G) > Fill
On top layer there is a drop down selection indicated as Normal.
Click it and choose Overlay.

Save your work and check afterwards. Practice more and play with different colors, see to it that your colors blend.


Here's my final output then:

How to make a Bar code on Photoshop

Making your own Bar Code using Adobe Photoshop might look hard to do especially for newbies or beginners. But with these simple step-by-step guide. Bar Code design is just fun doing. Once you made one, you can personalize it and use it on your magazine, your products, etc.


Final Output will be like this image:

First, create a document with your size preference, I choose 300px by 200px for this Bar Code Tutorial. Set the Foreground color to Black and the Background Color to White.

Once set, click on Filter > Noise > Add Noise

Set the Amount a little bit higher, I choose 65%, Distribution > Gaussian > and check Monochromatic > OK

On the left side which is the Tool bar, click on Marquee tool > Single Row Marquee Tool > Click on your Document and a line will be highlighted.

Press Edit > Free Transform (Ctrl + T) then drag on the lower part of the selected image.

Then drag it up to transform, press Enter. And this will be your document then:

Create a New Document much larger than your Bar Code size (300px by 200px).
I created 420px by 280px, drag your Bar code on this new document, and input Text (T) for the code.

Save your image, and always check your final output once saved. So let's preview it for the last time:

"Give away for the Day" (Monday)

Pixels and Gradients be posting freebies here or "Give away for the Day"  so that as my loyal readers will continue reading and subscribing to this blog.


So what's for today?


GOLD GRADIENTS
No longer take time looking for the right combination of Gold for gradients.
Click here to download, and enjoy!

Clipping Mask on Photoshop

So what is it? Clipping mask is simply a shape that you are going to clip on a photo or an image.

In this tutorial, there are just few steps to learn how to use clipping mask.
It will look like it's hard to do, but I swear it's just as easy as 1,2,3.

Here is the final output of an image through Photoshop:

 

On the first step, on your Adobe Photoshop, Create a New Document about 640px by 480px.

New Document

Then put the word BEACH using Text Tool (T), use the font of your choice and any color will do. I use Carbon Block on my font, black as the color. Just like this screenshot:

Then choose a background that will suite your Text. Mine is BEACH so I look for an image with this kind of view. You may also use this image, just click on the link below.

 

Beach Background

Once downloaded, open the image and insert it on your document window. Please check on the Layers on the right corner, see that image you're using is on the top layer of your Text.

On this next step, you'll get the result of this tutorial. So simply click from the Menu Bar > Layer > Clipping Mask (Ctrl + Alt + G)

So here is the result of the Clipping Mask

Now Save it by going to Menu > File > Save > (Filename) > Format > Jpeg > Save
Then review your work afterwards, does it look like the final image?

Whew! No sweat right? Practice using Clipping Mask using different kinds of themes, fonts and images and who knows you might be the next one sharing this kind of tutorial.