Unit 9: Project PlanningToday, I will be starting to create the home page; where originally it is stated on the Gantt Chart, I should be starting to create the home page on the 05/03/07, however I will be starting to create the home page ahead of the Gantt Chart by 5 days. I have already consulted my client about this, and she is fine with the change. I have started to create the home page, 5 days before the scheduled date because I didn' t have to use any Cascading Style Sheets or create any and upload anything onto the server, also because I finished creating the graphics ahead of the schedule. Therefore, I am hoping to finish the whole project early than its scheduled date.
Unit 14: Developing and creating a websiteAccording to the order of creating the website, I am starting with the home page first. The home page is very straight forward as there is no template required for this page, also I will be using the graphic I created previously for the background image of the home page; where I also need to set the background colour to black, as the text navigation buttons will be in white font colour first; where they will change colour from white to blue when hovered. As the design of the navigation buttons are different compared to all the other web pages as the navigation buttons doesn't match the background I have used for the home page; therefore in the design, it is shown that the navigation buttons will be just text rollovers created in Macromedia Dreamweaver.
To create the text rollovers, I followed a tutorial from developingwebs.net: http://www.developingwebs.net/dreamweaver/flash.php
Using this tutorial, it gave me a step by step guide into how to create Flash text rollovers; where I found it very straightforward to do, as I had to enter the text of the rollover and select the inital colour (white) and the hovered colour (blue), where it had to be linked to the blank corresponding web pages I created in the previous blog. All of these Flash text rollovers were inserted into a table of 0 pixels border beforehand, this is because I wanted to make sure that all of the rollovers were placed in the same alignment.
Unit 9: Project Planning
According to the Gantt Chart, I was suppose to create the template after I setup the website's root folder and the Cascading Style Sheets. However, I have created the templates before creating website's root folder, also I am not using a Cascading Style Sheet as my client didn't like the layouts, colour schemes and fonts avaliable on the internet. Originally I was to create the root folder of the websites with the blank web pages on 12/02/07, however as I created the graphics and the template before the root folder; it was pushed 8 days later. I will create the root folder and the blank pages of the web site today.
Unit 14: Developing and creating website
I have used the video tutorials from the blog "Tuesday, October 03, 2007" to help me set up the website: http://www.vtc.com/products/dw8.htm
Using the video tutorial of setting up a website; I was able to create a site on Macromedia Dreamweaver, where I had to give the website a site name: "Dong Bang Shin Ki Online"; give the website a directory of all its resources, known as the "local root folder", enter in the URL of my client's website. Once all of this was set up successfully, I could start creating the blank web pages. To do this, I had to create blank HTML pages; where all of the web pages excluding the home page, I had to insert the template before inserting the content of the pages.
Once I created the blank HTML pages, I had to save them into the local root folder, where they are all named according to the page titles.
Unit 9: Project Planning
I have received comments and confirmation about the graphics I created for my client's website; where she has said that she thinks they look professional, especially the background image of the home page and the banner. Therefore, with her confirmation I can now start to create the templates of the web pages.
Previously in blog: "Tuesday, October 03, 2007", I have stated all my research I have found into creating templates; where I have already explained that they have two different regions required in a template, these were: editable regions and uneditable regions.
Unit 14: Developing and creating website
I have created a template, which will be suitable for all web pages; excluding the home page. I will not be creating a template for the home page, because the home page is just a one-off design, unlike the other web pages where they all have the same basic features; i.e. the same grey gradient background and banner. I have used editable regions for the navigation buttons, because even though they are all in the same consistent order on all webpages, the colours of the navigation buttons varies as each web page will have one button that will just have blue font colour e.g. if it is on the background information page, the background information navigation button will only display blue on the button as it will not change colour when the mouse hovers over. I have also inserted editable regions for the contents of information to be placed there.
Unit 9: Project Planning
In the blog: "Friday, February 09, 2007", I have stated that I had to change the order of the Gantt Chart slightly; as my client has requested to see all the graphics before I start creating the pages of the website. Therefore the schedule of the graphics had to be shifted from 19/02/07 to 09/02/07; where I previously stated that I will finish the graphics on 23/02/07, instead of the original date 03/03/07.
So the section for creating blank pages have shifted after creating the graphics.
However, I will need to make more new changes to the Gantt Chart, as I have finished creating the graphics today; this means I have finished a week early almost. As my client informed me that she would like to see all the graphics before they are being used in the website, as she wants to make sure they are created professionally and perfect; therefore I have emailed her all the graphics I have created: Navigation buttons, Background image of home page, preview icons of Gallery page and the Profiles images. I am hoping to receive her confirmation and comments about the graphics I have created, so that I can start creating the templates and pages of the websites soon.
Unit 14: Developing and creating websites
Once I have created the preview icons for the Gallery page, I need to edit the images of each memeber for the Profiles page; where I need to place each of their names to the corresponding profile image. All of the text on the images has a grey outline around the white text; where I have used the stroke effect to create this. I already had the knowledge to use the stroke effect, therefore no tutorials was needed to teach me how to create this effect.
I have used the images that my client has provided me for the Profiles page; where she has labelled each of the image files to the corresponding member's name, this is so that it was easier for me to identify each of the members when placing the names onto the profile images. My client has specifically stated that she wants their stage name as well as their korean name on the images.
The fonts used on the images is a downloaded font called Saginaw; where it is in a white font with a grey outline. As stated before; the outline was created by selecting the stroke effect, which is under the layer blending option in Adobe Photoshop CS2. This was done to all five profile images of each members:
Unit 14: Developing and creating websites
After creating the home page image, I will now need to create the preview icons of the Gallery page, where these preview icons will be the images that the users will need to click onto, in order to reveal a pop-up window of the full image of the preview icons. All preview icons will only show a section of the image. This will all be done on Adobe Photoshop CS2; where this skill was already developed by myself and not from other tutorials on the internet. There is to be in total 18 preview icons to make on Adobe Photoshop CS2.
I had to first create a 100 x 100 pixel blank document, where I also at the same time open up one of the images that my client wants in the Gallery page (print screen below).
Using the two documents opened in Adobe Photoshop CS2, I had to drag the image layer into the 100 x 100 pixel document; where from here the image layer was transferred into the 100 x 100 pixel document. Once it was transferred, I had to adjust which section of the image I wanted to show on the preview icons (print screen below). This was done to all the other 17 preview icons I had to create.
Unit 14: Developing and creating websites
In the previous blog: "Monday, February 12, 2007", I have cloned and removed the Vogue Logo off the image. I now need to add texture and text to the image; where I learnt how to add texture and blend the texture into the image from:
http://www.soompi.com/forums/index.php?showtopic=856&st=40&p=97750&#entry97750
In the print screen above, it shows the image I will blend into with the chosen texture; where I have to layer the two together and change the lighting for it to suit the outcome of the two images blended together. I had to adjust the lighting till I was happy with how the image looked like blended with the texture. After, I had to place the text onto the blended image, these were "Dong Bang Shin Ki" and "the rising gods of the east". Both of these text will be in two different fonts; "Dong Bang Shin Ki" was in a downloaded font called "Vaguely Replusive", which was in a white font colour; and "the rising gods of the east" was also in a downloaded font called "Hannibal Lecter", which was in a grey font colour.
The outcome of the background image for the home page was:
Unit 14: Developing and creating websites
My client has given me a 1024 x 768 image of Dong Bang Shin Ki, where it is a photoshoot from Vogue. She wants me to use this image as the background image of the home page; however I need to perform some graphic editing as there is a Vogue logo on the image, where it is required for it to be removed off the image. I will also need to improve the aesthetic of the image; this will be using textures and different lightings in the layers using Adobe Photoshop CS2.
In order to remove the Vogue logo, as it is seen in the print screen above; I was taught to use the clone tool in Unit 11: Multimedia. Using the clone tool, I can select an area on the image which you want to use to cover up the logo; the area I selected was the section near the logo, this was the grey areas. I had to be careful with where I was cloning, as I had to take into account that the area I selected had to have the same colour and contrast. I found the easiest area to clone was the grey sections; the most difficult area to clone was the section that had the logo over the shadows and the shoe.
Unit 14: Developing and creating websites
Using the bevel effect tutorial in the previous blog of: "Friday, February 09, 2007" I have used this to produce the two sets of navigations buttons for all the web pages excluding the home page in Adobe Photoshop CS2. I will be producing two sets of navigation buttons, this is because the first set will be for before the mouse hovers across it; therefore the font will stay grey. The second set of navigation buttons will be when the mouse hovers on the button; therefore the font will change from grey to blue. I need to make sure that all of the buttons are saved in GIF format and not JPEG format, as the quality wouldn't be as good, once it is imported into Macromedia Flash if it was in JPEG format.
Both sets will have the same design, colours and fonts used as well as the height of the buttons (35 pixels); it is just the font colour of the two sets will be different. The design of the buttons is very similar to the banner I created previously, its just the shape of the buttons is more rectangle than the other and the background colour is a lot lighter; but the procedures in create a bevel effect button is the same as the procedure I did creating the banner and the procedures shown in the tutorial: http://www.absolutecross.com/tutorials/photoshop/interfaces/plastic-tabs/
In the print screen below, it shows an example of the two sets of buttons I need to produce for the navigation bar:
Unit 9: Project Planning
According to the Gantt Chart, I was originally suppose to start creating the graphics on the 19/02/07; as before creating the graphics I should be starting to be creating blank web pages of the website. However, I decided it was best to create the graphics first as these take longer to create than the blank web pages; also because my client has contacted me that she would like to see all the graphics used before it is being inserted into the website. Therefore from the schedule of 19/02/07, it has now shifted 10 days earlier to 09/02/07; where hopefully the creating of graphics will finish 23/02/07 instead of the planned 03/03/07 date.
According to the Gantt Chart, I will need to design the: logo, banner, buttons for navigation, images for the website and flash features; however according to the design now, I will just need to design the banner, buttons for navigations and the images used for the website. Therefore, there are some changes needed to be done to the Gantt chart.
Unit 14: Developing and creating websites
I have started to create the banner on Adobe Photoshop CS2; where the design of the banner will be a curved rectangle with a grey gradient as its background and a 3D effect. To create the 3D round effect, I have decided to use the bevel effect on the shape. I got this 3D bevel effect idea from here: http://www.absolutecross.com/tutorials/photoshop/interfaces/plastic-tabs/
Using the tutorial link, I have used that to produce the banner for the website, where this can be seen in the print screen below. I have used the fonts of Wicker SSH and Hannibal Lecter to produce the text; where I have used a dotted line brush to create the decorations as well as the filled the top layer of the banner with diagonal lines to create a more "Mac" effect.
Unit 9: Project Planning
I have finished desiging the Profiles page; where I have contacted my client via emailing her the design of the Profiles page, this was done by scanning the design using a scanner and sending it to her via email. With the quick response of the design, my client has agreed with all the designs of the website, therefore I can finalise all designs and start producing the website according to the designs. According to the Gantt Chart, this was suppose process was originally meant to stretch till the 09/02/07; however it only took one day to complete in, therefore there is some adjustments needed to be done to the Gantt Chart with the changes of schedule.
Unit 9: Project Planning
I have already shown them to my client in the second client consultation. She is pleased with all of the designs I have made, however she wanted some areas changed, this was:
- Originally, in the initial design of the "Background Information" page; there was to be also profiles of each of the members included on the page as well; however my client felt that there was too much information on the page, and it looked very packed together. Therefore she wanted the profiles section to be separate to the "Background Information" page, which meant I had to make a design for the Profiles page
Instead of having to research all the images of Dong Bang Shin Ki as well as the music and music videos of Dong Bang Shin Ki; my client has informed that she will provide all these. Therefore, the section on the Gantt Chart of "Research on Content, Images and Multimedia" will be taken out of the Gantt chart as this is no longer needed now, so further adjustment to the Gantt chart is needed.
I will now need to design the Profiles page before finalising the design on 07/02/07 according to the Gantt chart.
