Tag Archives: elements

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.

Alternative Poster Designs – By Tom

Below are two posters I created that could act as alternative designs if our chosen design does not satisfy our groups demands. I chose to create two very different themed designs; one old and one modern, in order to obtain an impression as to how the desired information can be displayed.

Concept One
The Design:
This first design was inspired by 19th Century typography posters. I chose this theme of design as our poster requires a lot of text-based elements that need to be displayed. Such posters designed in this fashion are dominated by text, which is why I thought the concept could be a possible solution. The individual elements of text are sectioned in order for certain information to be separate from others to reduce confusion.
I chose to use the worn paper as a background to directly relate to the style of poster used in the 19th Century. The way I have set out the page elements break up the desired categories in a way that I believe works. The typefaces I have used also directly relate to those used at that period f time. The issue with this design is the fact that I had to use actual photographs for examples, which does not best suit the overall theme of the poster. Another issue I have is the amount of space that is left. By looking at 19th Century typography posters, you can see that there is minimal space. The issue that lies here is the legibility of the piece may be effected, which would not be beneficial.
Concept Two

The Design:

For this design, I chose to give it a modern, organised impression. I chose to design it in this fashion as I believe it presents all desired elements (both image and text) in a way that can be understood by the consumer. The individual elements have been organised into categories and have been presented effectively (linked in some cases). The use of colours directly relate to those used on the ‘Independent’ logo.

I feel the way I have sectioned elements into different categories and linked them in some cases works well and can be understood. By using a ‘table-like’ theme, I believe it displays all the desired information clearly. I personally feel that the elements of information that are linked to another is easy to understand (use of arrows and page separation). I also feel that the design of this poster allows actual photographs to be used without looking out-of-place. The only issue I can see that would be a problem is how the information links together. Although I understand it, others may not. In such a case, I feel alterations in the layout can be easily re-adjusted.

Find Tom here http://www.behance.net/tomknapp92

Glow sticks for double page spread

I wanted to use this picture as it shows the cyber hair style really well. I cut out the figure in Photoshop.


I thought these glow sticks would be really colourful and eye-catching.


Here I am trying to get the title to be seen on the page with the glow sticks. The colours mean the type can be difficult to see so you have to get it in the right place.

I have placed the title along the glow stick. I think this idea works well and the different elements have space to breath.

I think using two pictures looks more attractive than just having a large amount of body text. I checked with the tutor that I had enough body text here and I do. I will most likely be using this idea as my final idea.

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: