Many beginners of Photoshop make the mistake of using the crop tool to adjust a photograph’s proportions. Unfortunately, this creates a few problems, such as altering the original photo, working with the wrong resolution, and making an exact final sized image.
Rather than utilizing the crop tool, I’ll be discussing an alternative method to crop and scale an image in today’s post.
In Photoshop, open an original image.
Under IMAGE>IMAGE SIZE (OPT, CMD, I), do not “resample.” Set the needed resolution (72 for digital, 300 for print). Notice that the pixel count remains, but the dimensions change. Determine whether the measurements are acceptable for the type of media.
In Photoshop, FILE>NEW (CMD, N). Enter the desired resolution and the exact width and height. (This file will be the finished “cropped” image.)
Go back to the original image file and “select all” (CMD, A). Then “copy” image (CMD, C).
Go back to the new file and paste (CMD, V) the original image. A new layer will appear.
If the image needs to be scaled to a different size, use the “free transform” tool (CMD, T). Remember to hold down the SHIFT key to change proportions accurately and grab a corner of the photo to enlarge or shrink. You can also use the “free transform” tool to move the image to adjust the image’s placement.
Managing the layers of an InDesign file is essential. By organizing these files’ structure, you will be reducing confusion for preflight instructions. In the design phase of a project, you will be able to rapidly alert your designs. Here are a few tips for organizing layers.
Name the layer based on what it is; in the below example, the waterfall layer contains all the elements with that feature.
Organize the artwork based on features. In the example, perhaps the client wanted a different background color. This request could be accomplished very quickly because all background elements will be in one layer.
Background color was removed.
Rearrange the layers’ stacking order based on which elements should be on top. In the example, the text layer is before the landscape layer. The guitar layer is on top of the pinata layer.
In my last post, I talked about the importance of organizing layers. The same is true for the elements that are within each layer. When I began to work in InDesign, I was confused about when to use placeholders and when to use text boxes. When utilizing text boxes, should I use a combination of text formats within one text box or separate each text font? I came up with the following answers.
Placeholders are used for:
Raster or vector images
Paths or closed shapes
Background images or colors
Anything that needs text wrap on it
Separate text boxes are used for:
Captions
Credit lines
Header or Footer (usually on Master)
Combination text boxes are used for:
Headlines with body copy, (especially for headlines which “span columns” of the body copy.)
The following example is a text box that includes many different font sizes. The only additional placeholder boxes are the two images, which have text wraps.
InDesign includes the technology to create an infinite array of colors. In today’s post, I’ll review tints, shades, and the transparency effect.
Tints are hues which have a percentage of white added to them. (Refer to the first row of the above example.)
When creating a tint swatch in InDesign, choose the “New tint swatch” option. Then use the tint slider to regulate the percentage of base color swatch.
Shades are hues which have a percentage of black added to them. (Refer to the second row of the above example.)
When creating a shade swatch in InDesign, choose the “New color swatch” option. The color type should be “Spot” and the color mode should be “CMYK.” Then adjust the black slider to regulate the percentage of black color.
A transparent color is a hue which has an opacity less than 100%. (Refer to the third row of the above example.) Spot colors, such as Pantene, cannot be used to create a transparency effect.
When creating a transparency effect in InDesign, first select the base color swatch. Go to OBJECT>EFFECTS>TRANSPARENCY. Change the opacity percentage.
In addition to the “normal” blending mode, the transparency effect has four other modes which result in the following special effects.
In this final post, I discussed the different types of lights and the various facial effects that can be achieved by directing light. Today, I’ll put them all together to discuss the four traditional lighting setups and how to place the different types of light (key, fill, hair, and background) to obtain their unique lighting effect.
The first lighting setup we will be discussing is Rembrandt lighting. Rembrandt lighting is most recognizable by the shadow from the nose connects with the shadow of the cheek. This creates a signature triangular highlight on the cheek. Besides creating a dramatic effect, when Rembrandt and narrow lighting techniques are used together, it will slim the subject’s face.
As seen in the below diagram, the main/key light is located 45 degrees to the side of the subject. The main light is not directly shown on the subject’s face but instead shown slightly in front of the face.
The camera is located in front (and below) the fill light.
The next lighting setup we will be discussing is Butterfly lighting. Butterfly lighting is recognizable by the symmetry of the shadows. It not only creates bottom shadows from the nose but also under the cheeks and neck. For older subjects, the butterfly lighting pattern fills in and lightens many of the shadows in the wrinkles, and it creates a shadowed area under the chin to hide wrinkles in the neck.
As seen in the below diagram, the main/key light is located directly and above the subject. Unlike Rembrandt lighting, it is directed at the subject’s face.
The camera is located in front (and below) the main light.
The next lighting setup we will be discussing is Split lighting. Split lighting is recognizable by the vertical and symmetrical division of the face; the end result is that one side is lit, and one side is shadowed. This effect creates a dramatic mood. Since it creates sharp angles, it also creates a masculine portrait.
As seen in the below diagram, the main/key light is located 90 degrees to the side of the subject. The main light is not directly shown on the subject’s face but instead shown slightly in front of the face. For more dramatic effects, using modifier “strips” will concentrate the light to specific facial areas.
The camera is located directly in front of the subject.
The last lighting setup we will be discussing is Loop lighting. Loop lighting is very similar to Rembrandt lighting but does not have the triangular highlight on the cheek. Instead, the shadow from the nose does not connect with the shadow of the cheek. When loop and narrow lighting techniques are used together, it will slim the subject’s face.
As seen in the below diagram, the main/key light is located 30-40 degrees to the side of the subject. Directly slightly in front of the face, the key light is height adjusted to the subject’s eye level to ensure a catch light.
The camera is located in front (and below) the fill light.
In the last post, I discussed the different types of lights that portrait photographers use when setting up studio lights for portrait or product photography. Today’s post will discuss how light affects the face’s features and special considerations for the camera.
Portrait photographers need to consider how the light will affect the subject’s facial features.
When the lighting is directed on the side of the face that is most exposed, it makes a face look wider. When this occurs, it is called “broad” lighting.
When the lighting is directed on the side of the face that is least exposed, it is referred to as “narrow” lighting. This makes a face look slimmer.
Many photographers adjust the light to create a “catch light.” A catch light is a spot of light in the subject’s eyes, which adds sparkle and dimension to the subject. To create a catch light, you will need a bright light source that reflects in your subject’s eyes.
Portrait photographers also need to consider a few camera variables.
First, the focal distance needs to long since the photograph needs to close in on the facial features and not be in the subject’s personal space. A 70-200mm lens is an excellent choice to accomplish this.
If strobe lights are utilized, attach the transmitter to the camera.
Establish the white balance settings for the camera. When taking the base photo for the custom white balance setting, put the lens in manual focus, place the WB disc in front of the lens, and direct the camera toward the key light. Press the shutter button.
Portrait photographers use four different types of lights when setting up studio light for portrait or product photography. The strength of each of these lights differs based on the camera’s aperture. The power of the light is measured in F stops.
The Main or Key light is the strongest of all studio lighting. For outdoor photos, the sun would be considered this light. It will create the most vital highlights and shadows in the photograph. When adjusting the power for this light, the F stop will equal the camera’s aperture taking the photo. For example, if the camera’s aperture was F11, the key light should be metered and adjusted to F11.
The Fill light is used to soften the key light’s effects; this prevents the total impact from being too dramatic. When establishing the power of this light, calculate two F stops below the key light. For example, if the key light is F11, the fill light will be F5.6. This concept is considered a 5:1 ratio.
The Hair light is used to create a ridge of light to separate the subject from the background. When the subject’s hair is dark, and the background is dark, this light because essential in making the subject stand out. An evening or dawn sunlight can be used to create a dramatic effect in an outdoor setting. When establishing the power of this light, calculate one F stop below the key light. For example, if the key light is F11, the fill light should be F8.
The Background light is a light that is not directed at the subject. Like the hair light, its purpose is to differentiate the subject from the background. The background light’s strength is equal to that of the key light. For example, if the key light is F11, the background light should be F11 as well.
The lights were set at the following powers for the example photograph:
Recently, I came upon a technique that combines the facial features and the words of individuals. This process creates powerful images; the result could be the song lyrics that are distorted create the recognizable features of a musician or a prominent leader whose speech gave inspiration and hope to others. For this post, I will be describing how to create a typographic portrait in Photoshop.
Before we start working in Photoshop, two objects are needed. The first is a photo of the person you wish to portray. In this example, I saved a jpg file; however, a photo in png format will work too. The larger the photograph, the better results. This 72ppi resolution file of Abraham Lincoln is quite large at 2400px X 2800px, which is approximately 31 inches x 39 inches. Also, in this tutorial, I will be working with a black and white photograph. If the chosen photograph is colored, adjust it through Photoshop.
You will also need to create a “word wall,” which is a set of continuous text. I used the Textedit app to copy Lincoln’s Gettysburg Address, but any word processing software will work. After copying the speech, I removed all of the paragraph returns and spacing. I then copied the text repeatedly and continuously in the document to create a wall of words.
In Photoshop, we are going to process the photo in three sections. The first step will be to make adjustments to the photograph. If the picture consists of more than just the subject’s face, crop it slightly past the head’s ears, chin, and top. For this technique, we are going to capture just the facial features.
Because we want a high contrast between highlights and shadows of the face, we will next add an adjustment layer. For this photo, I decreased the brightness to -6 and increased the contrast to 37. You may not need to reduce the brightness, but make sure to increase the contrast.
The last phase of this step is to add a blur filter so that when the text wraps around the shadows, it will not be a dramatic distortion to the text. We still want to read the text. Go to Filter>Blur>Gaussian blur. Adjust the radius levels so that the lights and darks slightly blend into each other.
Save your work as a .psd file. Since you will not need the Gaussian blur effect in the following steps, undo this effect by pressing CMD Z.
In the second section, we will be working with the word wall to create a displacement map. Copy the word wall. In Photoshop and using the Text tool, draw a text box over the photo layer. Paste the word wall into the text layer. Keep pasting in the words until they fill the text box.
In the character window, choose a font, style, character size and leading size, and the “all caps” option. Large character sizes will show greater legibility of the text, and small sizes with allow more legibility of the facial features. For this example, I chose a happy medium of 16pt. The font I chose is Avenir Next, bold style because its character set width is approximately equal to its height. As a general rule, the leading should be similar to the character size and since the height of the characters should also be the same, choose the “all caps” option.
In the paragraph window, check the “no hyphenation” box and “all justify” option.
The displacement map we will now create will be in the form of a smart object. To get started, chose Filter>Distort>Displace. In the displayed option box, choose “Convert to smart object.” Select the .psd file saved in the previous section. When the Displace window appears, enter a vertical and horizontal scale of “5.” When the smart object is created, it will have a separate “displace” layer within it. If you are not getting the results hoped for, adjusting this layer will change the scales.
The third and final section aims to create a clipping mask and a background that will contrast the clipping mask. At this time, the cropped photo is the bottom layer. Click and drag it above the smart object layer. Next, holding the option key, click the space between the photo and smart object layers.
To create a contrasting background, add a new layer, and fill with black. Click and drag this layer to the bottom of the stack.
The story of Adobe Illustrator begins with the story of John Warnock and Charles Geschke. The two were both computer language developers who work at Xerox Corporation. John had written a type of language which allowed computers to process graphics through mathematical equations. When Xerox turned down the two’s proposal, citing that there was no need for such an application, Adobe Corporation was born. Illustrator was Adobe’s first application.
Illustrator’s one feature that made this graphic software appealing was the invention of the pen tool. It allowed designers to create smooth curves called Bezier curves. Mike Schuster was the programmer who created this tool, which changed the graphic arts industry forever.
Before Illustrator, graphic artists would need various templates and measuring devices to layout a page of text and images. When drawing illustrations, they would use a special pen called a “Rapidograph.” If an artist made one mistake, they would need to start over since “white-out” would still show through on the published copy. John Warnock’s wife, Marva, was a graphic artist at the time and so he probably saw first-hand the need for an edible tool to help designers.
Adobe Illustrator is a computer graphics application that allows users to create refined drawings, designs, and layouts. Illustrator is vector-based software, and which means that it is so versatile that artwork can be scale down for mobile screens and up to billboard size.
In the beginning, Adobe needed to create an image to represent the essence of Illustrator. They asked their design director, Luanne Seymour Cohen, to come up with that image. Luanne thought about the word Renaissance which translates to “revival of art.” After reviewing the many Renaissance artists, she settled on a well-known image of Botticelli’s “Birth of Venus.”
The first version of Illustrator was released in 1988 for Macintosh. In 1989, Adobe Illustrator was launched for Windows platforms. In the early years, unfortunately, Illustrator was still thought of as just a novelty. However, Adobe started a marketing campaign that “influenced the influencers”. It held workshops for these industry leaders such as well known artist David Hockney and designers from Time & Life magazines. The acceptance of Illustrator from these influencers made Illustrator the standard of graphic engines.
The release of 6.0 brought a significant change. Designers who needed to use Truetype fonts couldn’t use Illustrator. Adobe started to support TrueType fonts, which meant that more designers would choose Illustrator as their design software. Before 1997, Mac and Windows versions were very different. But when 7.0 was released, Adobe standardized the user interfaces. At the time that 8.0 was released, interest in the use of the internet increased substantially. The focus of later versions concentrated on supporting web design.
In 2003, Adobe decided to bundle all its successful products together and called it Adobe Creative Suite. The significant change with this version was the addition of 3D effects. Since this was the focus of the upgrade, Adobe replaced Venus with 3D images.
The 3D floral images’ image was later replaced with the Adobe product logos, which we see today. Adobe wanted their products to be known for its dependability and not just their aesthetic features. They created a system of simple logos that were similar to the elements of the periodic table. Illustrator was signified by a capital letter, “A,” and a small letter, “i” and signature orange. Later versions of Creative Suite continued with more improvements: CS4 brought the ability to have multiple artboards.CS5 added the perspective grid tool. CS6 brought a new user interface, RGB codes, and the layers panel.
In 2016, Adobe released Creative Cloud 2017, the first design software to be sold as a subscription. Adobe Illustrator CC 2020 version is the one we use today. For myself, it is very easy to take for granted all the powerful features that Illustrator provides, considering its elementary and humble beginnings.
The New Media Development course at Southeast Technical College is a class that introduces new technology and software in the Media Design industry. The current surge of new apps has increased the demand for UX designers. The “user experience” designer’s role is to create a clear, useable, and desirable experience focused on the target audience’s needs. For this project, I used Adobe XD software to design and prototype an app called FitFalls.
Home screen
FitFalls assists users of the Sioux Falls Greenway Trail System to log their perpetual data, duration, and distance, while on these trails. Users would log in to their accounts so that perpetual tracking could be stored. Fitfalls also provides a GPS tracking of durance and distance and would display the user’s progress on a map of the trail system.
My research started through my own experiences on the Sioux Falls Greenway Trail System; my family has used these trails for bike riding for many years. However, on several occasions, we unexpectedly found that sections of the trails were under construction and did not know of any alternative route. Through observation and a Facebook survey, I found there to be a need to find facilities such as bike repair stations and restrooms. Although I determined that most users of the trails felt safe, a few suggestions were recommending that the GPS could be used to notify first responders in the event of an emergency.
Locate Fix Stations and distance from user
Pressing the orange cones on the map will give alternative routes to bike trail closures. Pressing the information icon will present the user with general information about the Greenway Trail System and give users an option to display bike repair stations, restrooms, and parking locations. A direction call button to 911 services reassures users of security.
To view the prototype of the iPhone version of FitFalls, go to:
A man is but the product of his thoughts - what he thinks, he becomes.
Mahatma Gandhi
As a nontraditional student, Michele Meester decided to return to STI to pursue a second career in Media Design. Throughout her experiences as a computer programmer, freelance artist, and mother, she has had a life-long interest in combining her artistic aptitude with the technical aspects of this field.
