-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtutorial.html
More file actions
110 lines (77 loc) · 6.27 KB
/
tutorial.html
File metadata and controls
110 lines (77 loc) · 6.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<html>
<head>
<title>InovIT: Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Turret+Road&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<img class="logo" src="pictures/InovIT.png">
<ul class="nav">
<li class="nav"><a href= "index.html"> Home </a> </li>
<li class="nav"><a href= "tutorial.html"> Tutorial </a> </li>
<li class="nav"><a href= "specification.html"> Specification </a> </li>
</ul>
<iframe src="https://player.vimeo.com/video/732863623?h=c66d48e403&badge=0&autopause=0&player_id=0&app_id=58479" class="animate-fading" style="border: 0;" webkitallowfullscreen allowfullscreen frameborder="no" width="100%" height="100%"></iframe>
<div class="content">
<h1 align="center"> Tutorial </h1>
</br><a href="#step1" class="anchor"><h3>Step 1: Crop and straighten the image</h3></a>
<img src="pictures/crop tool.png"><b>Crop Tool</b></br>
<center><img src="pictures/cropping.png"></center>
<p>Cropping is the process of removing portions of a photo to create focus or strengthen the composition. Use the Crop tool to crop and straighten photos in Photoshop. The Crop tool is non-destructive, and you can choose to retain the cropped pixels to optimize the crop boundaries later. The Crop tool also provides intuitive methods to straighten a photo while cropping. </p>
<p>You can straighten a photo while cropping. The photo is rotated and aligned to straighten it. The canvas is automatically resized to accommodate the rotated pixels. Place the pointer a little outside the corner handles, it will show a curved line, and drag to rotate the image. </p></br>
<a href="https://helpx.adobe.com/au/photoshop/using/crop-straighten-photos.html">(Adobe,2019)</a></br>
<a href="#step2" class="anchor"><h3>Step 2: Repair small imperfections</h3></a>
<img src="pictures/clone tool.png"><b>Clone Stamp Tool</b></br>
<img src="">
<p>The Clone Stamp tool allows you to copy one area of an image onto another area of an image. Photographers and designers use the Clone Stamp tool to remove unwanted elements from a photograph. For example, it can be used to cover blemishes on people's faces (by copying from another part of skin) or removing trees from a mountain view (by copying parts of the sky over them).</p>
<p> To clone from an area of the image to cover blemish; or match the shading & texture of the source with the area to be repaired.</p>
Steps:</br>
1. Select the Clone Stamp tool</br>
2. Option (Alt) +click to select a source area</br>
3. Move curser to the spot</br>
4. Click to complete.</br> </br>
<a href="https://www.lifewire.com/photoshop-clone-stamp-tool-tutorial-1697534">(Lifewire, 2019)</a>
<a href="step3" class="anchor"><h3>Step 3: Adjust the overall contrast/tonal range</h3></a>
<b>Levels</b></br>
<center><img src="pictures/levels window.png"></center>
<p align="center">Shown above is the default display of the Levels panel.</p>
<p>You use the Levels adjustment to correct the tonal range and color balance of an image by adjusting intensity levels of image shadows, midtones, and highlights. The Levels <a href="https://helpx.adobe.com/photoshop/using/viewing-histograms-pixel-values.html">histogram</a> is a visual guide for adjusting the image key tones.</p></br>
<center><img src="pictures/levels window daarker.png">
<p>Slide the black marker on the scale to set how bright/dark the darkest colours in the image.</p></center>
<center><img src="pictures/levels window lighter.png">
<p>Slide the white marker on the scale to set how bright/dark to brightest colours in the image.</p></center>
<p>
On the Levels panel, either click on Auto (to stretch histogram automatically), or manually adjust the options.</br> </br>
</p>
<a href="https://helpx.adobe.com/au/photoshop/using/levels-adjustment.html">(Adobe, 2019)</a></br>
<a href="#step4" class="anchor"><h3>Step 4: Remove colour cast</h3></a>
<b>Color Balance command</b> </br>
<center><img src="pictures/color balance.png"></center>
<p>The Color Balance command changes the overall mixture of colors in an image for generalized color correction.<a href="https://helpx.adobe.com/au/photoshop/using/applying-color-balance-adjustment.html">(Adobe, 2017)</a></p></br>
<center><img src="pictures/color balance removing purple.png"></center>
<p>Remove the purple tint, by moving the sliders away from Red and Blue (Red + Blue = Purple)</p>
<a href="#step5" class="anchor"><h3>Step 5: Fine-tune specific parts of the image</h3></a>
<center><img src="pictures/spongeburndodge.png"></center>
<p>A. Use the Dodge/ Burn tools to exaggerate the lights/shadows of the drums in the centre and back. Use the <img src="pictures/dodge.png">Dodge tool to bring out highlights. Use the <img src="pictures/burn.png">Burn tool to bring out shadows.</p>
<p>B. The Burn can also be used to lower the brightness at the upper left area of the yellow drum in the front, to make the pattern appear.</p>
<p>C. Again, the Burn tool can be used to darken the boxes in the background, to push them further back.</p>
<p>D. The <img src="pictures/sponge.png"> Sponge tool is used to saturate the red fish shape on the drum. </p>
<p>E. The Clone Stamp is used to retouch the white spots (where the paint has chipped off) on the first drum in front. Select the unaffected yellow paint as the source area.</p>
<a href="#step6" class="anchor"><h3>Step 6: Adding a border & sharpen the image</h3></a>
Adding a border
<b>Image > Canvas Size...</b></br>
<center><img src="pictures/canvas size.png"><img src="pictures/canvas size final.png"></center>
<p>
To add borders, tick the 'Relative' checkbox, then change the 'Canvas extention color' to color yellow or any desired colors, lastly, type 45 inches to both width and height.
</p>
<b>Go to Filter > Sharpen to sharpen the image </b>
<center><img src="pictures/sharpen.png"></center>
<div id="drag"><img src="pictures/Untitled-1.gif"></br>
Drag me for reference! </br></div>
<script src="script.js"></script>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br>
</div>
<div class="footer">InovIT | Created by Amanda Viray | © 2019</div>
</body>
</html>