Photoshop | Glenn Ward

Understanding Resolution and Frame Dimensions – Video, Web and Print

Resolution 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.

VMWare vs Bootcamp – What is best for running a Windows Operating System on your Mac?

Unfortunately, though I tried to avoid it, I do have a need for both Microsoft software as well a Mac based software, both at work and at home. I am fortunate enough to run two different set ups for running windows on an Apple Mac machine. At work I have a VMWare environment known as VM Fusion running Windows XP and on my home MacBook I have Windows vista running on a partitioned part of the drive, set up using Apples Bootcamp which comes pre installed on the Mac. For both situations you will need a working copy of windows.

VMWare Fusion Environment
The VMWare environment essentially loads a program and within this program loads the Windows operating system. All programs such as Microsoft Office work as usual within the environment. Fusion also has a handy little feature known as Unity which hides the VMWare surround displaying you windows programs in much the same way as you mac software. If, for example you minimise Word it slinks down to the Dock and not the Windows taskbar. If you take the time to set up VMWare Fusion you can also conveniently save down your files to convenient places within the Mac system so as to avoid the need to drag and drop files between the operating systems. We have VMWare fully integrated on the company network which means full support from the IT department.

Bootcamp
Bootcamp is relatively easy to install, it happens in two stages. First, you partition the drive, then you install your windows operating system on the partition. The benefit of running the Windows OS separate to Mac OS you would think would be less of a drain on resources but I have to say that when I boot up in Vista the Apple Mac hardware reacts in a completely different way. The fan kicks in pretty early and the system gets hot. Granted the speed seems to be good but if I’m honest with the processors and ram I am operating with I don’t think I’d notice a difference in speed between my windows programs running in Bootcamp and the windows programs running in VMFusion, the downside being running two operating systems at the same time. The main disadvantage is the fact that the two are separate, you can create a drop box to pass files between the two setups as you can see the partitioned drive from each system but it means rebooting.

In summary, if you are prepared to folk out a little extra for a VMWare licence it is well work it. It just means a more seamless work flow between applications. If you want to copy and paste from a window in outlook to Photoshop you can do, if you want to drag and drop from your windows desktop to an application you can do. As a time saver and for ease of use I’d say VMWare Fusion is the winner.

1.1 Introduction to Adobe Flash – The Workspace and Tools

The Flash Workspace

I know what it’s like to open a program for the first time and be overwhelmed by all the windows so I’m only going to explain what is necessary to get started. Fortunately if you are familiar with Adobe Photoshop or Dreamweaver the rest will begin to come clear as you begin to work with flash.

The Stage and Properties Inspector
The white square in the centre of the screen is known as the Stage. As you have nothing on the stage, tale a look at the properties inspector (top right) it will currently should the Stage properties. The main Properties you will be concerned with is FPS (Frames Per Second) The Size of the Stage, default is set to 550 x 400 px, you can alter this buy clicking edit. Also the Stage background color, set this to whatever best suits your intended output.

The Timeline
Next, lets take a look at the Timeline, as you will see your first layer is pre populated. For those familiar with Photoshop, layers can be stacked on top of each other and can also be sorted in folders. The main difference here is that each layer has a timeline made up of keyframes. Each keyframe is like a page in a flick book, you will notice the counter running above the timeline, if your FPS is set to 15 you quickly be able to calculate each second of footage.

There are three tools for operating the timeline and layers these are from left to right. New Layer, New Folder and Delete.

The Library
The library can be found in the bottom right of the workspace and is used to locate all of your imported graphics, imagery, sound and video clips. You can drag and drop these assets to the stage from the library.

Ok that’s enough to get started, much of the other windows Will become apparent as you begin to work with Flash.

Introduction to Drawing in Flash
Things to Remember #1 – when drawing in Flash only place one ‘object’ in a layer – treat it as if you were drawing on separate layers of acetate. For example – sky (Layer 1), grass (Layer 2), sun (layer 3), tree (layer 4) etc…

Start drawing and see how shapes, lines and fills work in Flash. Save all your experiments to your journal.

The Toolbar
Click on the different icons to see what each tool function does. Whenever you click on a tool you will notice it’s properties appear as icons below the Tool Bar. Make sure you click around to experiment with these so you can gain an understanding of Flash’s functionality.

Arrow: (Selection Tool) This is used for when ever you are not using any of the other tools. It selects individual objects or frames or a marquee for selecting multiple objects. It operates the tool bar and menu systems. Etc.

Subselection Tool:

Brush: The Brush tool is not unlike the pencil but it allows you to create thicker objects for freehand drawing.

Dropper: Use the eyedropper tool to copy fill and stroke attributes from one shape or line and immediately apply them to another shape or line.

Eraser: Pretty self-explanatory really..

Lasso: This is used for selecting single or multiple objects in hard to reach places by allowing you to draw a line, which then becomes the selection.

Line: This tool does what the title suggests. It draws lines. Useful for drawing polygons and other weird shapes the Oval and Rectangle tools can’t deal with.

Pen Tool: Allows you to draw very precise lines vector lines and curves for filling

Magnifier: You will be able to zoom in on your stage and objects with this tool. Holding down the “Alt” key will change the pointer to a “minus” sign. This will enable you to zoom out.

Paint Bucket: This will fill objects with a colour of your choosing. Ink Bottle: This tool creates lines around objects. For example, after selecting the tool and clicking on a circle object it will create a circular line around it. This can then be turn into a separate object.

Pencil: This tool draws freehand lines. Some bright sparks at Macromedia have granted you the ability to straighten and smooth the ravages of your unsteady hand. Have a play with this by choosing Modify> Curves> …

Rectangle: Another useful tool and you guessed it! It draws squares. When you draw one it will create a border too if you have to border colour selected. Clicking on the border once and it will only highlight one side. A double click will highlight all four sides. Oval: A very useful tool, which allows the designer to create circles and ovals of any size. Remember: When you draw an oval, Flash creates a border around it if you have a border colour selected. So if you don’t want it there either turn the border colour off or click on the border of the object, this will highlight the border, and delete it. (These borders can be useful in your design)

Text: This tool allows the designer to create text or text fields. Fill Transform tool; Adjusts the direction and angle of a gradient or bitmap fill

Free Transform tool: Allows you to rotate, scale or skew a selected object.

Hand Tool: Allows you to quickly move around the stage.

Deco Tool: Fills the stage with annoying patterns, useful for almost… nothing!

3D Rotation Tool: Exactly what it suggests but will not be needed at the moment.

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 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.

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.

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

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.

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

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 Photoshop
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

Towards 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_Brushes When 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_Backward Now 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_Panel Now 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_Layer In 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_Layer Create 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.