In web design, we made a website that is totally different than any we have ever made before. It is a website, but it has a div that looks like a cool TV and animated text. This was an animated layout that we created in Photoshop. When I saw what the website was going to look like, I thought that it looked really complex, and I didn't think that I could pull it off, but it was actually quite simple.
 |
| original |
 |
| original layers |
First, we created the layout in Photoshop. I wanted mine to have a cool galaxy background because when I think of time travelling, I think of outerspace. I, next, typed out my name in a big font and gave it a shadow. I wish I had chosen a cooler font. I did the same with the words Past, Present, and Future. I also added the big "screen" in the middle that would depict my information. I rounded the edges and gave it an outerglow to make it stand out. Next, it was on to animating it. In the layers panel I made two rendeitions of the words. One that would be the original, and the other, the one that changed when hovered upon. Next we animated the layers to fade in and out in the time line. Lastly, we made slices of each word and saved the starting one, and the animated one.
 |
| changed |
 |
| the slices |
 |
| changed layers |
Then it was on to Dream Weaver. I struggled getting my slices on to Dream Weaver. I inserted a roll over image inside a div. This is where I put all of my slices; first the original and then the animated. I then made an inner-bottom div, which is where I typed in my information for past, present, and future. I also included pictures. I then entered in the code to make a scroll bar. I changed the CSS to make the scroll bar purple to match my color scheme. I learned that I had to work almost entirely from live view because it didn't show up at all how it really looked in design view. I made four different pages in all and linked them all to one another (linking images works the same way as linking text). I am very happy with how my website turned out, and I'm surprised I actually made it work.
Check it out my website
here.
Then it was on to Dream Weaver. I struggled getting my slices on to Dream Weaver. I inserted a roll over image inside a div. This is where I put all of my slices; first the original and then the animated. I then made an inner-bottom div, which is where I typed in my information for past, present, and future. I also included pictures. I then entered in the code to make a scroll bar. I changed the CSS to make the scroll bar purple to match my color scheme. I learned that I had to work almost entirely from live view because it didn't show up at all how it really looked in design view. I made four different pages in all and linked them all to one another (linking images works the same way as linking text). I am very happy with how my website turned out, and I'm surprised I actually made it work.
No comments:
Post a Comment