- All my assets completed.
- As much as possible for my Photoshop pages.
At this point of time all my assets for my website have been completed. There's a possibility I might add more assets whilst i'm making the pages however this is what I've got so far.
- All The Buttons Made For The navigation.
- The website banner.
- Screenshots from the film.
- Photographs of some of the crew members and cast.
- Some film posters of films that Focus Features have made.
- Images of shop items
- My own written plot summery.
- A Small critics review that I wrote.
- A brief piece of text I wrote to go on the Cast & Crew pages
- A list of the cast and crew pages.
After collecting the assets I opened photoshop to create my homepage as well as a default page which I could use to easily start of a new page whilst keeping the design the same. I set the photoshop document up as a "Web Most Common" Preset (1366*768 Pixels). And dragged the banner of the site to the top of the page. I needed a main background for the site and to make one I removed the text of the banner as well as the buttons and increased the size. I then added a colour overlay to it so it came across darker. I then added a lightish blue squere behind the buttons and used the smudge and blur tool to blend them in with the banner and the main background.
That completes the main default page that I needed so I saved it as a PSD and then created a new one for it to make the homepage. The homepage was a simple one with just a trailer in the center of the screen. All I needed was a box to mark where it would go as it would be actually added later in Adobe Dreamweaver. Later on when the page was finished I decided to add some text above the trailer. I had to make sure I sliced up the right parts of the image. For example the banner around each buttons and around the marked box. This is important it's done right for the links to work correctly.
I then started making the story page which was all text based and then doing the film screenshots page as well and so forth completing the other pages. All the other pages didn't take to long to complete as I already had the Default page which I could use.
Below is a screenshot of the slicing I had done for the Cast & Crew page.
After that the page is done and I need to save it for it too work probably it needs to be saved in a certain way.
When the webpage is saved this way Photoshop creates a HTML document as well as an Images folder to go with it. Each of the images in the folder is the individual slices. Eventually I had completed all the webpage designs on Photoshop And saved them correctly all in one folder.
Afterwards I needed to go into Adobe Dreamweaver and put it all together and into an actual website.
On each page I had to link all the banner buttons to the corresponding pages. This will be the main navigation of the website so it needs to work correctly. This is done by right clicking the buttons, selecting make link and then selecting the correct webpage for it to link too.
The trailer which I marked out in Photoshop was created by selecting the image and going to the code view and replacing the HTML coding for the image with the trailer embedding code from YouTube. I also wanted to add my own favicon on the website so I opened Photoshop with a canvas size of 16 x 16 pixels and created a blue Coraline button then added a line of coding to the top of each page to make it work. All you had to do was to save it was simply hit save as all you doing within Dreamweaver is editing the all ready made HTML file. Once all the buttons had been linked up that pretty much made the website complete.
Photoshop & Dreamweaver Techniques Screenshot's:
Creating a color overlay for the background.
The various layers used for the main website background.
Using Adobe Illustrator to create my buttons for my website.
Line Number 6 on Dreamweaver is the coding which I added to include the Favicon on Dreamweaver.
Below is a screenshot of the slicing I had done for the Cast & Crew page.
After that the page is done and I need to save it for it too work probably it needs to be saved in a certain way.
When the webpage is saved this way Photoshop creates a HTML document as well as an Images folder to go with it. Each of the images in the folder is the individual slices. Eventually I had completed all the webpage designs on Photoshop And saved them correctly all in one folder.
On each page I had to link all the banner buttons to the corresponding pages. This will be the main navigation of the website so it needs to work correctly. This is done by right clicking the buttons, selecting make link and then selecting the correct webpage for it to link too.
The trailer which I marked out in Photoshop was created by selecting the image and going to the code view and replacing the HTML coding for the image with the trailer embedding code from YouTube. I also wanted to add my own favicon on the website so I opened Photoshop with a canvas size of 16 x 16 pixels and created a blue Coraline button then added a line of coding to the top of each page to make it work. All you had to do was to save it was simply hit save as all you doing within Dreamweaver is editing the all ready made HTML file. Once all the buttons had been linked up that pretty much made the website complete.
Photoshop & Dreamweaver Techniques Screenshot's:
No comments:
Post a Comment