Andrea Ausmus

3/1/2020

GIT 334: Image Editing & Manipulation

Creative Project 2

HTRI Website Home Page

What I made:

HTRI needs a new website design. They are not competitive when compared to other websites. To remedy this, I
looked at other sites that focused on ‘Technology Integration’. SiteReady (See Appendix) used a repeating
pattern of triangles to subtly represent integration as an undercurrent of their home page.

HTRI’s current website uses text to introduce their company on their homepage. Looking at industry standards
of user space this is too wordy. The image that I designed should encourage the user to see the intention
without the wordiness.

I also took this opportunity to lightly update the logo. Keeping the font and the colors I added an additional top
and bottom border of black and white using the machine code from the banner I created in Creative Project 1.

File Properties

• Color space/profile

The best space and profiles for computer displays are sRGB. This is because the space is designed specifically
for the standard computer monitor.

• File format

Any images used on the website will be formatted as Jpeg. None of the designs use animations or are
needing a blank background.

The final website will be developed with HTML5 as the base code and using other languages as support for
functionality.

• Resolution

72 px

There is no need for a higher resolution when designing for the web. The average display often does not
have a better resolution.

• Dimensions

The dimensions will need to be able to change according to the screen that views them. I focused on an
average monitor screen size and fit my graphics to match.
Techniques Used

1. Technique #1
i. Select and Mask (hands and computer)

ii. The hands shaking image had a white background that I needed to remove to combine the hands with
the hexagon shape. I also wanted to add more depth to the hands.

iii. I needed to change the screen output for the computer to more relate to the final ‘story’ that I was
trying to create with my image.

iv. I selected the computers screen to “remove” and replaced with the image of the gears.

2. Technique #2
i. Smart Filters: Hue/Saturation (hands)

ii. For the hands I wanted to integrate them into the blue hexagons. The skin tone was a stark contrast to
the blue.

iii. To fix this I added a hue filter of a matching blue to help settle the image for the eye.

3. Technique #3
i. Smart Objects (multiple)

ii. I was making multiple changes across the final image. Smart objects kept each layer safe as I ‘forced’
them into the final form.

iii. I used multiple layers of smart objects. This allowed me to create the final image as a piece meal giving
me option to change the final copy until I was happy with it.

4. Technique #4
i. Transform Tool: Perspective (gears)

ii. I needed to change the perspective of the gears to more match the computer.

iii. I used the transform tool to change the perspective of the gears.

5. Technique #5
i. Effects (gears)

ii. The gears color added distraction to the final piece.

 iii. I used the effects inner glow and color overlay to help settle the image into the computer display. I
added a blue color overlay to match the handshake panel more closely and added an inner glow to help
develop the feeling of it being a screen for the computer.

6. Technique #6
i. Color Adjustment

ii. The blue of the final image was too intense for the page.

iii. I took the image and adjusted to the gray color with the red as an undertone to more match the
websites color range.

7. Technique #7
i. Compositing

ii. I alluded to this above with the Select and Mask (gears) but I wanted to be able to create a display on
the laptop that more applied to the company being represented.

iii. I used two images the gears and the laptop to give the illusion of the gears being displayed on the
laptop. I needed to change the perspective and the color of the gears to more closely match the laptop.
I also included a inner glow to help create the feeling of the inner glow of a computer screen.

8. Technique #8
i. 3D

ii. I used the 3D function for the Tagline.

iii. Using the New 3D extrusion from selected layer I made a 3-dimensional form of the text.

iv. I also wanted some depth to the hands image but using the 3D extrude was too much.

v. I found that the light use of the Bevel effect left the hands appearing more raised. Enough to not
appear as flat in the image when combined with the other elements.

9. Technique #9
i. Retouching

ii. I had forgotten until the end that I needed to use retouching as a part of my final image. As I was
looking over my image, I noticed though that the hands had obvious age spots and freckles that
distracted from the final version interposed over the hexagons.

iii. I used the Spot Healing Brush tool to smooth out any imperfections that distracted from the final copy.
Creative Process
I first started by developing my header. I wanted to add in the
sections that I left out of my CP1 banner. The logo and the tagline
both needed to be included. I mocked this up in Adobe XD as well
as created a wireframe to establish the page formatting that I was
looking to create.

I played later with different shapes for the image as I liked the
look of SiteReady but I was not happy with using to much of their
website as inspiration, so I left the shape as the box.

I knew that I wanted to establish more meaning to the home page and use less words to convey that meaning.
So, I set about combining the intention behind the mission statement on the current homepage.

To represent the technology integration aspect of HTRI’s business focus I looked for images that showed
multiple industries. HTRI is known for their use of computer programming, hardware, and mechanical
engineering to produce the integrated products that their customers are looking for. I used images of circuit
boards, computers, and gears to help create a concrete image to help the user understand that these are
primary focuses of HTRI.

To increase the expectation of strong customer interaction I used an image of hands shaking and overlaid it over
the hexagon image to show that the integration focus is not only on the technology but also on the customer
satisfaction.

Final Image
Challenges

• I really wanted to create more depth in the hands of the final image. I was disappointed with the final
version in respect to this.
• The color balance was hard to achieve. Trying to balance the red of the logo without transforming the
image into a red splotch was frustrating. In the future I may request a total color change to the logo. For
the time being I think that I was able to settle the brightness into the final page.
 Appendix
Current HTRI Banner
3 Examples of Similar Commercial Web Sites

1. https://www2.deloitte.com/global/en.html
2. https://componentrepair.com/repair-processes/
3. https://siteready.com/services/
Assets from Adobe Stock

Computer/Programming

Shake Hands

Circuit Board

Binary Code

Gears

Blue Hexagon – Collaboration