 I'm Tom Tortorice, is that how you say it? Designer, writer, marketing guy. And I've always been fascinated by communication, all kinds of communication. And what I've learned is it's not always just about transferring information. It's also about engaging people, about making a connection, about drawing them in so they stick around long enough to consider what you have to say. And I think that's especially true of marketing communications. And if you're offering any kind of product or service, I guess your WordPress site falls under that category. And of course, both words and pictures are important on a website, but when someone for us lands on your site, know what, their eyes are generally going to lock onto the images first. And one of the reasons for that is that our minds tend to process or gain information from images in a fraction of the time it takes us to process words. And yeah, there may have been a time for me when preparing and choosing images was just kind of an afterthought, just an item on the website to do list. But what I've learned is these can be some of the most important decisions I make. So today we're gonna look at all kinds of ways to make the images on your site and therefore the website experience richer and more engaging. When we usually talk about optimizing images, we're trying to reduce the file size, but today we're gonna talk about optimizing images for humans. And most of these ideas anybody can use, but there are some that require image editing skills. So if you don't know Photoshop or a similar app, it's good to have a resource who does. But rather than a technical how-to, we're gonna look today at what's possible, what can be done to engage the eye in a way that's meaningful, that resonates so people look closer and maybe open up a little bit and that makes it more likely that might actually take action. It starts with your site making a strong first impression pretty darn quickly because remember, your visitors have a back button and they know how to use it. First thing we're gonna talk about today is emotion. Photographs of course can evoke emotional, even visceral reactions. Certain images act as magnets drawing in our attention. What's he looking at? Wouldn't you wanna know? Humans love looking at images, still images, moving images, we wanna be captivated, we wanna be entertained, we wanna be informed, we wanna be surprised. Each one of the images you just looked at had an effect on your brain chemistry. On some level, you didn't just see those images but you felt them because they connected with something that was already inside you. This works because we have kind of a shared sense of what out in the world is desirable and what's to be avoided. And for example, health club owners and health club members share the same values about the importance of staying fit. So that's what the club somehow wants to convey on their website. So marketing today isn't just about selling, it's about connecting. Connecting with particularly humans that you are company can help. A WordPress site that makes the right connections in words and pictures has a natural advantage over a competitor that doesn't. In fact, both neurological and marketing studies tell us that an emotional reaction cannot weigh both product features and objective facts in people's buying choices, even in B2B sales. How about that? Buyers, of course, are free to make their own choices but if we show and say things that connect with the person's typical buyer's thoughts or feelings or self-interest, self-image, well, people are going to naturally lean forward as their natural buyer's armor tends to melt away. The right image accompanied by, with the right headline, can take us from this to this. Images that your target audience can relate to. So from the earliest cave paintings, images have been used to tap into our shared experiences, humans, as we all deal with some of the same goals in obstacles in business and in life. On a marketing level, an image can relate to either the customer's problem or the company's solution, though more often the solution. We use images to show folks that we know what's important in their universe, whether it's a new mom or a corporate CEO. We use images to build a sense of excitement because people are more likely to buy something they're excited about. We use images to reinforce or humanize our messages and, in fact, well-crafted headlines and images can reinforce each other to kind of multiply the effect. Okay, to get started, what's the first and simplest thing we can do to improve our images? Crop it. Of course, it depends on what you wanna show, but you can almost always draw the eye better by zooming in on the action and eliminating unnecessary background at the edges. Croping helps increase the intimacy and visibility of the main subject. Croping can also be very creative, all kinds of possibilities, including unusual cropping arrangements. You'll stand out on the web by doing things a little bit different. And who says that a portrait has to be vertical? Now, it's best to crop and resize our images before uploading, but also in Photoshop, you can go into edit image and click on the crop tool, direct to crop, and click on the tool again. Don't be afraid to be creative. When you're selecting images to use on your WordPress site, notice how much more impact an image has when it has a strong visible focal point for the eye to land on. Sometimes a single element can act as kind of a photographic icon or visual symbol to represent the entire scene. And I think that's especially true when images are used small. And that's sometimes the case on the web when images are small, we don't want to shot with a lot of detail. It just turns to mush. We want pictures with a strong, dominant focal point. Also, you might notice that your images and galleries tend to stand out best against either a pure black or a pure white background versus a color or medium background, most of the time, you think. When preparing images on our websites, Photoshop opens up some very interesting possibilities with a... Microphone. Oh, where'd it go? It's on? Can you hear me? No, it's still on. Got two microphones. Julie gave me. Okay, can you hear? In preparing images for your Photoshop, for your WordPress site, Photoshop opens up a lot of possibilities with tools for being able to outline or precisely select the main subject which then can be separated from the background. This is known as silhouetting, and if you know Photoshop, there's a little bit of a learning curve getting good at this. That main subject can then be placed on top of a different background, put in the model anywhere on Earth or beyond. A silhouetted photo subject in the form of a transparent ping file can also sit right on the white background of the webpage for a nice clean look, or you could silhouette just part of the subject so elements look like they're breaking outside of the frame, and that could help catch the eye. Your product banners and sliders can look richer with different kinds of backgrounds and effects. In fact, if you've never searched for backgrounds on stock photo sites, you might be surprised at the amazing stuff there we can use. You can also take silhouetted photo subjects and layer them in Photoshop to create photocompositions. All kinds of possibilities. And the trick to natural looking silhouettes is a soft or a feathered edge as opposed to a hard edge, if you can see that. Though they should be used sparingly, sometimes using filters in Photoshop or other image editing apps can add a subtle abstract quality to an image, or sometimes rescue a bad photo. You can also turn your photo into a watercolor painting if that's what fits the look and feel of your site. Photoshop has one filter I like called diffuse glow, which kind of blows out the highlights, combined with some creative cropping and maybe a little grain effect. That could be a fresh alternative to the standard boring headshot on the employee's bio page. Use a lens flare effect to add a little bit of pop to another, otherwise regular product shot. You can also superimpose text onto a stock photo background. You might get more attention for your headline, but remember it's not searchable by Google. Also, how can you have some fun displaying your logo on your site? Another bit of Photoshop magic is the ability to eliminate unwanted or distracting elements from a photo. Because maybe your concept called for something else there, I don't know. Now, with imaging apps, you can add a little bit of pop to a dull, client-supplied photo by increasing the contrast, color saturation and brightness. With Photoshop, you can take it a step further by selectively lightening and darkening to control where the viewer's eye goes. Or you can simply blur the background to isolate the subject in a way that the eye can not resist. Here are some of the top image editing apps. You can also adapt them. Is there a free version? Is there a free version of what? It is free, but I think they add advertising or something. So you're probably better off paying that little bit. Stop photos. The good news is we can find decent images on stock photo sites these days. The bad news is you can spend a lot of time digging through literally thousands of images to find that one shot that nails it that conveys exactly what you wanted to express. How many of you spent more than an hour searching for the perfect image to go with your blog post? Naturally, we want to avoid tacky, contrived poses and look for shots that are a little bit more authentic. And it's actually more efficient if you don't try to pick out your final shot when you're trolling through the pages. Rather, go through quickly and pick out all the possible shots and add them to a lightbox or drag the thumbnail images to your desktop and then go back later and compare that handful of possibilities side by side for making your final selection. Now, stock photo models tend to skew young. It's the only place where you'll find doctors and executives that look like they're 18 years old, but you can narrow you search in all kinds of ways by entering mature doctor or Asian female doctor because although there are exceptions, if we're showing multiple people pictures, it should be a habit to shake it up by age, race, and gender. Your pictures will have a more authentic feel generally if they show real life situations. Other times will make more of a connection if the model's looking at the camera. And overall, I think showing pictures of confident looking people adds a certain warmth to a webpage. So it's so important for your buyers to know that your product or service is for people just like them. And that's often easier said with pictures rather than words. Now, I'm not a big fan of conceptual stock photography. I mean, you don't see stuff like this used by major companies on their sites. My thinking is that creative professionals should come up with their own concepts. Of course, there are a lot of stock photo houses out there. My current favorite is 123RF.com. Another is Dreams Time. You can get stock photos online, including good ones for as little as a dollar each, depending on the size. So there's really no excuse for just pulling images we find online or in a Google image search and adding them to our websites. Not only is that unethical, but if this picture you steal happens to come from a stock photo company with aggressive lawyers, you might get a bill in the mail one day for thousands of dollars in penalties. I know companies it's happened to. There's also what's called creative commons images, but most are not licensed for commercial use. Plus you have to credit the image creator so I'm not sure if it's worth it. And there are some free stock photo sites out there, but they generally don't have a selection. I'm good enough for professionals. Now, sometimes the right image is an illustration rather than a photograph. Illustrations tend to be less literal and sometimes more fun than a photograph. You can get a professional illustrator to create whatever you want in a style you like, or if you dig deep enough, you can find some decent artwork on stock photo sites by filtering your search for illustration only. Now, of course, you may have to get past a disturbing variety of tacky stock illustration, formerly known as clip art. Icons can be drawn from scratch or you can find icon sets in stock photo sites by searching for, well, icons. A lot of other places, of course, to find icons online, including free ones, but just make sure that they're available for commercial use. Now, if you do a Google search for infographics, you'll find all kinds of creative ways that illustrations are used to visually convey information. If your blog post includes statistical info, another way to get it noticed is to have some fun with stock photo images. It's also good to have images in the middle of long posts and pages to help break it up, keep people engaged and scrolling. Now, awesome product shots, especially things like food shots, take careful prep and styling. Professional photo stylists have all kinds of clever tricks in the studio to make things look a little more appetizing. In a survey on e-commerce HubSpot reports that 92% of customers say that images are a major factor in their buying choices. So, of course, we want a good, well-lit product shot, but it'll also help the buyer imagine owning the product if we show the product in use and being enjoyed. I wanna be that guy, right? And remember, if you're selling services, buyers don't care about the company headquarters or the employee group shot or really pictures of people working. They're more interested in the benefit, what your service means to them. How can you get that across in an image? Remember, as the seller, you might think this is all about you, but as the buyer, you think it's all about you. In fact, showing pictures of strangers working and disrupting your home could actually elicit a negative visceral reaction. With original photography, sometimes we can get the job done with our camera phones, but there's a level of professionalism and quality you can really only get with a pro photographer. And unless it's a simple studio portrait, a designer who knows what they're looking for should also come by to help direct the shoot. If you're shooting or directing original photography on location, take some time first to scope out opportunities for interesting angles and approaches. Your creativity lies in making unconventional choices, including what's known as bird's eye view and worm's eye view. Also notice how that last shot was angled later to add a little visual energy to an otherwise unexciting scene. Now, you may be focused on how the model looks, but it's also important to choose a clean and pleasant background setting. Clutter in the background will distract people from what you want them to see. And good casual shots of people at work can actually take a lot more professional setup and lighting than you might think to get that right informal look with just the right amount of clutter. Now, for traditional portraits, we wanna avoid shooting people straight on. Makes it look like a mug shot, and we don't want the customers to think they have a criminal record. So it's better to angle the shoulders to the side. They can still look at the camera for a warmer, more natural looking portrait. You'll also have nicer portraits if we use natural lighting from a window to the side of the model, whether it's a company employee or customer, rather than just the overhead fluorescence or straight on flash, which can tend to blow out or flatten out the subtle shading that gives faces their definition. Now, it could be hard to get that all important natural looking smile from someone who's uncomfortable being photographed, but I find it pays first to chat with the model and ask them about themselves, keep it light, build up some confidence and trust. But still, holding a smile is difficult. So there's that old trick of having the model look away from the camera and then on cue, turn and flash a smile. Do that over and over, try to have some fun with it. All right? And to build their confidence during the shoot, always, always, always, tell the person they're looking great, whether they are or not. When shooting portraits, here are three tips. Number one, take more shots than you think you need. Number two, take some more. Number three, change the angle or setting and take a few more. Because, look, we're not wasting film and it can take time for the person to feel comfortable enough to get that one perfect shot. Get that one where you need to do much more live. And if you're planning on siloing somebody or something later against a white background, it's better to shoot them against the white background to start. And when you're scheduling the shoot, remember, people generally look fresher in the region of the trees. No, it's over by my foot. Pardon me. Stick it the line good, okay? Okay, gonna edit that part out of the video, all right? Okay. Is that better? Should I not move? Okay, let's say, where are we? Not done, are we? Okay. Oh, is it hip? As far as apparel, it's generally safe to stay with solid colors. And for group shots, the key is to have people stand closer together than might feel natural, but the shot will just have more synergy if it's filled with people's heads rather than the spaces between their heads. Now, these folks will shot separately and stitch together later to align people of different heights. You could have done this in one shot. And for that additional touch of awesomeness, you can take the young lady sweater and modify it to match the logo color. Now, when you're choosing your final shot for a portrait, you'll be glad you have a lot to work with. Again, pick a small group of possible shots before you make your final selection. Now, choosing just the right shot with the right expression is crucial because almost from the moment of birth, humans have a natural affinity to faces and the emotions they reveal. So choosing the shot with that crucial look is important. In fact, we're so sensitive to expressions that we won't be fooled by a smiling mouth if her eyes aren't smiling too. And the thing is even a neutral expression in a portrait can come off as vaguely hostile. So what we're looking for in business portraits is a warm, confident smile. Nice smile? Nicer smile? Trying too hard. The person will look more authoritative and catch the viewer's eye quicker if their eyes are higher in the frame. Cropping off the top of the head is not only okay, but it makes for a more intimate portrait. Although I have had clients who found this disturbing as a visitor just might think the person's head was shared off in real life. I don't know. How tight can you go? Now, we're not really looking for fashion model perfection. We just don't want to distract the viewer with the person's imperfections. So I'll go into Photoshop and remove blemishes, whiten their teeth a little bit, do some general clean up, stray hairs. I try to be kind. Pale complexions, I might add some color saturation or open up dark complexions to bring out some detail. In fact, with just some digital hocus pocus, ladies and gentlemen, witness the dramatic transformation. Oh. You don't believe me, do you? All right, well, I guess even Photoshop has its limitations. But I still think the version on the left is a brighter smile, what do you think? But here's a bit of magic you can achieve and this is no lie. For those of us of a certain age, there's a secret Photoshop trick I'm gonna let you in on. We take the original face image in Photoshop, duplicate it onto another layer, blur it and then make it semi-transparent. Then when you combine the blurred image with the original image, you end up with a nice glow effect that actually softens wrinkles. Wish you could do that in real life, right? Can you see that in there? You might be able to see better on your own device when you pull up the slides later. Okay, we have with the original face image, we duplicate it onto a second layer and then blur that layer and then make it semi-transparent or reduce the opacity. And then when you combine the two, we end up with the composite image. You also may want to erase the blurred layer around the eyes, mouth, and tip of the nose. Keep those sharp. Now your WordPress site probably links to your social media and your profile pictures there, of course, are really just portraits cropped to a square format. Now remember, your followers don't wanna see a lot of background. They don't wanna see your entire torso. They wanna see your face, specifically your eyes and as much of a warm, confident smile as you can manage to look able, confident, open, not like a shadowy figure lurking in the background. Now, before uploading, look at your profile picture at the tiny 30 pixel size. It'll be seen next to your post. Make sure it works at that size. Also, a lot of profile photo uploaders today will allow you to crop the shot by zooming in on your face, which is an improvement over some sites, automatic cropping, which we know can often lead to unfortunate dismemberment. Thing is, a lot of people online only know you by your profile photo, so it really pays to get a professional photographer whose job it is to make you look terrific in a clean business portrait, okay? Because if you're in business and you have a life outside of Facebook, then maybe your gravitar shouldn't be a vacation photo taking with your phone, okay? I'm just saying, okay? Humans tend to be a pretty judgmental group and your potential colleagues and customers online are judging your professionalism and likability whether they're even aware of it or not. A person who's smiling seems more likeable. They just do, okay? And we also look to people's eyes for an intuitive sense of whether to trust them. So that's why we never want to use a shot with a person squinting. If you're in the food, fashion, or photography business, it's really the images on your site that are doing the selling. But for most other things, one of the main reasons for having images is to capture the eye and deliver it to a written message, which in turn offers persuasive possibilities that draw the reader further into the site. This works best when the focal point and the headline are close together. And remember, the eye has two tendencies. One is we tend to notice the most prominent thing on the page first and other elements in decreasing order of prominence. And also, generally speaking, our eye tends to travel from upper left to lower right on the page. And that's why we often put the image or icon to the left or above the headline to be seen first, but it's not a hard and fast roll. The dirty little secret is sometimes the fact of having an image to attract attention to your blog post or small text block is more important than what that image actually is. In fact, you could just use a simple arrow to attract attention to important content. Our attention tends to go to the thing that contrasts with what's around it, whether it's lighter or darker or bigger or more colorful. Your homepage banners and sliders are all kinds of important, because it's the first thing that your visitor sees, so they really deserve some extra time and TLC. Here you're telling the short version of your entire story with picture and a few words. So this is our one shining moment to capture the person's attention in a way that strikes just the right chord. In fact, consider having a banner image and accompanying headline at the top of all your major product pages or landing pages. So if that's the first page the viewer sees, then they're treated to a richer homepage experience rather than a plain WordPress text page. And with today's WordPress page builder themes, that's actually pretty easy to do. Now, you may have run into a situation where the picture you wanted to use for a banner just wasn't wide enough. So jump into Photoshop and create a smooth gradient to a background color that matches, extend the background and add some space for your headline. Or you could just fade out the image. That could be a nice look. And remember, we could also silhouette the subject, place them on top of a different wider background. Of course, backgrounds that obscure text or a no-no should either be like text against dark background or vice versa. Creativity is important, but not as important as readability. If you wanna make a big impression on your homepage, show something big. And as far as the slider, no slider issue, consider keeping the same arrangement and background there and then just rotating out different foreground images. So be creative, not just in your slider design, but in your approach to sliders, including slow, subtle transitions. I mean, to me, changing out just one aspect of a slider is more elegant than a series of totally unrelated banners, okay? If buyers are looking at you and other competitors, more likely to stand out if we do something unexpected, right? Now this is a design issue. I love the impact of full-depth banner images, but however, if I'm a first-time visitor and I'm not ready to take action, this arrangement feels a little bit like a dead end, but if I can see just a little bit of the content underneath peeking out, that's my visual cue to keep scrolling and looking. To make images a little bit more abstract and less literal, the trend is to blur them a little or a lot. And if you just can't think of an image to go with your headline, you can also create or source out a piece of stock art to add a little visual energy to your message. And finally, just because you have a rectangle to work with, doesn't mean you have to fill up every bit of it. Be creative in your use of the space. And of course, with custom sites, you've got more flexibility. Various themes may or may not need some customization to achieve some of these arrangements. And of course, different responsive themes handle banners differently at smaller widths. So you may need to make adjustments. Well, that covers some things we can do with images to look our lovable best and make our customers feel comfortable about working with us. You know, in years past, there was a lot of competition for companies to get people's attention. That's not true anymore. Today, there's an enormous amount of competition to get people's attention, which is why it's so important to have an edge. So work on your site until it's unique and uniquely human from the images to the copy to the design. Know what's important to the people you're talking to and look at your site through their eyes, okay? And have some fun if you can get away with it. Because it all comes down to one question in the end. When someone lands on your site, will it be just another site to look at? Or will it be an experience that draws them in with a sense of discovery and curiosity? An experience that helps you stand out enough to be the one that's remembered? Powerful images are an essential ingredient of that special sauce. So today, I've just thrown out some ideas and guidelines as a starting point. But if you can take it from there and create great images that break every one of my rules, power to you. But do start looking at images you see online more closely and you know what? You'll learn more than you'll learn here today about creating awesome images on your WordPress site. So I got any logo or you look at all the images? All the images that you have are the logo which looks like the image of all of them. I mean just to identify them. I would do it small. I mean I wouldn't want to obscure the image, so I would keep it small. And something you can do in Photoshop, maybe just knock it out white or maybe just like an outline or just kind of like a little bit of a glow. I'd keep it subtle to do that. Well images generally should be 72 PPI at the size they're gonna be used at. 72 PPI at the size they're gonna be used at. So if it's 300 pixels wide, then it would be, you know, you'd make the image 300 pixels and 72 PPI. Right, and that's pretty standard for web. So there's two things that's dimensioned. 300 pixels is the size and 72 PPI is the resolution. Yes. Pressure tools for your mom. I'm sorry, what? Pressure tools for your parents. It's no words like the Photoshop. Compression. Well generally saving in JPEG is going to compress your image and you can control how much it gets compressed. Yeah, but I don't think it's sufficient. You know, I use like JPEG Mini on top of the first initial use. All right. You know, Photoshop, then I use JPEG Mini. Sometimes I don't even use it. I think it matters more when you've got really large images. I don't think it matters as much with small images. Do you have like your favorite in front of you? Okay, thanks. If you have any other specific questions, come up see me afterwards or contact me through my site. Have a great work camp.