Tag Archives: picture

Photoshop to Dreamweaver

First I logged on to Moodle and downloaded the image of the website. I do not have a reference for this image because the tutor supplied it. You can see it is made of lots of different layers.

I use the slice tool to make a box around all the elements. If I want to adjust the size of the box I use the slice select tool.

Here is how the image looks now that it has been sliced in to sections.

Then I clicked file > save for web & devices.

I clicked on one of the squares. I choose jpeg…

…and I clicked save.

I clicked new folder. I called it welcome page and clicked create.

I clicked HTML and images and…

…clicked save.

I then duplicated the webpage file and renamed it to make the second page.

I then went to where I had saved the work.

I right clicked on the folder > open with > firefox.

This is how it looks in the browser.

I opened Dreamweaver. I clicked on portfolio.html

I clicked site > new site.

I then chose the root folder.

Here is how it looks in Dreamweaver.

I then opened the duplicated welcome-page file as well.

On the second page I clicked on the green box and hit the backspace button. This made the picture disappear.

Then I made a new picture to replace the one I just deleted. I made a new file in Photoshop using dimensions I got from Dreamweaver.

I then saved it. I should have saved it in the root folder which is the folder called ‘Welcome Page’.

I made a quick and simple design.

File > save for web and devices.

I clicked save here.

I clicked save.

On the second page I then inserted the image to fill the blank space. Insert > Image.

I clicked on my picture and clicked choose.

I clicked yes. This error message popped up because I failed to save the picture in the root folder. The folder called ‘Welcome Page’.

Then a box popped up and I typed in a description of the image.

This is how it looks now with the new, inserted image.

I clicked on this link in Dreamweaver.

The name of the image appears in the source field.

I then clicked on the target and dragged the cursor over to right on to portfolio.html

I then clicked on the Home slice. The name of the image appeared in the Source field.

I clicked the target and dragged the cursor over to the right on to welcome-page. Welcome-page then appears in the Link field.

File > save

File > Preview in Browser > Safari

The webpage now looks like this. I clicked around to make sure it worked.

In Photoshop I turned off the visibility of the upper layer. This made the image underneath visible.

I took the slice tool and I drew new slices over the links so that when I saved the file I would have an image for when the button was rolled over and for when it wasn’t.

Then I was able to choose the Slice Select Tool,Then I right clicked on the slice using the slice select tool. I choose the option Edit Slice Options.

A box popped up where the name could be changed to something descriptive.

I typed in Home_on.

Then I did the same for portfolio…

…and for Contact.

File > Save for web and devices.

I clicked save.

I clicked the option HTML and Images. I clicked save.

I clicked replace.

I selected and deleted the image.

I then clicked Image Objects > Rollover Image.

I selected Home_off.gif from the list and clicked Choose.

I saved again.

I then did the same for the Portfolio_On.gif

I selected the original image and the new, rollover image from the list and clicked Ok.

File > Preview in browser > Firefox.

This is how it looks.

I rolled over the link called Portfolio and it turned white.

Double page spread idea using full photo – Cyber goth styled in purple

Here is my first double page spread idea. Here is the picture I thought I would try using.


Here is what I came up with. It was more difficult than I thought to make it look well-ordered and balanced. The columns of text don’t look very comfortable on the page so I’ll have to try a new idea.

The sell and body text were taken from these websites:

New Magazine Design – Looking at layouts

This double page spread is really effective. The pictures go along the centre of the page and have been put together like a collage. The body text runs at an angle. The over all effect is appealing. I don’t see anything I think is bad here.

The pictures go along the bottom of the page and have been put together like a collage. It is very interesting how the column of the body text run at an angle. The text appears to follow the shape of the buildings somehow. This design is well-balanced.

This time the images run along the top of the page and the text runs along the bottom. The sell is in the centre of the page. The body text appears ro be imitating the shape of the buildings. What a clever idea. The images seem a bit squashed together but this isn’t necessarily a problem.

Issue 4 – The title has an interesting effect. It looks like some of it has been erased. This picture is quite small so I can’t see the detail properly to be able to comment on it.

Issue 5 – The title has a different design to issue 4. This cover is striking and the type used is of different sizes. Faces have been used to make a letter. There is quite a lot going on here but I think all the different elements work well together.

Issue 9 – The title is different again. The type runs down the left hand side and I notice that it overlaps. I think this effect works well even though the type isn’t particularly clear.

Issue 10 – The title is different again. I think this design is eye-catching. The image in the centre has a bright border and there are arrows pointing to it. The black bold type really stands out.

These four covers of Ray Gun are quite ‘messy’ but the designer has made all the elements work together to make an interesting piece. I have never tried to make a piece of grungy design like this but I would like to learn.

Top – This is really eye-catching. The images and the type remind me of a cartoon. The sell is under the title and the body text is directly to the right of the sell. The images overlap the title. I think the audience of this magazine would find this design appealing. I don’t see anything I think is bad.

Bottom – What I like about this spread is the use of two subtle curved borders. One runs under the sell and the other runs under the main title. I think that’s really clever. I think I would like to use this idea in a design if there is a oppotunity.

This design looks really different to the two above. The top third of the page has been left almost blank. It’s interesting that the body text runs all along the page on the left as opposed to being put into columns. I like the way the title on the right has spaces in the words. It is very interesting how the pull quote runs vertically. I think this design works well and it isn’t overwhelming.

All of the above are from this book: