Understanding Resolution and Frame Dimensions – Video, Web and Print

Screen_Resolution_DimensionsResolution seems to be a subject that baffles a lot of people with different platforms (TVs, monitors, mobiles) different mediums (video, print, web) and also different pixels per inch which effects the overall size and quality of your image.

Let’s start with pixels per inch and keep it basic. Pixels per inch is the amount of small dots of color per square inch. As a rule 300 pixels per inch is the bare minimum for print while 72 pixels per inch is suffice for web based output, admittedly as PC monitors resolution has increased over the past few years I often find myself producing an image with a 150 px per inch in order to produce the better results. It all depends on your intended output. For video output I did a few tests in order to confidently advise you for best results. I created two identical images in Photoshop with the same physical dimensions, I used the Film and Video presets found after hitting new. I produced one at 72px and the other at 300px and saved them out as a png, I then brought the two images into Adobe Premiere Pro in separate time lines, I exported them using the same full quality DV setting and then oped them up side by side and played them. I asked my colleagues which they thought was produced with the higher res images and they consistently couldn’t identify it. In this case it seems that the resolution of the input file does not noticeably effect output.

See (URL Coming Soon)… for more information on export settings using Adobe Media Encoder and other such programs.

Print Resolution
With print resolution as mentioned earlier, 300 px is the minimum px per inch for a decent quality. When setting up your workspace you should be concerned with the physical size of the output, for example A4 is 210 mm x 297 mm with 300 px. Photoshop has presets for most print outputs so have a look and familiarise yourself with these.

Web Resolution
When I began studying my Design for Digital Media Minor, the standard size to construct a website was around the 800 px wide. The resolution of computer now vary and this size meaning that the websites began to look very small in the browser. By analysing google analytics user traffic it soon became obvious to design you site to a greater width. Today popular website width sizes are above 1000 px wide although many more dynamic CSS driven layouts will be sized based on a percentage of the browser window for consistency. As mentioned before you graphics should have a pixel resolution of 72 px per inch and above.

Screen Dimensions
640 x 480
800 x 600
1024 x 768
1280 x 800
1280 x 960
1600 x 1000
1680 x 1050
1920 x 1080

Video Resolution and Dimensions
There are two aspects to take into account here. The production of graphics for your video projects and the resolution you wish to output your video for the intended viewing platform. The production of graphics I touched upon earlier so let’s get to know video dimensions. The landscape has changed recently with the emergence of multiple mobile platforms alongside the popularity of High Definition on the consumer market.

Television Dimensions
There are 3 main television dimensions you should be aware of, there are variations but combinations i.e. widescreen (also see …) but use these as a starting point.
DV Pal, 720 x 576
Consumer HD, 1280 x 720
Pro HD, 1920 x 1080

Blu Ray and HDTV Dimensions
720 x 576
1280 x 720
1440 x 1080
1920 x 1080

Other Device Dimensions
There are many other devices now on the market that are all geared up to display video so often we might want to output at a format suitable for these.
Mobile Phones (3GPP)
128 x 96
176 x 144
320 x 240
640 x 480

iPhone
450 x 360
600 x 480

iPod
640 x 480 Large
320 x 240 Small

Sony PSP
320 x 240
368 x 208 High Quality

Other mobile frame dimensions, 176 x 208, 176 x 220, 208 x 320, 240 x 320 and 352 x 416.

Web Video Dimensions
Youtube
SD 640 x 480
Widescreen HD 1280 x 720
Widescreen SD 640 x 360

Myspace Video
320 x 240

Yahoo Video
320 x 240

(Dimensions may vary slightly)

Aspect Ratio
At this stage I just want to distinguish between what i mean by dimensions and how it differs to aspect ratio. All the dimensions I have touched upon up until now have referred to a 4:3 aspect ratio, this means for every 4 vertical pixels there are 3 vertical pixels. Most will have come across widescreen by now in their digital lifes and this has an aspect ratio of 16:9.

Adobe Photoshop – Cropping, Resizing, Re Framing and saving images for web tutorial

Open your image File > Open and browse to your file

Cropping, using the crop toolCrop_Tool
If you require a thumbnail or web specific sized image, best practise would be to use the Crop Tool.

Set the size in pixels that you would like your final image to be  using the toolbar at the top of the photoshop page. Be sure to update the images intended resolution, for web you would usually choose 72 pixels/inch.

Crop_Toolbar_Settings

Example, I chose 150 px X 150 px

Next, go to your image, left click (hold) and drag your cursor over the section of the image you require.

Cropping_Windsurfing_Image
Double click on the highlighted area and the image will be resized to you new proportions.

Marquee_Tool

Cropping using the marquee tool – re framing

Select the Marquee tool from the toolbar.


Go to your image and again, left click (hold) and drag the curser over the section of the image you would like to keep.

Cropping_Windsurf_Image
Once you have selected the area, choose Image > Crop and the image shall be cropped to your chosen selection. If it is still the wrong dimensions see below.

Resizing the image
If your image is correctly framed and the proportions are correct simply resize the image.
Click Image > Image Size

Resize_Image

Constrain_Proportions
Make sure you check the box Constrain Proportions otherwise you will distort your image.

Tutorial requested by Jane Bassett of www.2xs.co.uk Windsurf and Kitesurf online shop.

Introduction to Adobe Photoshop – The Photoshop Workspace & Tools

Open PhotoshopPhotoshop_Window
Using the menu along the top of the work space go to WINDOW and untick all of the palettes except for OPTION and TOOLS

You will now open a new document. FILE > NEW > and have a look at the dialogue box. First of all give the document a name. Then select DEFAULT PHOTOSHOP SIZE from the Presets menu. Set the Colour Mode to RGB.

Photoshop_New

Place the mouse on the bottom right corner of the document. Click and drag on the small square to resize window.

Drag_Window_Corner

Now have a look at the TOOLS palette to the left of the workspace. Holding the mouse over a tool should give you a TOOL TIP. Try it for each tool to see what they do. The TOOL TIP will also give you a keyboard letter. This is a KEYBOARD SHORTCUT. Try changing the tools by using the KEYBOARD SHORTCUTS.

Photoshop_Toolbar

Click the mouse on a tool with a black triangle in the bottom corner of the square. Hold the mouse down and a context sensitive menu will appear showing you more options for the tool.

Photoshop_context_sensative_menu

foreground_backgroundTowards the bottom of the tools palette there should be a BLACK and a WHITE square. This represents the foreground and background colours, as they are currently set.

Double click the mouse on the top square. This will open a SWATCH palette. Using the mouse click in the coloured area to change the foreground colour. Experiment and see what colours you have available to you before you choose one. Then click the mouse on OK. Now you can see that the foreground colour square in the tools palette has changed colour.

Color_Picker

Now find the BRUSH TOOL and click on it.New_Brush
Notice the OPTIONS palette below the menu at the top of the workspace changes. From the OPTIONS palette you can change the brush attributes such as size, hardness and so on. Try painting in the canvas, first with one brush size then change to another. Try changing the foreground colour and the brush shape and draw an abstract design on the canvas.

Brush_toolbar

Special_Effect_BrushesWhen you drop down the BRUSH menu from the options palette you will notice a small black triangle to the right of the palette. Click on this triangle and you will drop down a menu of further choices. Try some SPECIAL EFFECTS brushes. What happens when you change the OPACITY of the brush from the options palette? Now you will select part of the image. Find the RECTANGULAR MARQUEE TOOL form the tools palette.

Marguee_Tool

Click the mouse over the canvas and holding it down drag out a rectangle. This should appear as a dashed line around the area you have selected.

Move_tool
Changing the tool to the MOVE TOOL click on the area you originally selected and drag the selection to one side. Try this a few times.

Undo_Step_BackwardNow use the UNDO command by going to the EDIT menu at the top of the workspace and dropping down to STEP BACKWARDS until the picture returns to how it was before you started using the select tool. Change the MARQUEE TOOL to an ELIPTICAL MARQUEE and make another selection. Use the CMD+C keyboard shortcut to copy the selection. Now use CMD+V to paste the selection. Changing the tool to the MOVE TOOL click on the area you originally selected and drag the pasted selection to one side.

Layers_PanelNow go to the WINDOW menu at the top of the workspace and drop down the menu to LAYERS and make sure this item has a tick by it. Have a look at this palette. It is a very important palette that you will learn to use a lot. To understand LAYERS think of each layer as a sheet of glass laid over each other. At the moment you should have two sheets of glass, or layers in the LAYERS PALETTE. The bottom layer is named BACKGROUND and the top layer is called LAYER1.

Use ALT+CMD+Z keyboard shortcut to step backwards. The top layer will disappear. When you cut and paste from an object Photoshop will automatically paste the selection to a new layer, this is what you have just deleted. Now use the SHFT+CMD+Z to step forwards. The LAYER reappears. Put the mouse over layer 1, click and drag it down to the dustbin at the bottom of the layers palette. This is another way of DELETING LAYERS.

Create_New_LayerIn a similar way you can create a NEW LAYER by clicking the mouse on the symbol of a turning page to the left of the dustbin in the layers palette.

Make sure the new LAYER 1 is selected. Now draw in the canvas as before. Click the mouse on the EYE symbol on the left of the Layer 1. This turns the layer off.

Opacity

Now try using the OPACITY control in the layers palette. This changes the opacity of the layer you have selected. There are many other ways of changing the ways in which layers can be blended together. See if you can find some of them.

Select_LayerCreate another layer as before and now paint in this one. Using the mouse drag the new top layer so it swaps places with Layer 1. In this way you can change the order of layers.

Close this document by using the CMD+W keyboard shortcut.