Tag Archives: design

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.

Looking at miltonglaser.com

  • What is the immediate ‘feel’ of it?

 Its clean, simplistic and looks professional.

  • How are images used?

 If you click on ‘The Work’ it loads this page. Each picture is a link which you can click on to see the corresponding design.

I was really glad to see that this website had a large space for the design and a smaller space for the text.

  • Choice of typefaces?

Arial 12

Arial 9

Arial 15

This section is an interview and you can see there is a lot of type. I don’t understand why the designer didn’t at least put a space in-between each question and answer set. Instead its all lumped together which makes it look really unappealing and over-whelming.

  • Navigation – is it easy and straightforward or difficult and frustrating?

This part of the website was really annoying. I was trying to read the type on the designs and the next design kept loading and appearing before I’d barely looked at it. I found this really frustrating.

All images from http://www.miltonglaser.com/

Paris versus New York – in graphic form

I love this. The bright colours.

http://www.guardian.co.uk/books/gallery/2012/apr/15/paris-versus-new-york-graphic#/?picture=388659584&index=3

A particularly inspiring design by studio-cuculic.hr

I really like the bright colours and the really interesting designs for the year. It is very eye-catching.

http://www.studio-cuculic.hr/radovi.php?c=3

http://www.korlat-vina.hr/images/cms_gallery_photo/63.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/64.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/68.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/65.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/66.jpg

http://www.korlat-vina.hr/images/cms_wine_year/1_image.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/78.jpg

http://www.korlat-vina.hr/images/cms_wine_year/2_image.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/77.jpg

http://www.korlat-vina.hr/images/cms_wine_year/7_image.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/79.jpg

Third piece of particularly inspiring design by hat-trickdesign.co.uk – Task 4)

4) Now select ONE designer or company that you find particularly inspiring. Choose THREE pieces of design (these might be separate items or three campaigns of linked items) and make analysis of each of these:

  • Why do you like it find it inspiring?

I like these pieces because they are bright and eye-catching. I like the colour scheme used because it is very cheery. I like the large-scale ‘G’ and ‘5’. The designs really brighten up the area without being ‘too much’.

  • What is the message/purpose of the piece?
My research tells me that these are ‘Environmental graphics and wayfinding scheme’.

http://graphicambient.com/2012/02/17/east-thames-offices-uk/

  • Who is the audience and HOW does it hail the audience?

The audience would be anyone who comes to visit the housing association East Thames’ group headquarters in Stratford and anyone who walks by that building. The staff who work there are also the audience.

  • In what ways would you say it is innovative (if it is) OR why is it appropriate for this piece to use traditional conventions?

It looks innovative to me because some of the designs are really big and bold like the large ‘G’ and ‘5’. The designs are minimal which makes them look modern.

  • Outline the signifiers and how they tell you anything about the signified meaning – look at things like messages, narrative, quality, hailing and anything else that you deduce.

The numbers and letters are symbols so most people will be able to work out what they mean. My research tells me that the brands identity uses sunrises so this is why warm colours have been used.

The cup probably tells us that there is a café near or refreshments are available. I’m not sure what the piece that looks like a rainbow is trying to say. I thought the inspiration was meant to be sun rises, not rainbows.

  • Would you say that this designer or design company has a recognisable style – if so describe why this is, or say why this is not the case.

This piece fits in with the design for the Natural History Museum.

Here is some information I found out about the design when I was doing research.

‘East Thames Offices, UK

by Hat-Trick Design
2008

Environmental graphics and wayfinding scheme for housing association East Thames’ group headquarters in Stratford, east London. Based on the Group’s brand identity theme of ‘sunrises’, referencing the sun rising in the east. Using the principles of light, shade and reflection, a simplified circular ‘sun’ shape and a relevant colour palette, we created an innovative system using reflected and transparent sunrise colours.

Creating ‘glowing’ iconography and wayfinding by bouncing colour from the reverse of signs against white walls of the building provided the base for their scheme.

Transparent colour applied to glazing let natural light cast colour throughout the building.

In addition, applied graphics and installations captured the theme of the ‘sun’, including a 2m clock in the public space alongside photography of local sunrises submitted by residents across east London and clients of East Thames to convey an optimistic and hopeful future.’

Article above from: http://graphicambient.com/2012/02/17/east-thames-offices-uk/

http://issuu.com/lavita/docs/followme__wayfindingbj