[Web Graphics]1

Web Graphics: Processing Images to be Used on the Web

William Salley

Student ID: 010150177

Program Mentor: Sheffield Coulter

Assessment Code: TDT1 Task#2

April 30, 2022

[Web Graphics]2

Purpose

For this task I decided to create graphics for my school website/canvas page. I had just taken a
couple pictures a few days ago to document the fish origami project for JPT2 task1: Instructional
Unit. One of the aspects of the instructional unit was to build a student generated rubric. As part
of that process we started with an origami exercise. The origami is then opened up and used as
a graphic organizer. It is often difficult for students to follow along as we are labeling each of the
sections for our brainstorming. Being able to post an image of what the final planning page will
look like can help students see the big picture. “Origami with Mr. Salley” is a technique that we
will be using often in the class. I thought it might be a good idea to go ahead and create a
section for the website. Therefore creating some other graphics like a splash page for the
origami lessons would be ideal.

Target Audience

The intended audience for this set of graphics is my Photography 1 class. The class is
composed of 10-12th grade students. So I wanted the graphics to be colorful, lighthearted and
reflect the theme of the project.

In photo 1, we’ve been very focused on ideation. The “Origami with Mr. Salley'' activities are
designed to help students start to do planning for our projects. It helps manage impulsivity by
having a clear vision of what they are going to be shooting, what techniques they’re going to be
using, and a clear vision of how they can demonstrate their own growth. I’m hoping that the
graphics will be another way to help entice and engage the students.

Process

When Creating original graphics, it is important to consider in what way the finished graphic will
be used. If designing for print purposes you want to make sure you have a higher resolution; on
the other hand when designing for the web, it’s really important to keep in mind the file size. The
bigger the file the longer it’s going to take to load the page. Using appropriate web supported file
formats is also very important when creating graphics. I will be mostly using JPEG, GIF, and
PNG files to upload to my Weebly site.

1. Open the File

The first thing is to double click the file, mine was located in the downloads folder on my Mac
computer from my last class(I had downloaded it from a previous lesson). The file automatically
opened up in Apple’s default application called Preview. I always keep a copy of Preview saved
to my dock. Preview is perfect for simple things like: adjusting size, adjusting color, and
cropping. Also you don’t have to have any special applications downloaded, or wait for
Photoshop to open. I even use Preview for signing documents.
2. Make a Duplicate File
[Web Graphics]3

Once the file is opened the next thing I’ll do is make a duplicate copy. Go to the top Menu Bar,
click file, choose duplicate.
3. Rename the file
Once the file has been duplicated(you should see a new file appear); go ahead and click on the
word “original” and change the name of the file to original_resize.JPEG; then hit return on the
keyboard. Giving the file a new name at this point ensures that the original file doesn't get
replaced with the higher resolution file. I always want to keep the larger file in case I need to
print it at a later time.
4. Adjust the Size
Next I will go up to the menu bar at the very top and click Tools, the fourth item down is Adjust
Size. Once you click on adjust size a dialog box will appear. Go ahead and click on the
drop-down menu on the right hand side that says inches and switch to pixels. Then adjust the
height or the width depending on the orientation to a maximum size of 640. Go ahead and set
the resolution to 72 for screen resolution. Print resolution would be 300 pixels per inch. Also
make sure you keep scale proportionally and re-sample image size so that it does not squish or
stretch the image.

5. Save the File

Go to the top Menu, click on File, Choose Save. Because we already named the file it will just
save the file to the same location as the original and there is no dialogue box to finish saving.

The way that you’ll proceed in the next steps depends on your end use. You can either re-open
the original file and then use that to do your cropping or if you know it’s going to be a Web
graphic and you want to go ahead and just crop the smaller resized image then use that file.

6. How to Crop
With either file open, repeat the steps to duplicate the file(step 2) and rename the file(step 3) as
“Original_cropped.jpeg”. Then take your cursor to the inside of the image area, draw a box
around the area that you want to include in your photo. If you need to adjust the size of the box
use the handle boxes at the corners and sides of the rectangle to adjust the size. Once you
define the image that you want, go up to the top menu bar, click on the Tools Menu and from the
drop-down choose Crop. The image area that is outside the box will disappear. Save the
file(step 5).
[Web Graphics]4

Again like last time, it’s going to depend on your purpose which file you’re going to want to open.
Let’s say for instance you were going to be doing a rollover button and you want there to be a
color change and you want to use the exact same cropped small image. Then you would want
to start by duplicating that file. If instead you were doing something completely different with the
image you may want to start by reopening the original image. Just think about what your end
purposes are and choose the appropriate file.
7. Change Color
Now that you have the file open, go ahead and repeat the steps for duplicating(step 2) and
renaming the file(step 3), call for file “original_adapted.jpeg.” Take the cursor up to the top menu
bar, click on tools, from the drop-down menu choose adjust color and click.
[Web Graphics]5

After clicking on adjust color a new dialog box will pop up. I like to move the Adjust Color
window off to the right or left hand side of my picture. There are several ways to edit the photo
from here. I chose to go for an overall color wash. So I took the saturation slider and moved it
towards the left to minimize the original color. Then I took the temperature slider and moved it
towards the left to give it more of a blue hue. I took the tent slider and moved it to the right to
add more red creating more of a purple color in the end. I wanted the fish to look a little more
like it was underwater. There are also options for doing things like exposure highlight shadows
and utilizing the histogram at the top of the adjust color window. Once all of the adjustments
were made to my liking I went ahead and saved the file(step five).

8. Scan and Image

The next thing that I needed for my website was a clean copy of the interior instructions of the
origami. It is often hard to get a good flat picture because of all the folds from the origami. So
I’m going to opt to use a scanner this time for creating the graphic. I have a scanner/printer both
at home and in the classroom. To scan I will typically just click on the printer icon at the bottom
right hand side of my dock. Once the dialog box opens there is a scanner icon at the top right
hand side of the devices. Once the scanner icon has been selected the window changes and I
can do a preview of what’s on the scanner bed. I went ahead and placed my document face
down at the bottom right hand corner of the scanner’s flatbed. Once the preview has been
established I drew a box around the area of the scanner that I wanted to include. Next I went
ahead and set the output resolution to 300 so that I would have a higher resolution image. Again
not knowing how this image might be used in the future I would like to start with a high
resolution image. Print resolution is 300 pixels per inch. The other option I chose was toName
the file “Scanner”, choose jpeg as the file type and direct where the file was going to be saved. I
went ahead and put it in with my other images that I have been creating earlier. Lastly I clicked
the scan button at the bottom right hand side of the window.
9. Resize the Scan
[Web Graphics]6

Once the file was saved I went ahead and open the file(step 1), duplicated the file(step 2),
renamed the file(step 3), and adjusted the size to 640 pixels(step 4). Once the file size was
reduced I went ahead and saved the file(step 5).

10. Using Photoshop to Create a Graphic

The next thing that I felt the website needed was a graphic for “origami with Mr. salley “. I
decided this time to utilize Photoshop to create an original file.
● I started off by opening up the fish photo,”Original.jpg”, from earlier.
● I went up to the top menu bar and clicked Select and then from the drop-down choose
Subject. It made a good selection of the fish.
● There was a small area that was not correctly selected, so I used the polygonal lasso
tool to take away a few areas to clean up the selection.
● Once the selection was complete I hit command J on the keyboard to make a new
duplicate layer with only the fish.
● Then clicking on the background layer to make it active, I went ahead and replaced it
with a gradient, by selecting the gradient tool from the left-hand side toolbar, then at the
top I clicked on the options and opened the blue folder and chose a light to dark
gradient.
● I clicked and dragged within the background image area to create a light to dark gradient
because inside the ocean it is brighter towards the weighted surface and gets darker as
you move deeper in the ocean.
● I noticed that the fish was too large so I clicked on the fish to activate the layer, hit
command T on the keyboard for transform
● Using the top left control box I dragged the image towards the bottom right to make it
smaller. When I was happy with the appropriate size I double clicked to activate the
transformation.
● Once the transformation was done a hit command V on the keyboard and moved the fish
towards the bottom right of the canvas.
● Next I decided I wanted to use bubbles to create a kind of a thought bubble for the fish.
● So I opened up a new tab inside of chrome and typeed “free bubble brushes photoshop”.
The new search results gave me a link to brusheezy, it is a website I had used in the
past with students for projects. I looked through their page and found a group of bubble
brushes that would work for me.
● I clicked the download button. Once the files download it,I clicked on the download at the
bottom left of the chrome window in order to unzip the file.
[Web Graphics]7

● Once the file was unzipped went back into Photoshop and chose the brush tool on the
left-hand toolbar or the B on the keyboard. And then clicked on the suitcase icon next to
the brush options. From the brush tab I clicked on the menu bar at the top right and
chose import brushes the dialog box appeared and I used the left-hand side bar
downloads to locate my brush for files called “Free_Bubble_Photoshop_Brushes_3.abr”.
● Once the brushes had been loaded I went ahead and scrolled through the different brush
options by clicking and then moving the cursor inside the window to see what the brush
was going to look like.
● Once I found a formation that I was happy with I went ahead and set my foreground
color to a light blue.
● I made a new layer from the layers palette at the bottom right hand side of the screen
and on the new layer I stamped one time to create the bubbles.
● The bubbles felt a little bit flat, so I went ahead and double clicked on the bubbles layer
and from the layer styles chose emboss. It gave it a little bit more of a three
dimensionality.
● I then decided that I needed to put in the text so I went over to the left hand tool bar and
clicked on the big T
● I choose a font from the options menu and selected a font size of around 300 pixels. I
clicked near the top left-hand side of the circle of bubbles. And typed the word “Origami”.
● Then I went to the move tool and then back to the type tool, brought the cursor back
below the origami and clicked and wrote the words “with Mr. Salley”.
● Once both parts of the type were in place I highlighted the top word origami and went to
the options bar at the top middle of Photoshop and selected the type warped tool.
● Then from the drop-down of styles I chose Ark, I adjusted the bend and distortion until I
was happy with the shape of the word origami.
● Finally I decided that the word origami needed a little more punch, so I double clicked on
the layer and the layer styles clicked at the bottom option drop shadow and adjusted the
distance, angle and opacity until it felt as though it had a little more separation from the
background.
● Once I felt satisfied with the overall composition I went ahead and went to the top menu
bar and clicked file save as when the dialog box opened I went ahead and gave the file a
name “Paint”, chose the Photoshop format and told it where to save. I always like
keeping a Photoshop document in case I make a misspelling or need to modify or
change the document in some way. I don’t wanna have to go back and do the work
again.
● But for the Internet I needed a JPEG, so I went up to the top menu bar, clicked on file,
and from the drop-down chose make a copy. From the make a copy dialog window I
chose my format which will be JPEG and said OK.
● The next dialogue box opened up and I chose to move the quality slider to 12. This is a
personal decision. This control is going to determine how much compression the JPEG
is going to create. Because I have a gradient and drop shadows I wanted those areas to
remain smooth therefore I opted for the 12 quality. Understanding that this will be a
larger file but a better compression.
[Web Graphics]8

11. Resize the Paint file

Once the file was saved I went ahead and double clicked on the JPEG to check the
compression(step 1). While it was open in preview I went ahead and made a duplicate copy
(step 2), renamed the file(step 3), resized the image to 640 x480 (step 4) and saved the file
(step 5).

12. Outside Graphic

[Web Graphics]9

For outside graphics I like to use Pexels. It has beautiful royalty-free images for free. It also easily
provides photo credit and a link to make it easy to cite for the website.

Photo by Miguel Á. Padriñán:

https://www.pexels.com/photo/shallow-focus-photography-of-paper-crane-1272838/