The first thing that you will need to do is to have the image in front of you, so before you do anything else make sure that you have the opened the image.
Learn a range of ways to improve the impact of your pictures on one of our workshops for beginners or advanced.
After you have it open create an adjustment layer but do not make any adjustments, only click O.K. When you have done this then choose the layer adjustment mode and then multiply. This will cause your image to get much darker as its density becomes greater. If you feel that this is not enough then you can always redo this again until you are satisfied.
If however you find it too dark then you can make it lighter by sliding your opacity bar to the left until you are happy. When you have achieved the effects that you require you can now repaint the second adjustment layer parts that you wish to alter with your paintbrush.
Read more
Posted by Heather Buckley in Photoshop Training on April 20th, 2009 | No Comments »
Part 2.1: How to add a logo to your Website
1: Create an ‘Images’ folder in your in your website directory. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
In the right hand panel in Dreamweaver you will see a section named ‘Files’. In this section there are two tabs, ‘Files’ and ‘Assets’. Select the ‘Files’ Tab.
In this tab you will see a list of the files used for your website “index.html” & “twoColLiqLtHdr.css”. We created these files in Part One of this tutorial.
To make the new folder right click just below the two existing files in your site and select ‘New Folder’ from the menu that appears. This will create a folder called ‘untitled’ – rename this folder ‘images’ by typing over the default folder name. Hit ‘Enter’ to complete this.
2: Copy your images in to your Images folder
Now we need to copy all the images you have created into this new folder, this is done without using Dreamweaver. To do this you need to navigate to the folder they are currently held in, select the images you want to use and copy them. This can be done by right clicking on the images and selecting ‘Copy’ from the menu that appears or by pressing ‘Ctrl + c’ on the keyboard when you have selected the images to copy.
Navigate to the ‘images’ folder you have just created and paste the images here. This can be done by right clicking in the ‘images’ folder and selecting ‘Paste’ from the menu that appears or pressing ‘Ctrl + p’ on the keyboard.
The images should now appear as icons in the ‘images folder’.
3: Open your Web Page
Go back to Dreamweaver and open your index.html file in the ‘Files’ panel on the right hand side of Dreamweaver. The page should open in Dreamweaver’s main window.
4: Insert the Image into your Web Page
When the index page opens the blinking text cursor should appear just to the left of your Website’s name in the Header. If it is somewhere else on the page , left click just to the left of your Website’s name to place the text cursor here, this is where we will insert the logo.
On the menu, click ‘Insert > Image’. A dialog box should appear containing a list of the folders in your website. You should see “_notes” and “images”. Double click the “images” folder to open it.
You should see a list of the images you copied here in step one. If you are unsure which image you want to use you can left click each of them and a preview will appear at the right hand side of the dialog box. When you have selected the correct image, click ‘Ok’ at the bottom of the dialog box.
Another dialog box entitled “Image Tag Accessibility Attributes” will appear. Insert “Example Company’s Logo” into the “Alternate Text” field.
The ‘alternate text’ is a description of the image. The text appears if a visitor looks at your site with the images disabled in their browser. The ‘alternate text’ is also indexed by search engines and read by screen readers for the visually impaired. You don’t need to insert anything into the ‘alternate text’ field but you should do to make your website accessible to the disabled.
Click the ‘Ok’ button at the bottom of the dialog box to continue (you don’t need to enter anything into the ‘Long Description’ field.
Your logo should now appear next to your site name in the header. If the image is too big or you want to change the image you can select it, hit ‘Delete’ on your keyboard to remove it. Repeat this stage to insert the new image.
If your logo is designed to fill the whole horizontal space of your site and your website name should be displayed below the logo, click the left mouse button in between the image and your site name. Press ‘Enter’ or ‘Return’ on your keyboard to move the site name below the logo.
If you don’t like how this looks you can do one of two things. To undo your last action select ‘Edit > Undo New Paragraph’ from the menu or press ‘Ctrl + z’ on your keyboard.
You can also remake your logo so it includes your website’s name. If you do this you can delete the text version of your site name. If you do this make sure you put your site name in the ‘Alternate Text’ of the image (ideally elsewhere on your web page as well).
5: Fixing the spacing between your logo and site name
If your logo fits beside your site name in the header it will probably be too close to the text. This can be easily remedied.
Click the image once to select it. At the bottom of the Dreamweaver window you will be able to see a panel entitled ‘Properties’. With your picture selected the ‘Properties’ panel will show a number of fields you can change to configure your image (see below)
In the ‘H Space’ field enter a value of ‘5’ and press ‘Enter’ or ‘Return’ on your keyboard. In the main Dreamweaver window you will see space has been added either side of your logo.
You can also adjust the ‘V Space’ value to add space at the top and bottom of your logo.
Change these values until you are happy with the amount of space around your logo.
6: Save and publish your web page
Select ‘File > Save’ from the menu to save your web page.
Then select ‘Site > Put’ from the menu. You have already set up your site in the previous chapter your web page should upload. Dreamweaver may ask you if you want to ‘Put Dependent Files’, if so select ‘Yes’. Dreamweaver will automatically upload all the other files (images, css) that this page uses.
You have now added a logo to your website.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | 1 Comment »
How to Make Pictures and Text into Links
This chapter takes you through the process of creating links on your website as well as making existing pictures and words into clickable links. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
Getting rid of the border around a linked image
Linked Images can offer a nice alternative to the same old generic and dull text most that is often used. However when you create a linked image a browser will automatically create a border around it. This can be easily rectified as follows:
Click on and select the image in question. Go to Windows > properties to get the properties palette to appear. When you have the properties palette in front of you, you can then alter the size of the border by changing the number in the border text box. This number represents the thickness of the border, so if you change it to 0 then the border will no longer be visible; similarly if you wished to make the border bigger then you would make the number in the border text box higher.
Introduction to URLs: Relative and Absolute Links
The web address of any page on your website is a type of “URL”, or “Uniform Resource Locator”.
URL’s can be either absolute or relative. An absolute URL specifies the full address of a web page or file. For example, “http://www.siliconbeachtraining.co.uk/index.html“
A relative link can be used to link to other pages within your own website. Rather than using the whole URL you can just use “index.html”. The files must be in the same site and also in the same folder otherwise this won’t work. Browsers assume that if a relative link is used the page or file it is linking to is in the same folder in the same website.
Rollovers:
To create a rollover in Dreamweaver is not difficult. Firstly you will need to export the image and its rollover image from fireworks. When you have done this you will then need to go to the “insert” option in Dreamweaver and then click on “rollover image.” After this you will want to give the image a name, select the images you want from the folder icon in Dreamweaver before submitting a link to the image. After which you will have successfully created a rollover.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 9th, 2009 | No Comments »
