Photoshop Essentials Course with Anmoal Thethi
This course takes place at Sir Jonathan North Community College in Leicester, UK. It is a 10 weeks course. Most learners on the course have already done a previous course in Dreamweaver, Flash etc. or have some experience with a graphics programme such as Paintshop Pro.
The College is sophisticated in its equipment and computer needs. The machines are all Apple Mac large screen units with dual boot facility into Windows 7 by, holding down the Alt key during the boot process. The keyboards have an USB port, which is very handy. If one is used to Windows XP it may take some time to get around Windows 7. The computers are loaded with Photoshop CS5, which is used throughout the course. It may also take some time to get used to CS5 if one has been working with a lower version previously as one has to adjust to the new additions, improvements and new terminology also.
The first session was an introduction to the course. Useful resources are the CS5 Training Manual in the Missing Manual series (816 pages), the Adobe CS5 help file (613 pages) and Adobe's What's New in CS5 manual (16 pages).
That the Photoshop desktop can be customized in a number of ways. For the course we would mostly work with the modified Design desktop layout, which includes the Layer Comps from the Windows menu but should also include the Swatches, Options, Tools as well as the Layers panels on the right. All these are accessible from the Windows menu.
Working with the many options in Photoshop can make repetitive tasks very time consuming. Setting up some keyboard shortcuts can therefore be very helpful. The Keyboard Shortcuts are under the Edit menu, which has the shortcut Alt+Shift+Ctrl+K. Within the shortcut menus one can for instance select the File menu to see all the available options. Under File Info one can re-assign the shortcut to Ctrl+W for instance as the File Info menu is frequently used. It is normally found under File > File Info. If the shortcut is already in use one has the option to overwrite it with the new shortcut. One can also set up a shortcut for New Layer Based Slice with Ctrl+, which is normally found under the Layer menu. Last not least these new shortcuts need to be saved either under the default set of shortcuts or one can create an entirely new set of shortcuts.
Another important topic is setting up Guides, which help one in the composition of ones photos or layouts. They become available under the View menu, View > Rulers. Once the rulers are visible one can right click in the ruler area and select the measurments such as Pixels, Inches, Centimeters etc. To use the guides one can drag them from the ruler area and place them anywhere on the composition. To remove the guides one can either drag them back into the ruler area or alternatively select View > Clear Guides, which clears all guides.
A very useful tool in web design is Adobe's Kuler, which is accessible in CS4 under Window > Extensions > Kuler or from the Kuler website. It is a very useful tool for working with colours.
What is wireframing? A full composition of a webpage in Photoshop and a wireframe are on the opposite side of the spectrum. Is is good practice for a web designer to start with a wireframe while discussing the project with a potential customer and then eventually move more and more towards a full composition in Photoshop. A wireframe is an outline of a web page with certain elements in pre-defined places such as a header, a footer, a content area, a graphic etc. If these items have been agreed with the customer one can then move towards filling in more detailed areas, colour, hyperlinks and all the other small details of a fully functional web page and design.
It is always good practice to spent enough time on the planning process rather than jumping into the actual design and coding work. There is a Firefox plugin (Web 2) for a wireframe available called CodingCereal. Another sketching and prototyping application for Firefox is the Pencil Project. It is available as a Firefox addon or a stanalone application. Pencil 1.0.6 is also available from the Firefox ADD-ONS page. A very simple wireframed page could be thought of as in this example. A more advanced or last stage wireframe in Joomla might look like this. There are a number of YouTube videos available on wireframing with Photoshop.
In our next discussion we will focus on colour, Adobe's Kuler, Swatches, how to create ones own swatch library, what are websafe colours, selecting colours in colour picker, other colour selecting methods and working with custom swatches. We also want to explore how to incorporate a Wiki into a website. A Wiki is another great way of driving traffic to a site. Furthermore we want to produce two types of wireframes from a web page, one basic one and one in an advanced stage. We want to also explore how to convert non-websafe colours to websafe colours. Photoshop will greatly help us in this by finding the nearest websafe colour.
One way of producing an image with websafe coulours is Photoshop's Save for Web & Devices command, which can be found in the File menu. The shortcut is the triple finger +S key combination Alt+Shift+Ctrl+S. This lets you safe your graphic in various formats such as JPEG (Low, Medium, High, Very High, Maximum), GIF, PNG and BMP. It also provides one with a preview of the various formats along with file size and download time information at various speeds.
Another way of using websafe colours is by using the Web Color Sliders in the dropdown menu of the colour palette. This can be set to:
- Greyscale Slider
- RGB Sliders
- HSB Sliders
- CMYK Sliders
- Lab Sliders
- Web Color Sliders
There is also an option Make Ramp Web Safe. This option can be accessed by right clicking in the Colour Bar. Moreover, there is a square icon and a B next to it in the left bottom part of the Colour Palette. By clicking this icon, Click to select web safe color, Photoshop gives you the nearest websafe colour of your selected colour. To test this function one has to have a look at the colour codes on the right. When clicking the Click to select web safe color icon the icon disappears and the selected colour is automatically adjustd to the nearest websafe colour.
Another setting to explain is in the Color Picker window, either for the foreground colour or the background colour, namely the H, S, B values given in percentage.
- H = Hue
- S = Saturation
- B = Brightness
In this Color Picker Window there is also the icon for Click to select web safe color. It is a good idea to use this tool for webdesign work. Regarding the discussion about whether websafe colours make a difference I came across an interesting article by Nathan Segal, in which he discusses a range of variables when working with colour such as ones computer screen, graphic card, room lighting and even wearing bright coloured clothing that could reflect in the computer screen and thus affect ones colour perception.
In dealing with a prospective customer it is essential to produce a wireframe comp and have it signed off by him. This gives one a clear framework to work with. It is part of a project management. A starting point may be a simple hand drawn sketch to agree where to place certain elements such as a header, footer, a side bar, a menu bar, how many columns and a text area onto the page. All this helps in managing customer expectations. If one is expert and experienced one can even work out an hourly wage at such an early stage of a web project. A good example for an excellent and balanced page layout is the BBC's website. It may be worthwhile to remind us how easy it is to scan a web page. It will help if a text area has been broken down into paragraphs. Web elements such as bullet points and the use of bold or italic text is also very helpful. It is not advisable, however, to underline words as this can be confused with hyperlinks.
When getting into a more detailed design one could work with what is called the 960 Grid. This grid is based on an external CSS style sheet and every web element is designed according to the 960 grid rule. A good reference in this regard are the w3school's CSS Tutorials. Regarding browsers there is much competition out there. Some say that Google Chrome for instance runs faster than other browser. It can also run as a standalone from a USB dongle. Unfortunately different browsers render things differently. Therefore one must test a web design in a number of browsers.
When making a detailed comp one could for instance use invisible tables even though the use of tables have today been mostly abandoned in favor of DIV containers and CSS styling. When working with tables one should remember the difference between padding and margin. While padding defines the space between an image for instance and the cell or table border, the table margin defines the space between two table cells.
When working with images one should remember that Photoshop's own PSD format is an uncompressed and loss-less file format contrary to compressed picture formats such as JPG, GIF and PNG. BMP bitmap files and TIF files are also uncompressed file formats.
A helpful tool for a web developer might be a pixel ruler in order to place pictures and other web elements exactly. There are various programmes available such as a 30 day free trial from spicebrains, a free pixel ruler from Mioplanet and a free Firefox Addon.
Based on the 960 Grid one could draw a wireframe comp in PowerPoint and then convert it to a PDF or image file. Unfortunately older PowerPoint versions don't include the Save As PDF feature. We have therefore done a Printscreen copy of our PowerPoint comp, brought it into Photoshop and saved it as a JPG file. Another limitation of PowerPoint is that it works best with slides in landscape format, which may make it difficult for comps which are in A4 portrait format because they will get significantly smaller on the screen. Our purpose for doing the PowerPoint wireframe is therefore mainly to show the exact measurements of the comp along with its various elements in their respective locations. We will need that later for our full and detailed comp in Photoshop. Click here to view the PowerPoint comp with its exact specifications but note that the table cells should be square because the images we will insert later into a more detailed comp will also be square. However, for measurement purposes this will do for the moment.
- Main heading
- Short paragraph of text
- Table with 3 images in GIF, JPG and PNG format
Getting more specific than the first wireframe scetch we have worked out some measurements which will help us for our final wireframe comp in Photoshop. Here is a good resource explaining in detail how to construct and use a wireframe comp. Another useful resource is the following article on optimizing images for the web with Photoshop. Click here to see a wireframe comp in Photoshop with original measurements. You can also download the original Photoshop file below. The table has been drawn in Photoshop using the Rectangular- and Line Tool. Here is a good tutorial on how to do this.
In this session we learn how to put our wireframe comp into practice using Dreamweaver. We have already done this for you, here is our result, and here is how we have done it. Firstly we have created a centred DIV container styled with CSS. See a nice and short tutorial how to do this. The trick in centering a DIV container is that we must give the container a width (700 px in our case) and set right and left margins to auto. This is done in the attached external style sheet, session_4.css. It is the standard technique for centering a DIV block using standards-compliant CSS. Please see the attached style sheet for the detailed code.
To learn more about CSS please see What is CSS from w3schools and CSS and DIV Tags, which also explains how to link the CSS to our HTML document. To place a DIV tag in Dreamweaver we can either enter it manually in Code View or go to Designer view and click on Insert Div Tag in the Layout menu.
If we place our cursor at the beginning of a text paragraph and click Insert Div Tag a dialogue box opens and asks us whether we want to place the Div Tag At Insertion Point, Before Tag etc. If we, however, select the text of the paragraph and then click Insert Div Tag we get the option Wrap around selection. This is the option we want in our example. It is a good idea to keep an eye on our Code View. It will reveal to us what Dreamweaver does when we select certain options. For convenience we can also check in Split View and see the code as well as the design simultaneously in a split window. All what Dreamweaver does is enter a Div Tag, <div id="content"> along with its ID and place an end of Div Tag, </div>, at the end of the selected paragraph. The code is that simple that it seems to be easier to enter the code rather than work with the Dreamweaver interface.
The same is true for the style sheet, session_4.css, which we have attached to our HTML page. After the first entry on the style sheet, which gives us some information on the character set used like utf-8, we see our first entry, #content. This is our Div Tag with the ID content. Now we are able to style it in a multitude of ways, each placing one statement into the CSS. Our first styling is the width of the Div Tag, width: 700px; followed by the left and right margins set to auto. Then follows the padding and the background color of the Div Tag. Next we style the H1 Heading within the Div Tag by choosing a color. All the statements must of course refer to the Div ID, #content, as we are working within this Div Tag.
In the same way we can style the font colour of our paragraph of text, #content p, table rows (tr), the table header cell (th), the text in the table header cell (p) etc. Please see the w3schools website for a complete CSS Reference Guide.
In today's tutorial we will cover gradients and background graphics in Photoshop and how to use and style them in Dreamweaver via CSS. If you are not familiar with CSS you will find many excellent tutorials at Lynda.com. Before we start we may want to remember that only PNG-24 files can deliver true semi-transparent images. Looking at web backgrounds we should also remember that we should find a compromise between acceptable background image quality and file size, i.e. download time. Gradients do generally increase the file size. Perhaps small images with a limited colour palette and a colour scheme from Kuler is a good choice.
As we have already explained the most popular screen resolution today is 1024 x 768. The days of 800 x 600 are definitely gone, however, higher screen resolutions than 1024 x 768 will most certainly be the standard in the near future as there are already many wide-screen LCD computer screens and laptops on the market. Let's also keep in mind the golden rule and magic number of the 960 Grid as explained above. Here are some helpful screen resolution usage statistics.
When designing a background image in Photoshop we should always carefully keep our original PSD Photoshop file in case we change our mind and need to go back to our original design. It may also be worthwhile to mention that we should avoid high contrast backgrounds as they will interfere with our written text. There are unfortunately still too many websites out there where this obvious and common sense rule is ignored resulting in poor visible and readable text.
In principle we could compose our entire web page in Photoshop. If we compare the Photoshop output code with our Dreamweaver code we will soon find out why this is not such a good idea. The Photoshop code is much more voluminous whereas Dreamweaver accomplishes the same task with significantly less code output, which results in quicker loading time.
When designing a background graphic we can make use of a few handy keyboard shortcuts such as Alt + Backspace to flood a Marquee with our selected Foreground colour. The Marquee Tool (M) is the second tool from top on our toolbar on the left and by clicking and holding down the left mouse button it will reveal several additional Marquee options.
Another useful shortcut is to zoom into full screen mode by double clicking the Hand Tool (H). Ctrl + 1 will reset our image to its original 100% zoom level, Ctrl +/- will zoom in and out respectively and Alt and scrolling on your mouse wheel will also zoom in and out. Furthermore, one can set a particular zoom level in the bottom left hand corner of the Photoshop workspace, where one can enter any desired zoom level as a percentage value. Finally there is the Navigator toolbar on the right, which also lets one set any desired zoom level or even move around an image at high zoom levels. The Navigator can be activated from the Windows menu. Another handy and quick shortcut is to hold down the Alt key, right click with your mouse and drag right and left to alter the size of your brush, pencil, clone tool etc. rather than having to make adjustments to the Master Diameter.
Another helpful way in working with our background graphic is to click the Arrange Documents icon in the top menu of Photoshop. It allows us to arrange our open Photoshop windows in a number of ways such as splitting them horizontally, vertically, 3 Up, 4 Up, 5 Up or Consolidate All etc. The split screen view allows us to drag our image (when the Move Tool (V) is selected) from the top panel to the bottom panel for instance. Holding down the Shift Key while doing so will result in a perfect alignment. Click here to see our browser sizes graphic and here to see the image after dragging it into our background image. This allows us to see how much of our background image will be visible in browsers of various sizes.
We can also undock our window by grabbing it at the top left corner of the tab where the filename is displayed and dragging it away from the tab bar so we can easily position it anywhere in our Photoshop workspace.
Once we have saved our background image we can style and position it with the help of CSS. In our case we are using an internal style sheet, i.e. one or several style declarations in the header of our HTML document. First of all we give the HTML page a background colour. This can either be done through Dreamweaver's Property Inspector interface at the bottom of the screen. There one can click on Page Properties and define the Background colour under the Appearance (CSS) category on the left. Underneath we can also select a Background image as well as the Repeat options no-repeat, repeat, repeat-x and repeat-y. Repeat-x is a horizontal repeat and repeat-y is our vertical repeat. However, there is no option for positioning our background image in the property inspector.
Styling our page background can also and actually more easily be achieved directly in our code view. For this we have to switch from Design view to Dreamweaver's Code or Split view. Our first declaration is <style type="text/css">, which describes the type of style sheet we use. Our next and actual style declaration is concerning the background colour of our page, namely background-color: #3d4f12; followed by our background image background-image: url(bggraphic4.gif); then our background repeat statement background-repeat:no-repeat; followed by the background position background-position:center center;
Our complete style declaration will therefore look as follows (see example, View Page Source to see the Internal CSS):
Regarding the background position the first declaration denotes the horizontal position whereas the second position is for the vertical alignment. We can therefore have the following nine background positions:
- center left
- center right
- center top
- center bottom
- left center
- right center
- top center
- bottom center
- center center
Now a few words on making a gradient background image and how to use the Gradient Tool (G) in Photoshop. Once we have selected the Gradient Tool we will notice that the Gradient Editor and Gradient Picker will show on the horizontal toolbar just under our main menu. We will also notice that the default gradient is Foreground to Background colour. By dragging our mouse over or indeed next to the image it will result in a gradient image and by holding the Shift Key down while dragging we will get a straight horizontal or vertical line, i.e. background gradient. The Gradient Editor has a range of Presets and other relevant options.
In today's tutorial we will be looking at CSS classes, pseudo classes, CSS IDs, how to build a Navbar (navigation bar), how to create buttons using layer styles, how to create web icons from custom shapes and how to incorporate it all on a web page using CSS. Click here for a short tutorial on how to create a stunning Vista inspired menu in Photoshop. We can only use one ID per page but multiple Classes to be styled with CSS. Keep in mind that layer styles in Photoshop are used for vector based graphics, which have the advantage that one can alter their shape. It should also be noted that we can hide layers and by doing so hidden layers will not be visible in our output file. This feature of Photoshop can be utilized in producing a number of output files from a single PSD layered file.
Let's remember that the ruler bars can be called up in Photoshop by going to View > Rulers (Ctrl+R) and that guides are set by dragging them from the horizontal or vertical ruler onto the stage. They can also be set precisely by going to View > New Guide, where one can set the exact horizontal or vertical position. To remove guides just drag them back into the ruler. To remove all guides click on View > Clear Guides. Right clicking into the ruler area gives on the option of choosing pixels, inches, centimeters, millimeters, points, picas or percentage values.
Let's design a navigation bar for the following image. Select the Rounded Rectange Tool, a sub-tool of the Rectangle Tool (U). Click and hold the rectangle tool to reveal the sub-menu options or select Shift+U to cycle through the various options. Alt+Left Click on the Rectangle Tool will also cycle through the option. These shortcuts are true for any of the tools on the toolbar.
To precisely place the rectangle we can set our horizontal and vertical guides. Make sure you have selected View > Snap to snap the rectangle to our guides. Our image is 200px high. Let's set a horizontal guide half way to 100px and a vertical guide to 250px. Drawing with the Rectangle Tool will automatically create a new layer. To edit the rectangle click Edit > Free Transform (Ctrl+T) and Esc to leave the transform mode. When in Free Transform Mode our rectangle will have vector graphics handles which we can drag to transform its shape.
Before we draw the rectangle, however, we want to select its colour with the Eyedropper Tool (I). Let's select the same dark brown colour as the background of "California", with the hex value of #503319. There are two ways to do this, namely just click with the Eyedropper onto the brown background or alternatively click on the Set foreground color icon near the bottom of the toolbar, which brings up the Color Picker (Foreground Color) window. Moving the mouse over our dark brown background will automatically change it to the Color Picker so we can select our colour.
When we draw the brown rectangle it will snap to the guides. After drawing it we can Free Transform it according to our needs and then make it active by either clicking the tick in the top toolbar or hit the return key to Commit transform. To get rid of the white vector outline around our rectangle we need to click in the Vector mask thumbnail of our shape 1 layer to toggle the Vector mask on or off. This will knock off the vector view. We can rename the layer by double clicking on its name or by right clicking the layer and select Layer Properties. We can move the rectangle with the mouse or the keyboard's arrow keys and place it in the exact position we want. Our Nav bar should now look as follows.
Next we want to enter some text. Select the Text Tool (T), choose the desired font in the property inspector just under the top menu or go to Window > Character to bring up the Character and Paragraph panel on the right. Once we click into our brown rectangle where we want to place our text Photoshop will automatically create a new layer. Our Nav bar will now look like this. It needs to be noted that Photoshop's perhaps strongest side is its ability to create and work with layers. One is strongly advised to place the various elements on different layers so one can make adjustments later on if needed, and of course always keep your Photoshop PSD files.
Selecting the light blue background colour from "Explore" (#6acbe1) and selecting the Ellipse Tool (U) we draw an oval shape over our "Tours" text. We will name the new layer created Ellipse 1. We have to make sure the layer is below our text layers to view the text. We therefore drag the layer below all four text layers. When double clicking the layer or when clicking on fx (Effects) at the bottom toolbar of the layer panel we bring up the Layer Style window. Let's select Drop Shadow, Bevel and Emboss and Satin to get a nice looking oval shaped button over our "Tours" text. Duplicate the layer by right clicking in the layer and choose Duplicate Layer and name it Ellipse 2. In the same way we create duplicate layers and name them Ellipse 3 and Ellipse 4. Be aware that the duplicate is right on top of the original. We have to therefore drag it to our next position. We can also duplicate an element in Photoshop by holding down the Alt Key and dragging it to its new position.
For clarity of the layer panel we can collapse the layer effects by clicking on the small triangle on the right of the fx (effects) icon. We can also order our Ellipse Layers as 1, 2, 3, and 4 successively. Finally we can select the four ellipse layers by either clicking on them individually while holding down the Ctrl Key or holding down the Shift Key and clicking on Ellipse 1 and then Ellipse 4. When all four ellipse layers are selected we can set various alignments in the property inspector below the menu bar, in the same way as we have done when aligning our text. Selecting all four text and ellipse layers we can move them (somewhat more to the right) by using the keyboard arrow keys. Our Nav Bar should now look like this.
Last not least we can insert three vertical dividers to separate the menu buttons from each other. Select the foreground colour as white, select the Line Tool with a Weight of 3px and draw a vertical line while holding down the Shift key. This will give us a perfect vertical line. Now we duplicate the layers as we have done before. Let's call them Line 1, 2 and 3. We can align them in the same fashion as we have done with our text and our ellipse. Our completed Nav Bar will now look like this.
What's left now is to create a HTML web page in Dreamweaver and position our Navbar centered at the top of the page. To do this open Dreamweaver, create a new HTML page and insert a centered DIV container by selecting Insert > Layout Objects > Div Tag. We keep the default value of Insert: At insertion point and give it the Class Name: main. To center the DIV we click on New CSS Rule and click OK. The CSS Rule Definition window for our .main class DIV opens. Looking at the code Dreamweaver generates we can see that we are dealing with an Internal Style Sheet, which places its style information into the header of our HTML page.
We want to click on Box as Category, un-tick the Margin Same for all tick box and set the right and left margins to auto, the height of the box to 200px, its width to 980px and click OK (the height and width are the same as of our Navbar). This brings us back to our Insert Div Tag window, in which we click OK. Thus we have created our centered DIV container. Our CSS code should therefore read now:
We can of course also set our DIV container in Code View by typing in our CSS code directly, which is actually a lot quicker. All what needs doing now is insert or drag and drop our Navbar into the DIV container, perhaps set a CSS background color of the page and we will get the following view of our Navbar within our web page. Let's not forget to enter an image description into the Alternate Text Box (Alt) in the property inspector so that search engines and screen readers can find our image. We could also create a rollover effect (mouse over - dormant, rollover, onclick) for more impact. Perhaps we can do this in our next lesson.
In this session we want to look at Smart Objects and how to make Custom Shapes. We want to also look at how to measure a Comp in Photoshop and how to import Swatches from Kuler into Photoshop.
The advantage in working with Smart Objects is that if we change one object the changes apply to all our Smart Objects because Photoshop links them automatically. Let's look at our example from last session, the Navigation Bar. Let's say we want to change the blue oval shape for our menu items to a light brown color. We previously named the layers Ellipse 1, 2 and 3.