Andrea Ausmus

1/27/2020

GIT 334: Image Editing & Manipulation

Creative Project 1

HTRI Website Banner

HTRI needs a website redesign and a large portion of this is the website banner. The last update of this site was
done in 2016 and even then, it was only textual content changes. As I am responsible for updating the website a
new banner would be beneficial as well.

The benefit to a new banner is to provide return customers a new visual to establish the new version of the
website. It will also allow for a new option for image-based SEO. Establishing the proper image type and size is
important for this step. More SEO allows for more traffic on the website.

File Properties

• Color space

sRGB

For HTRI the banner on the website needs replacing. This means that I need a color space that is suited for
web and screen displays. sRGB is best because it is designed for the color space of a standard monitor
(Adobe Help X).

• Color profile

sRGB

For HTRI the banner on the website needs replacing. This means that I need a color space that is suited for
web and screen displays. sRGB is best because it is designed for the color space of a standard monitor
(Adobe Help X).

• File format

Jpeg

My final solution will not need to be either transparent or animated so the best solution for the web in this
case is a .jpeg (Lazazzera, 2019).

• Resolution

72 px
 There is no need to provide a resolution greater than 92ddpi – 72dpi is even more standard. I will be using
the Photoshop function of ‘Save for Web’ to ensure the image is set for the best resolution for web (Editors
for Jimdo).

• Dimensions

728 x 90 pixels

The current image on the website is 850 x 95 pixels. I feel though this may be a little short for what I want to
represent. I think that I may want to have a banner with the dimensions of 728 x 90 pixels for a more
substantial visual at the top of the page (Duque, 2018).

Techniques Used

1. Technique #1
i. Camera Raw

ii. I took a photograph of my keyboard to process into the final image. To import this image that was
taken in .NEF I needed to use Camera Raw. I also wanted to color correct it to more closely align to my
final plans for the banner.

iii. I am going to use this a fade into another image that I will be subsequently using in my final copy. To
make it more impactful I used exposure, contrast, highlights, and shadows to make the image more
intense. I also decreased the vibrance and the saturation to intensify the blacks and remove more of
the yellows from the original image (as shown in Figure 1). The final settings for my final version are
shown in Figure 2.

Figure 1: Original Figure 2: Camera Raw settings

ii. I initially planned on creating my image in the dimensional size that I set in my “File Properties” section
(728x90 px). This unfortunately left me with pixel loss.

iii. To have a cleaner final product I chose to start with 7280x900 px canvas size with a resolution of 300.

3. Technique #3
i. Duplicate Layer…

ii. I needed to place several different images into a single image using layer comp to do this I needed to
first bring in my original layers to place within my new canvas.

iii. I duplicated the map and keyboard layers into the new canvas. I did not do this with the gear or code
layers because I found both images on Adobe Stock and I instead used Libraries to port the image into
the canvas.

4. Technique #4
i. Color Range

ii. To have the image of the earth transparent in the areas that I wanted the code to show through I
needed to start by selecting the areas that I wanted to mask.

iii. To do this I selected the area by using the Color Range option. The earth image was black and white so
a selection of the black color was done quickly and easily with
this option.

5. Technique #5
i. Select and Mask…

ii. To have the image of the earth transparent in the areas that I
wanted the code to show through I needed to mask the white
areas.

iii. Using the Select and Mask, I chose to output to a layer mask. I
did little, if any changes to the settings because the layer
selection was so clean using the Color Range option.

6. Technique #6
i. Layer > Layer Mask > Reveal All Figure 3: Select and Mask Settings

ii. I wanted both the keyboard and the gear images to blend in and allow a small amount of the code to
show through. I essentially wanted a partially gray mask fading into a black towards the image’s center.
 iii. To do this I first needed to create a layer mask. Unlike the map I wanted to have
control of how much of the mask was laid down. With the brush settings set with
0% hardness and 1% spacing and, the mask selected, I clicked and click-dragged
with the color black (to block) until I was happy with the final product.

7. Technique #6
i. Match Color

ii. The colors of the keyboard and the gears did not offer easy visibility to the eye.

iii. To fix this I used the Match Color tool to match the keyboard colors with the
coolness of the tone in the gears image.

8. Technique #6
i. Blending

ii. The world layer did not pop on the page as much as I liked.

iii. To solve this, I used the Blending tool. I first created a drop shadow and then
also used the Multiply setting on the Blending options to make the code
stand out more.

Figure 4: Match Color Settings

Figure 6: Blending Option Settings Figure 7: Drop Shadow Settings

I found these gears on Adobe Stock and felt that they gave a similar feel to the original version of the banner.

HTRI uses mechanical, electrical, software and many other types of engineering problem-solving to create
solutions for their customers. I wanted to create a banner that more relates the cross-industry solutions as well
as the symbolism of the gears.

Again, on Adobe Stock I found this Illustrator file and plan on incorporating this into the final design to signify
the programming solutions available at HTRI. It is binary so it is more aligned with their specialty in machine line
and lower level programming. This I plan on echoing with the use of my image of my keyboard.

To recognize the global aspect of HTRI I wanted to imprint the globe within the machine code.
My initial brainstorm was a quick sketch on a narrowly folded piece of printer paper.

Challenges

• I struggled at first because the images of the world and the code were Illustrator files.
It was difficult to learn how to port the image into photoshop without losing or gaining data that would
not be helpful for my end goal.
To overcome this, I found that the library could create layers by dropping them into my canvas. This
allowed me to have the code show up correctly.

• Trying to find a way to still implement the gears into the final image was frustrating but I eventually
found the image to do this with balance.
 Appendix

Citations

Duque, M. (2018, December 10). Top 5 Most Effective Web Banner Sizes. Retrieved from
https://thisdesigngirl.com/top-5-effective-web-banner-sizes/

Editors for Adobe Help X. (n.d.). Color settings in Photoshop. Retrieved from
https://helpx.adobe.com/photoshop/using/color-settings.html

Editors for Jimdo. (2019, October 18). How to Optimize Images for Better Web Design & SEO: Jimdo.
Retrieved from https://www.jimdo.com/blog/optimize-website-images-for-better-design-seo/

Lazazzera, R. (2019, January 29). Optimizing Images for Web: A Step-By-Step Practical Guide. Retrieved from
https://www.abetterlemonadestand.com/optimizing-images-for-web/
Current HTRI Banner

3 Examples of Similar Commercial Web Banners

1. https://www2.deloitte.com/global/en/pages/technology/solutions/technology-integration.html

2. https://componentrepair.com/repair-processes/

3. https://siteready.com/services/
Before and After Images

Gears:
Keyboard:

Adobe Stock
Search term: gears Photograph by Andrea Ausmus

Using Nikon D3300 w/ Nikon AF-5 Nikkor 18-55 mm

f/5.6 -- 1/160 s -- ISO 3200

Map:

Adobe Stock
Search Term: code Adobe Stock

Search Term: world map

Final Product: