1

Criterion E: Product Development

Advanced techniques used to meet the needs of the client:

Manipulated graphics (Pages 12-16)

Navigation using frames and customized buttons (Pages 16,17)

Integration of components using advanced features from other applications (Pages 18-22)

Proficient integration of the different elements of multimedia (Pages 12-22)

 2

Organization of the website (Document object model)

Colopy Paintings main page shows the forms of navigation used.

1: Demonstrates the main navigation bar in the header of the webpage, splitting the website into
9 sections (As Painting has three subsections):
Home Page
Painting
o Interior Painting
o Wallpaper Removal
o Exterior Painting
Carpentry
Pressure Washing
Contact
About
2: Hyperlinks provided at the bottom of each page as an additional guide to bring visitors to the
contact page
3: Images used as visual guides to each pages content, also act as hyperlinks
The site has multiple links to the various pages (With navigation bars at the top and bottom) To
make maneuverability easer for a visitor and to encourage browsing.

3
 3

HTML Code:
Home:
4
5
 6

Exterior Painting:
7
8
9
10
11
 12

Webpage Layout and Design

Technique: Manipulated Graphics

To best illustrate Jon Colopys work, and to give the webpage a more completed and
optimized feel, pictures provided by Jon where edited and then placed on the website. The
graphics were edited in a free program called GIMP, which stands for GNU Image Manipulation
Program. In this the imaged were cropped, watermarked, and exported as PNGs.

Below is the unedited base image:

Once I had the base image loaded into GIMP as a layer, I began by cropping it so as to ensure no
future edits would be cropped out.
 13

The image was cropped to 1576x1036 pixels in order to best match the rectangular shape of a
standard thumbnail. This estimation was based on Googles suggestions for a YouTube
thumbnail (approximately 1280x720 pixels)
(https://support.google.com/youtube/answer/72431?hl=en). This way, the image had a scalable
thumbnail size which was applied to all of the thumbnails on the home page.

After this a watermark was applied to each picture. Each watermark was in 54px font size and in
white so that it was easily visible in the corner of the image, but did not obstruct the main part of
the image. Each watermark also used the same font: Trebuchet MS.
The watermarking process is shown below:
 14

Text is entered and changed to the appropriate font and size (then 54px):

Color is changed to white for visibility:

 15

Opacity is lowered to allow the section of the image behind the text to be viewed easily:

After each watermark was placed, the opacity was turned down to ensure that none of the image
was obstructed and could be seen behind the watermark.
Once the image was edited, it was exported as a PNG. A PNG was chosen as the desired file
format because the image will be displayed on the web, and PNGs are lossless (dont lose image
data when compressed), portable, and well-compressed. This means that PNG images load faster
on the web than other formats and do not lose data when recompressed.
http://www.w3.org/QA/Tips/png-gif
This process is shown below:
 16

Exported file format is set to .png and placed on the desktop for upload later:

Technique: Navigation using frames and customized buttons

In the design of the website, it was decided that it may be a good option to provide a visual
navigation menu on the homepage to encourage a visitor to explore more of the website. In
addition to the navigation bars at the top and bottom of the we included image thumnails created
using the HTML tag <a href=> in order to link the page the image represents to the image itself.
 17

Shown below is the HTML code behind the insertion of the hyperlinks, before and after:
Before:

After:

The <a> tag with the href attribute was applied to only the image and not the caption attached to
it in order to make the image alone the link, as this gives more space between buttons and
prevents someone from clicking the wrong link. The href attribute specifies a specific destination
address for the link to travel to. The <a> tag was on the pictures rather than just text leading to
each page because images draw the eye more than simple text in a paragraph. A potential
customer could see the picture and what it represents and feel inclined to learn more based on
their needs. This is why images were cropped to thumbnail size: for use as links.
 18

http://www.w3schools.com/html/html_links.asp
Technique: Integration of components using advanced features from other applications

Jon wanted to have a new logo/banner for his company, as his previous (then current) one was
outdated and not to his liking. So, a new one was made by following Jons suggestions and
guidance to create what he wanted (Bold for Colopy, normal text for Painting, then some art to
make it stand out). I decided Adobe Illustrator would be the best option for creating a logo
because it has options for text as well as options for artistic brush strokes that look like
paintbrushes. Additionally, Adobe Illustrator draws using vector graphics, so once I had an art
design I liked I could rescale it without pixilation occurring.
Below details the creation of the logo:
The font Trajan Pro 3 is applied, giving the text a professional serif font (Colopy is bolded):
 19

Next, the Paintbrush tool is used, then the Brushes menu is opened and the Artistic Paintbrush
library is opened to select a brush that looks like a paintstroke:

Next, the red color from the old logo is used to make the new logo more consistent with the
website color:
 20

The hex color code is taken for the red color and then applied to the brushstroke on the new logo:

Lastly, the Artboard tool is used to resize the artboard, making the image smaller and sized as a
logo, then exported as a PNG file.
21
 22

Finally, the new logo is put on the website in the header as a PNG.

Word Count: 997