iPhone Screen Dimensions in Pixels

Apple iPhone 5 screen dimensions – 640×1136
Apple iPhone 4S screen dimensions – 640×960
Apple iPhone 4 screen dimensions – 640×960
Apple iPhone 3GS screen dimensions – 320×480
Apple iPhone 3G screen dimensions – 320×480
Apple iPhone screen dimensions – 320×480

Samsung Wallpaper Dimensions:
Samsung Galaxy S II LTE – 480×800
Samsung Galaxy S II Epic 4G Touch – 480×800
Samsung Galaxy Note – 800×1280
Samsung Galaxy S II (Hercules) – 480×800
Samsung Galaxy S II (Attain) – 480×800
Samsung Galaxy W I8150 – 480×800
Samsung I9103 Galaxy Z – 480×800
Samsung Galaxy S Plus – 480×800
Samsung I9100 Galaxy S II – 480×800
Samsung Galaxy S II HD LTE – 720×1280
Samsung Galaxy S Blaze 4G – 480×800
Samsung Galaxy Y Duos – 240×320
Samsung Galaxy Y Pro Duos – 400×240
Samsung Galaxy SL I9003 – 480×800
Samsung I110 Illusion – 320×480
Samsung Skyrocket i727 – 480×800
Samsung Exhibit II 4G – 480×800
Samsung Galaxy Nexus i515 – 720×1280
Samsung Galaxy Nexus – 720×1280
Samsung I9100G Galaxy S II – 480×800
Samsung Focus Flash I677 – 480×800
Samsung Focus S I937 – 480×800
Samsung Omnia W I8350 – 480×800
Samsung Google Nexus S – 480×800
Samsung Infuse 4G (i997) – 480×800

Apple iPhone Wallpaper Dimensions:
Apple iPhone 5 Wallpaper Dimensions:
Apple iPhone 5 wallpaper size – 640×1136
Apple iPhone Wallpaper Size:
Apple iPhone 4S wallpaper size – 640×960
Apple iPhone 4 wallpaper size – 640×960
Apple iPhone 3GS wallpaper size – 320×480
Apple iPhone 3G wallpaper size – 320×480
Apple iPhone wallpaper size – 320×480

Blackberry Wallpaper Dimensions:
BlackBerry Curve 9320 – 320×240
BlackBerry Bold 9790 – 480×360
BlackBerry Curve 9380 – 360×480
BlackBerry Torch 9860 – 480×800
BlackBerry Torch 9850 – 480×800
BlackBerry Torch 9810 – 480×640
BlackBerry Torch 9800 – 360×480
BlackBerry Bold Touch 9930 – 640×480
BlackBerry Bold Touch 9900 – 640×480
BlackBerry Bold 9780 – 480×360
BlackBerry Bold 9700 – 480×360

HTC Wallpaper Dimensions:
HTC Evo 4G LTE – 720×1280
HTC One X – 720×1280
HTC One XL – 720×1280
HTC One S – 540×960
HTC One V – 480×800
HTC Velocity 4G – 540×960
HTC Titan II – 480×800
HTC Rezound – 720×1280
HTC Vivid – 540×960
HTC EVO Design 4G – 540×960
HTC Sensation XL – 480×800
HTC Amaze 4G – 540×960
HTC Sensation XE 540×960
HTC Hero S – 540×960
HTC Titan – 480×800
HTC Radar – 480×800
HTC Panache – 480×800
HTC DROID Incredible 2 – 480×800
HTC Sensation – 540×960
HTC EVO 3D – 540×960
HTC Inspire 4G – 480×800

LG Smartphone Wallpaper Dimensions:
LG Lucid 4G – 480×800
LG Optimus LTE – 480×800
LG Nitro HD – 720×1280
LG Optimus 4G LTE – 720×1280
LG Optimus Note LU6500 – 480×800
LG Thrill 4G – 480×800
LG LU3000 – 480×800

Motorola Wallpaper Dimensions:
Motorola RAZR MAXX – 540×960
Motorola DROID RAZR MAXX – 540×960
Motorola DROID 4 XT894 – 540×960
Motorola Motoluxe – 480×854
Motorola XT532 – 320×480
Motorola XT615 – 480×854
Motorola MILESTONE 3 XT860 – 540×960
Motorola RAZR – 540×960
Motorola ATRIX 2 – 540×960
Motorola DROID BIONIC – 540×960

Sony Xperia Wallpaper Dimensions:
Sony Xperia S – 720×1280
Sony Xperia ion – 720×1280
Sony Ericsson Xperia arc S – 480×854
Sony Ericsson Xperia neo V – 480×854
Sony Ericsson Xperia ray – 480×854

Now that your smartphones wallpaper resolution, you can take the next step and start creating a wallpaper.

You will need either Adobe Photoshop (paid), or you settle for using a freeware graphics editor such as GIMP.

If you are using GIMP, download and install it on your computer. Next simply launch it and go to File > Create a New Image.

Make sure to enter the “height” and “width” of your new wallpaper according to the dimensions listed in the above list.

You can now add a photo into your document and position it as you please, or you can choose a more unique route and design your own wallpaper. The concepts we used in our How to Make Your Own iPod Touch / iPhone Wallpaper tutorial can be used pretty much universally for any smartphone! Have a read through and if you are having difficulties feel free to leave a comment below. We’ll try our best to help you out.

Youtube Video Dimensions in Pixels

You’ve got Photoshop opened up and you want to create a graphic that will take up the whole Youtube screen. You’re probably left scratching your head…”What are the dimensions of a Youtube video?” Before we get there, keep in mind that there are various quality levels of videos on Youtube, namely 240p, 360p, 480p, 720p, and 1080p. You choose encoding output video resolution (dimensions) based on which quality level you are aiming for.


If For you want an HD Youtube Video, most users encode their videos at 1280×720. As you can probably guess, this is 720p, and will take up the entire Youtube screen with no letterbox (the black bars at the sides of the video). You can use this resolution for a full screen Youtube graphic, however in most instances it is an overkill. The main disadvantage with choosing this size is that it will be harder to find stock images (with large resolutions) to use for your graphic.

In most circumstances, your video will be viewed at its Youtube embedded dimensions, meaning users will not being viewing it in full screen. Thus we can opt for using 360p, meaning that your graphics should be 640×360.

Start off by opening a new 640 x 360 document in Photoshop.

Firstly, keep in mind that the seeking/controls bar at the bottom Youtube video will overlay your graphic when the user’s mouse is active over the video. Therefore it’s in your best interest to keep any text away from the very bottom of your graphic.

I will quickly demonstrate how you can create a training video based solely on static images used as slides. You can use an movie editor such as iMovie to put the slides together and export it to Youtube. Start off by selecting a dark shade of grey for as your foreground and black for your background. Choose the gradient tool, select the “reflected gradient” as shown below, and drag a gradient.

You should have something similar to this:

Next we’ll a title bar.In a new layer, select the marquee tool to drag out a bar at the top of your graphic.

Select a shade of grey and white as your foreground and background respectively. Insert another reflective gradient as shown:

Were going to make the left side of this bar red. This side will inform users what “step” they are currently on. Hold down the ALT key while the marque is still blinking and your cursor should change to a “negative marquee”. Drag out the area from the right end of the bar, resulting in it getting “unselcted”, leaving only the left portion of your bar selected. Neat trick huh? Choose two shades of red and drag out a gradient.

Next, create a new layer and drag it behind the title bar. This will be your “information box” where you can add text. I choose to go with a black and grey gradient, the result is shown below:

Add some text in, and a photo to aid your user, and voila. You have step one of your slide. Simply create as many slides as you need, and use a movie editor such as iMovie to put the slides together.

Stay tuned, our next tutorial will show you how to put together a movie in iMovie using still images. If you found this tutorial helpful please hit the Facebook Like Button !

Web Graphics vs Print Media

Most new designers fail to understand the difference between designing graphics for strict digital use (web graphics) as opposed to designing print media. Web graphics most commonly consist of banners, logos, web templates, icons etc. that will never see the light of day on paper. Print media on the other hand should be designed specifically for high quality printing. Some common items you may design in Photoshop and end up printing are business cards, flyers, advertisements, and letter heads.

DPI / Resolution

Failing to set the correct dots per inch (dpi), commonly known as resolution, before you start working on your design is the most common mistake designers make. When you open up a new canvas (document) in Photoshop by going to File > New, the first window that pops up has a field for resolution, which is usually set by default to 72 pixels/inch. This value is telling us that there will be 72 dots (i.e. pixels) for every square inch of the document. 72 dpi is ideal when viewing graphics on a computer screen, however when you are printing a design out on stock, 72 dots per inch is not enough, and will usually result in your graphic looking blurry and pixelated. As you’ve probably already figured, increasing the dpi will result in a higher quality image. For most printing purposes you will want to set the dpi to 300 pixels/inch to obtain a good quality print.

The downside? That X by Y dimensions image that you just entered into your document that took up say 80% of the canvas, will now only take up say 20% of it. Why? This is because you have set the document to contain more pixels for square inch, as such, that X by Y image is still X by Y in dimensions, but now has a much lower resolution compared to your high resolution document/canvas thus ends occupying only a smaller space.


This is shown the images below. The same stock images is placed in a 5” x 5” canvas. The first one is at 72 dpi while the other one is at 300 dpi. Notice also that the one at 300 dpi has a much larger file size.

Thus as you are starting to realize, to obtain high quality print outs, the images you use have to be of high resolution themselves, translating directly to higher dimension pictures. For example that 300 x 300 px image you pulled of a Google search will end up being a tiny little spec on your 300 dpi canvas. Sure you can expand the image, but you will just end up degrading its quality. The solution is to find larger images. For example, if you obtain an image off Google that is 2000 x 2000 px, it will take up more space and you most likely wont have to stretch it out. Google image search actually has a built in filter that will let you search specifically for larger files.

Dimensions

When making graphics for web, you usually set the dimensions in pixels. For print media however, you will want to set the dimensions based on the physical stock you will be printing to. So if your flyer is 6” x 4” you will want to set your canvas’s dimension to 6 x 4 in inches (plus the bleed margin which we will explain in the next section), not pixels. This is because after setting a higher DPI, the notion of pixels becomes irrelevant to document size, especially when you are printing it out. If you set the DPI to 300 as opposed to the default 72, your document will now have more pixels per square inch. Thus a 6” x 4” document at 300 dpi will have a larger dimension in pixels as opposed to a 6” x 4” document at 72 dpi which would have a much smaller dimension in pixels.


Bleed Margins

No printer in the world will print your design to the exact dimensions you specify. More than likely, you will lose some data at the edges of your document. This is compensated for by over printing and then cutting to the required dimensions.

To recognize the bleed margin there are two margins you will want to set up. The first margin is the cut line, which is the exact dimension of your media, and as the name suggests, is where the stock will be cut. The other margin is the safety line which is an eight inch in of the cut line. All important data such as text should be inside the Safety line.

Your Photoshop canvas will end up being an extra eight inch off the cut line (exact dimension) thus you will always add a quarter inch (0.25”) to the height and width of your canvas.
Lets take a standard business card which is 3.5” x 2” (exact dimension).

Canvas size: 3.75” x 2.25” (the dimensions to use when you create a new document in Photoshop)
Cut Line: 3.5” x 2”
Safety Line: 3.25” x 1.75”

To help you visualize all this while you are designing, you can set up rulers in Photoshop.
Start by creating a new document, and add 0.25” to the exact dimensions. Go to View > Rulers to turn on the ruler. You will want to insure that it is set on inches (unless you are accustomed to mm) by hitting Ctrl + K to open up the Photoshop Preferences window, selecting Units & Rulers and insuring the units is set to inches.

Next click within the ruler area (off the edge of the canvas) and drag out the rulers as shown:

Color Profile

Be aware, the colors you see on your computer screen will most likely not be the exact same colors you see on paper. This is for several reasons, and may even depend on what stock you choose to print it on. This is especially problematic for dark designs which may be viewable on a computer screen but will barely show on paper. Also, some printers may not pick up on lines in your design that are too thin. As a rule of thumb, always print out a sample prior to printing out large quantities.
The best color profile for printing is CMYK and should be set in the New window settings.

File Format to Export To

Although you have several file formats to choose from when it comes to exporting your design, the easiest format to go with is an Photoshop PDF. The problem with choosing an image format such as jpeg is that it is measured in pixels and as we explained earlier, depending on what resolution you choose the pixel dimensions will vary. Thus whoever is printing your image will not know exactly what physical dimensions you designed for. A PDF however will fix the physical dimensions to match what you defined earlier in Photoshop. With a PDF, pixels will not come into play.
To save a PDF, simply go File > Save as > and select Photoshop PDF in the drop down menu.

Start of by opening up the image you wish to turn into a sketch. The stock image we will be using is shown below.

Create three copies of the original locked background layer as shown. To make copies of a layer simply select the layer and hit Ctrl+J. We will rename them Layer 3, Layer 2, Layer 1 for simplicity.

Select the top most layer, Layer 3, and desaturate it by going to Image> Adjustments > Desaturate. Now duplicate this layer (Ctrl + J) and we will call it Layer 4.

While having Layer 4 selected, go to Image > Adjustments > Invert. Now set the layer properties to “Color Dodge”. If you followed everything correctly, the whole canvas should go blank white now.

With Layer 4 still selected go to Filter > Guassian Blur. Depending on the contrast of your image, you will have to play around with the slider to get the effect you desire. The further left you move the slider, the stronger the sketch effect. We found our desired effect at 8.

If you wish to have the sketch black and white you are pretty much done. You can tweak the Brightness and Contrast to darken/lighten the image. However, we are going to bring back some color.

Select Layer 3 and drop it’s opacity to 50% so you can see what you are doing with the layers below, you can fiddle with this opacity at the end if you desire.


Select Layer 2 go to Filter > Brush Strokes > Angled Strokes and play around with the settings. We used to the following settings shown below.

Next change the layer properties to “Multiply” and reduce the opacity to 80%. The result is shown below.

Now select Layer 1 go to Filter > Artistic > Cutout. Again, play around with the settings to get your desired effect, we used the following.

Our result so far is shown below

Now all that’s left is to add some finishing touches. Add an adjustment layer at the very top, to modify the Brightness and Contrast (if you don’t know how to do this read our Beginners Guide to Photoshop!).

And there you have it, a simply way to add an artistic touch to any photo!

We shall start of by introducing you to the “Layer Styles” feature in Photoshop. Basically you can overlay many neat styles on a layer such as gradients, shadows and glows to name a few. Start of by creating a new document 500 x 500 px. The button to open up the layer styles window is circled below.

But before we got ahead and open up the layer styles window, we need something on our layer! For this example we shall use text but mind you can apply layer styles on anything. Select the text tool and type out a name. For this tutorial we shall use the text: Tutorial Realm.
Note the text doesn’t need to be highlighted when you are going to add a layer style (unlike changing font size ect.. where you must highlight the text first). Once you have typed out your desired text, choose that text layer and then click on the layer styles button. A drop down menu should open up. You can click on any of the entries since once the popup opens you can navigate between different styles. For now just choose Stroke.

The Layer Styles Window should be as shown:

All the buttons on the left (circled in red) are the styles available. You simply click on the style you want to edit and the settings associated with that style will show up on the right. Also notice the checkboxes along the side, if you click on a style the checkbox will automatically get selected and the style will remain even if u navigates away from that style. So if you wish not to use a style after playing around with it, uncheck it! Currently we are on the Stroke style and the settings displayed are the ones associated with stroking image/text. So what is stroking you may ask? It is basically adding a solid outline around an image/text as shown below:

Pretty neat stuff. You can play around with the settings on your own but basically only two things you need to be playing around with are the colour of the stroke and the size of it.

Lets check out some of the other useful layer styles:

Colour Overlay
This is a pretty simple concept. It may seem redundant for text since you can change a text’s color using the secondary tool bar; but for layers containing shapes this as an easy way to change the color. The settings and effect are shown below:

Gradient Overlay
This once again it is a simple way to overlay a gradient on top of a layer. Double click on the color bar open up the colour chooser; then double click on the small little “box arrows” to choose the end colors of the gradient. The settings and result is shown below. (Make sure to uncheck “Color Overlay” (in the layer window) if you have used it in the past else the colour overlay will OVERLAY the gradient overlay!

Drop Shadow
This is a pretty neat little effect that gives your layer a 3d look. The settings and result is shown below:

Outer Glow
This feature speaks for itself and allows you to add a glow to your layer. Once again the settings and effect shown below:

That’s pretty much it with regards to popular styles used but feel free to play around with all the other styles. A reminder once again, layer styles pile up, so if you no longer want a layer style don’t forget to uncheck them in the layer styles window. You can also hide layer styles in the layers window. After you add layer styles you should notice that the styles appear under you layer in the layers window as shown below.

To hide a style you can simply click on the “eye” graphic across from it. You can also delete a style by dragging it into the trash bin.
Again, just to drive home the fact that layer styles are overlaid onto everything on the layer, rasterize the text you created earlier by right clicking on the layer and clicking Rasterize Type. Then grab the paint brush, set the foreground to a nice shade and pink and doodle away on the layer. You should get something like this:

What do you notice? It is not painting pink! Why? Because the layer styles are being overlaid over whatever you do on that layer. If you wish to see the pink underneath simply delete all the layer styles by dragging them into the trash bin.


So that pretty much wraps up layer styles. We shall now discuss some other common effective design tactics associated with Photoshop.

Brightness and Contrast
To demonstrate the Brightness and Contrast feature, open up a image that is on your computer into Photoshop. I will use the following stock photo I had lying around of a Toronto skyline.

To open up an image in Photoshop, go to File>Open and browse for the file. Once opened up it is IMPORTANT to remember that it is bad practice to work and make changes on the source file. So first select the marquee, drag out the area of the image you want (or to quickly select the whole image hit CTRL + A) hit CTRL + C to copy, go to File > New to open up a new canvas (one great thing Photoshop does is that it automatically detects the size of your copied region so you don’t have to edit the size of the new canvas!) and hit CTRL + V.


Note that the image is now on a new separate layer of its own, that’s the reason why we had to go through the steps above. There are other easier ways (such as simply duplicating the “Background” layer in the original) but we shall stick to this method to drive home the fact that it is bad practice to work on the original file and helps prevents overwrites. To see the effects of Brightness and contrast, in the Layers Window click the Layer Adjustment button and select Brightness and Contrast. This will add a new adjustment layer which is shown below (note the window will probably look different if you are using a Windows OS):

Playing around with the Brightness and Contrast will add great depth to your image but don’t use it to the point where it makes your image grainy and bad quality. Once you have set the desired Brightness and Contrast, you can go back and adjust it by double clicking the adjustment layer. Also remember, layer order matters here yet again. Any layers placed under the adjustment layer will have the Brightness and Contrast properties applied on it. Our result is shown below:

Layer Overlay Effects
Layer effects are usually great for text and blending images together. On image canvas you had from the previous step, create a text layer set to the colour to a shade of grey, we used color code: 5e5e5e.

To play around with layer effects simply click on the drop down shown in the image below and choose an effect. You can go through all of them to see what fits you best. We used an “Overlay” and this is the neat effect we got.

Note: changing the colour of the text also affects your effect! Try playing around with different text colours and different effects.

Opacity
Playing around with the opacity of a layer is a great way to change the transparencies of a layer. The opacity slider is shown in the picture below. Once again it is a great way to fade images and add gloss to text. A lot of our text tutorials involve playing around with opacities.

Hue/Saturation
By once again clicking the Layer Adjustment button in the Layer Window, you now select Hue/Saturation and you should get the following dialogue box:

This is a great way to create a black and white effect with a hint of color. Simply drop the saturation to the negative end. If you wish to add a shade of color, check off the “Colorize” checkbox and then play around with the top two sliders until you find the shade you prefer. Our saturated result is shown below:

And that’s a wrap folks. You are ready for the real world. Remember the best way to learn graphics is by experience. No one expects your first artwork to be magnificent but as time progresses you will pickup on elements of design that will help you become a pro. We hope this tutorial series helped you with those first few hurdles. Feel free to leave comments and browse our other tutorials to help you grow.

Have a look at other Photoshop Tutorials

So what are layers you ask? Basically they are exactly what they imply, they allow for users to create a “layer” in which they can doodle around in which is unaffected by changes to other layers. It’s a challenging concept to explain in words but is pretty straight forward once you understand it. Let’s do an example to help us understand how layers work.

Create a new document (we may refer to a new document as a canvas from now on) of size 500 x 500 pixels (you should know how to do this buy now!). The layers window should look something like this:

If you can’t find it, or if you accidentally close it, you can always retrieve it by clicking on the “Window” drop down menu at the top and selecting Layers (or simply hit F7!). The two main buttons you will need to worry about in the layers window are the “Add a layer style” button (the one circled in blue) and the “Create a new layer” button (the one circled in red). We will talk more about layer styles later on.
For now go ahead and click on the create a new layer button. You will notice that the layer window will update and another layer, default named “Layer 1″ will appear. It is important that you don’t work on the “Background” layer that comes up by itself; always create a new layer before you begin work! Click on the create a new layer button for the second time and you’ll notice that another layer will appear: Layer 2. Click once on Layer 1, and you will notice that it becomes highlighted in blue. This means that you are on Layer 1 and will be working solely on Layer 1. Layer 2 and the Background layer will not be affected by what you do.


Go ahead and choose the paint brush tool, set the brush size to 13 (remember, use the secondary toolbar to set the brush size!). Now double click on the foreground color box on the toolbar and set the color to red (move the vertical scroller to wiz through the color palette and use a mouse click to choose a specific shade).

Now simply move your mouse over the canvas (clicking down) and draw a simple squiggle. Now select Layer 2, change the foreground color to blue, and draw another squiggle in blue. You should have something similar to what is shown below:

There are two things you should take note of. First of all, in the layer window Layer 2 is above Layer 1. Secondly in the canvas we can see the blue squiggle is “on top” of or “above” the red squiggle. Does this make sense? Of course it does! Layer 2, the blue squiggle which is above Layer 1 in the layer window, is also above the red squiggle in the canvas! So what if we want to move the red squiggle above the blue one? Simple just go to the layer window, click and hold on Layer 1 and drag it above Layer 2 and drop it (the mouse play can be a bit tricky)! You should now have something like this:

And there you have it, the simple logic behind layers. Let’s get our hands a bit more dirtier though, click on the eraser brush (13 px should be fine) and with Layer 2 selected try put your mouse over where you see the red squiggle on the canvas and try to erase it. You will notice you cant! Why? Because you can only erase parts of the red squiggle if Layer 1 is selected since the red squiggle was created on Layer 1. If you select Layer 1 and then try erasing the red squiggle you will be able to do so. Note you can also select the Move tool to move the squiggles around the canvas.

All right all right, enough with the squiggles. How do we delete layers we no longer need? Simple! Select the layer and drag and drop them into the little trash bin icon located near the bottom of the layer window. Delete both layer 1 and layer 2 so we are once again left with the lone white Background layer.


Lets get acquainted with the other tools, starting off with the text tool. Simply select the text tool and click once anywhere on the canvas to insert text and start typing. You can also select the text tool and drag a textbox if you would like to type only within the confines of the textbox (this is useful when writing a lot of stuff). The thing with text is you don’t need to create a new layer before typing. As soon as you click an area on the canvas with the text tool selected, it automatically creates a new text layer. To access/edit a previously typed text layer simply double click on the corresponding text layer in the Layer Window. To change the font, color size ect, highlight the text and use the secondary tool bar as shown below. Also circled in the image below is the anti aliasing option for text. Most people forget about this option when creating text. Most times it is okay to leave it at “Sharp” but you will notice if you use really small fonts (and even pixel fonts) that the font appears blurry. In this case, change the AA to “None”.

Also notice something interesting with text layers. Try taking an eraser brush, and with the text layer selected, try erasing the text. Sorry! It won’t let you right? It will ask you to first rasterize the layer. So what does this mean? Well it basically means it will no longer be an editable text layer (i.e. you cant change the font ect..) but rather make it a “image”, a regular layer. You can also rasterize a layer by left clicking on the text layer in the layer window and selecting Rasterize. Once it’s rasterized you will notice in the layer window that it is no longer a text layer and rather just another regular layer.

The marquee tool is also pretty straight forward. Create a new layer and then select the rectangular marquee tool. Drag out a box of reasonable size. The marquee should be blinking as shown below.

This implies that you can only edit within the blinking region. Test it! Choose the paint brush tool and try painting inside the blinking area, it will let you. But if you stray outside the blinking boundary and try paint it will not let you. Painting the whole region with a paint brush can be tedious, so to quickly fill up the region with a color, simply choose the Fill Paint Bucket tool, choose the colour you want to fill with, and simply click once anywhere within the region.

You may also delete certain parts of an image using the marquee tool. From the above step you should now have a rectangle as shown above, if we want to delete a square from this rectangle we can do this by simply drag another small square using the marquee and hit the delete key (Tip: hold down the Shift key when dragging the marquee to make a square). The result is shown below. If you were to place something behind this layer, it will be visible through the square “hole”.

So there you have it. You now have a strong foundation in the fundamentals of Photoshop. But like anything in life, you need to know how to apply what you have learned. The next tutorial in this series will show you some well known tricks and effects in Photoshop that all designers should know! Click below to read on.

Continue reading the next part of this tutorial:
Tutorial Realm’s Beginner Guide to Photoshop Pt.3: Essential Effects

This tutorial uses Adobe Photoshop CS5 on Mac OSX, but not to worry if you are one of those who are rolling around with an older version such as 7 since Adobe has a very good habit of keeping the learning curve associated with a new version at a minimum. Aside from small visual differences there is not much difference between Windows and Mac versions of Photoshop either. So without further delay, let’s get started!

Before you can start working on anything, you will need to open up a new document, just as an artist will need a new canvas. Click on File> New. You should see the popup below:

The only things you have to worry about for now is the width and height of the new canvas. Everything else should be at the settings shown above. In the digital world, pixel’s are the unit of measure. Although you can choose the size of your canvas in inches/ft ect.., pixels is preferred. Also note the resolution is at 72 DPI (dots per inch). This is the resolution preferred when creating images for web usage i.e. banners, graphics, ect. If you are creating graphics for print, you would want to use a much higher resolution (300 dpi) in order to obtain a high quality print out. For this tutorial lets start of with a 500 x 500 px (pixel) canvas. Click on OK to create it.
You should now have a nice white canvas to work with. For now however, lets switch gears and talk about the toolbar. Your tool bar should look something similar to the image below:

Here is a quick explanation of each tool and what they do. The important tools, which we will commonly use, are listed in bold. Don’t worry if you still don’t understand what exactly they do, we will go over examples of how to use the important tools later on. Also on some of the tools you can click and hold on the little triangle at the bottom corner of the tool icon to switch it with a similar tool.

1. Marquee Tool – A tool which allows you to select parts of an image so u can for example: duplicate them or drag them to a different place.
2. Lasso Tool – Instead of having a pre-defined shape for the marquee you can make your own shape with the lasso tool.
3. Crop Tool – Used to crop a document to make it smaller (or bigger). Once you crop it everything outside the selected region will be deleted.
4. Healing Brush Tool
5. Clone Stamp Tool
6. Eraser Tool – Pretty much speaks for itself.
7. Blur Tool – Can be used to blur images when needed.
8. Pen Tool
10. Hand Tool
11. Move Tool – Probably the tool you will be using the most. Used to move/drag items that are selected (ex. Part of an image selected via the marquee) or to move layers around.
12. Magic Wand Tool – A great tool to help you select parts of an image which have the same color. For example, a person is standing in front of a white backdrop. By using the Magic Wand tool and clicking anywhere on the white are you will automatically select all the white area surrounding the person leaving the person unselected. You can now for example change the color of the backdrop!
13. Eyedropper Tool – This tool helps you pickup a specific color from an image. For example, by choosing the eyedropper and clicking on an image of a green sweater, you will get the specific shade of green you clicked on and it will be saved in the foreground color box.
14. Paint Brush – This one speaks for itself.
15. History Brush Tool
16. Paint Bucket/Gradient Tool – This tool is used to fill a selected area with a certain color. Also by clicking (and hold) on the little triangle you can select the Gradient Tool. This important tool is used to create color gradients, a popular element in design.
17. Dodge Tool
18. Text Tool – This is yet another tool that speaks for itself! You simply drag out a box and away you type!
19. Rectangle Tool
20. Zoom tool – This tool can be used to zoom into an image when fine detail editing is required. You can zoom out by simply right clicking on the image (with this tool selected of course) and clicking Zoom out or by selecting “Actual Pixels” which will return you back to the regular size of the document.
21. Foreground color – You can double click on this box and select a color you wish to use. The color selected in this box will be used by the paintbrush, Paint Bucket tool ect… In the “#” feild you can enter an HTML color code.
22. Background color – The color selected in this box is used as a background color. It only makes its presence when you crop a canvas larger than it’s original size, the extra space will take on the color that is selected in this box.


You will also notice that each time you select a tool, a “secondary toolbar” with features associated to the tool you selected will appear at the top of the page. For example, below is the secondary toolbar that appears when the paint brush is selected.

So there you go, a 1000 ft overview of all the tools Photoshop has to offer! With that all send and done, lets see how you can practically apply all these tools.

Continue reading the next part of this tutorial:
Tutorial Realm’s Beginner Guide to Photoshop Pt.2: The Layers

Start of by creating a new document, 500x 500 px should be enough. Grab your text tool and write the name of your company (or a dummy name if you don’t have one). One important thing to note when making web 2.0 logos is that choice of font is critical. Even if you get the style effect down right, if you don’t have the right font, it will not look good. Even if a font works well for certain text, it might not look good for others so always play around! With that said, you can always expand your font archive, check our Links and Downloads page for good websites. For this tutorial we used the font “Franklin Gothic Demi Cond”.

After you choose your font, we need to make some touchups to the typography. Open up the “Characters Window” by going to Window > Characters. Now before you go on start playing around with this box, be warned, if you make a change Photoshop will not revert to the previous settings unless you change it back. So if you make a change, don’t forget that you did so because all your future typing will be affected by the changes you made! With that said, lets play around with the horizontal character spacing. A key component of web 2.0 design is compactness. Nice smooth fonts that fit together nicely is a must. With that said we squish up the characters by decreasing the horizontal spacing value till you find a level which you prefer. Our results are shown below.

Now that we have the bare bones, lets get down to business and create the glossy gradient effect that we want. Open up the layer styles popup by clicking on the stylish “f” button on the layer window and choosing Gradient Overlay. Double click on the color bar to choose the colors for your gradient and set them as shown below. For the effect we are about to do it is nice to have the darker of the two colors on the top, since we will be adding a gloss layer that will lighten it up and make it more visible. We choose the following two colors for the gradient:

Next click on the Outer Glow text and use the following settings. Note depending on the size of font you used you may need to either lower/higher the size of the outer glow since we don’t want too much of it. The color is set to black by the way.

Next make your way over to the Stroke feature and use the following settings. Once again you may need to lower/higher the size of the stroke so that the outer glow barely shows behind the stroke. This gives it that nice floaty appearance.

Almost done, looking pretty good already eh? Now lets add that gloss to give it a nice glassy touch. Select the rectangular marquee tool, hold down the CTRL key and click on the font layer. The font should now be selected by the marquee. Create a new layer (by clicking on the Create a new layer button in the layers window); and on the toolbar, and set your foreground color to white. Select the gradient tool and using the secondary toolbar, choose the gradient style shown below.


Now, with the outline of the font still selected by the marquee, on the blank layer you just created drag down the gradient from the top of the text till some where around midway down to create the following effect:

Now choose the rectangular marquee and delete the bottom half of the gloss you just created. Play around with the opacity of the gloss layer, we set it to 50% as shown below:

Lets add a slogan underneath the text to create a logo. The smaller the font is, the harder it is to get a nice floating effect so stick to plaint text with a color that blends nicely with the existing text. Using the character window, horizontally space out the text so you get an effect similar to what is shown below.

We still see that white space exists to the sides of the slogan so lets select the brush tool (size: 1px) and draw a line as shown (on a new layer ofcourse).

Select a large soft eraser brush to fade off the ends of the line and use the marquee to delete the section of the line which goes over the text and your done!


A great text effect perfect for many web 2.0 logos.

If your App World icon has disappeared from the home screen, follow these steps to get it back:

Step 1
Go to Options > Applications and select “Add-ons” from the drop down list. See if App World is on that list. If it is, select it and Delete it.

Step2
Use your phones browser to navigate to http://us.blackberry.com/apps-software/appworld/ and download the latest version. After downloading and installing you will be prompted to reboot. Do so.


If you are having trouble downloading Apps and are getting error messages such as the “An error has occurred. Please try again later” follow these steps:

Step 3
Go to Options > Date/Time and insure that you have the correct Time Zone selected and also insure that Set Time is set to Automatic.

Press the blackberry button and select save. Do a battery pull to reboot your phone and see if this has fixed your problem. If not, follow the next step.

Step 4
Navigate to your Email Settings by going to Setup>Email Settings and logging into your BIS account. On the screen that follows showing all your email account, hit the Blackberry button and select Service Books. Depending on your OS, you may have to follow slightly different steps, see this Knowledge Base article KB154502 if you cant find it.

Do a battery pull to reboot your phone and see if this has fixed your problem. If not, follow the next step.

Step 5
Launch the App World application by clicking on the icon. Now hold down the “ALT” button and type in “R” “S” “T” (i.e. push the buttons R, S, T) to clear the app world cache. This will cause your App World to close. This will not remove the uninstalled apps in the App World list, but does the next best thing and clears the App World cache. Launch it up again and see if you are able to download now.