The eyedropper is an important basic tool in Photoshop. The Eyedropper can be used to pick out colour in an image, change foreground and background colours. Learn how to use all the Photoshop tools on our Photoshop Course in Brighton, Sussex.
Shaped like a pipette, it is an excellent tool for colour matching purposes when you have difficulty in finding the right colour, the eye-dropper tool allows you to alter the prominent colour so that it has a shade that is identical to colour on the canvas.
To change the foreground color, click with the eyedropper on the desired colour anywhere in the current image, or in any other open image, active or not. To change the background color, Alt-click, with the eyedropper, on the desired colour in any open window.
The keyboard shortcut for the eyedropper tool is I.
Read more
Posted by Heather Buckley in Photoshop Training on February 27th, 2007 | No Comments »
This chapter describes how you can change the way the text of your website is displayed. Including the font type, size, colour, weight and style. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
We will also introduce the concept of Cascading Style Sheets, or CSS, which can save you a lot of time when you need to change the style of different areas of text all at once.
Fundamentals of Web Fonts
The first important concept that any new web-designer needs to understand, is that you can’t use all of the fonts that you would usually use on your computer when building a website. This is because the fonts you have installed on your own PC or Mac won’t necessarily be installed on the computer of the end user.
Most web designers therefore stick to a set of fonts that are web-safe, and found on most computers.
Any text you have entered on your site in previous chapters will have used Dreamweaver’s default template, and will be displayed in one of the following fonts:
Verdana, Arial, Helvetica, sans-serif
Your user’s web browser will read the list of fonts in order, and will display the text using the first font on the list that is installed on that person’s PC or Mac. I.e. If they have Verdana it will display as Verdana, if not it will display as Arial, if not Helvetica and failing that, it will just use any sans-serif font available.
All of these fonts look very similar – and they are all sans-serif. Sans-serif fonts are the best for web-work, since they are easy to read on screen.
Serifs are the “curly bits” that appear on the end of the characters in fonts like Times New Roman, which look nice in print, but are not as easy to read on screen. Sans-serif simply means “without serifs” – which means the font is plainer, but more readable.
Compare the two text samples below as an example of this:
However, Dreamweaver will also allow you to select other series of fonts in addition to the standard “Verdana, Arial, Helvetica, sans-serif”
To experiment with this:
Select some text in Dreamweaver by highlighting it with your cursor
Now select Format>Font from the main toolbar
The following alternative series of fonts are available:
- Arial, Helvetica, sans-serif
- Verdana, Arial, Helvetica, sans-serif
- Times New Roman, Times, serif
- Courier New, Courier, monospace
All of the fonts in these series are very likely to be installed on the end-user’s computer.
Dreamweaver will allow you to add your own font lists, however its not a good idea to do so, as it is unlikely that the fonts you choose from your own computer will be present on the user’s – the site will not display the way you designed it.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 6th, 2009 | 2 Comments »
Part 6.3: How to Change the Colours of the Spry Menu Bar Widget
To change the colours of the Spry Menu Bar Widget when its set to its default configuration, you will need to click somewhere in one of the menu buttons and select the “<a>” item on the status bar. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
Double-click either the “background-color” line in the CSS STYLES panel or the “color” line. If you double-clicked the “background-color”, the CSS Rule Definition dialog box will open to the background section allowing you to choose any colour from the colour picker.
If you have double-clicked the “color” line instead, the same CSS Rule Definition dialog box will appear, but it will open to the “Type” section. This will allow you to change the colour of the text when the mouse is hovering over the button.
If you want to change the colour of the menu bar when the mouse is not hovering over the button is to do the following:
1. Expand the FILES panel on the right side of Dreamweaver (if it’s currently collapsed). Doubleclick the “SpryAssets” folder in the list below, then doubleclick the “SpryMenuBarVertical.css” file to open it.
2. The CSS code that controls the appearance of your vertical menu bar will be displayed.
Click “Edit > Find and Replace…” from the menu. A dialog box, called “Find and Replace”, will appear. Type “ul.MenuBarVertical a” into the “Find” field, and click the “Find Next” button.
In the background of the window, Dreamweaver will highlight “ul.MenuBarVertical a” in the document. Click the “Close” button on the “Find and Replace” dialog box.
3. In the right side of the CSS STYLES panel, look for ‘Properties for “ul.MenuBarVertical a”‘.
Directly underneath you should be able to see “background-color” and “color” options.
To change them, click the square colour box beside the item and the colour picker tool will be displayed.
4. Click “Window > index.html” to return back to your main web page. Do NOT click the “X” button as your work has not yet been saved and all customisations will be lost.
5. If you decide to change the colours at any point, click “Window > SpryMenuBarVertical.css” again to switch back to the CSS file. If you have not moved your cursor or anything like that you should be able to change the colour as before from the CSS STYLES pane.
Saving, Publishing and Testing Your Work
Once you are happy with the changes that have been made click “File > Save All”.
To publish your work click “Site > Put” as before. When done, open a web browser and try out your menu. Remember, if you click any of the menu items, you will no doubt get an error message. This is fine because we haven’t created other pages on the site.
Congratulations! You have successfully added a professional-looking menu bar to your website, completed the home page, and mastered nearly all the skills and tricks of using Dreamweaver for designing ordinary web pages.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »
