AP 0043: What Tools Would You Recommend for Website Images, Especially to Add Nice Effects?

AskPat 43 Episode Transcript

Pat Flynn: Hey what's up everybody? This is Pat Flynn and welcome to Episode 43 of AskPat, this is where I answer your online business questions five days week.

And my resource for the day, for you, is an article I wrote, a guide, on finding and using images for your website. Because you can't just find any image on a Google Images search and put it on your site; you can get into big trouble for that, because that might be somebody else's intellectual property. So how do you know what images to use? Well this is a guide that I created, it's actually free, it's just a blog post with a bunch of information on it that's going to help you understand how to stay out of that trouble and where to find that information.

If you go to AskPat.com/imageguide, AskPat.com/imageguide, that'll redirect you to the blog post on my main site, Smart Passive Income, that'll share all that information. And images is what has to do with today's question from Keith, so let's get to the question from Keith and then my answer.

Keith Pares: Hey Pat, Keith Pares here. Question about website images: What tools and tips can you offer for creating images for your website? Especially like the images you use that look like they have torn edges, and also the newer images where you're layering text and your logo over the top of the images. Any thoughts you can share on this would be greatly appreciated. Thank you for all you do, take care.

Pat Flynn: Keith, thank you so much for your question today. Images are incredibly important for your site for so many reasons. Obviously with social sharing and the way Facebook, and Twitter, and Instagram, and those social networks work today, it's all about the images right? When you look at your feed on Facebook, what's the first thing that captures your attention? It's the images. So images are incredibly important, and I'm going to share some tools with you to help you learn how to create those images that you can use on those social sharing platforms. But images are also important for your blog posts as well. Because it helps to illustrate your points, it helps to make people remember that topic, and also just support it as well. It's also a nice way for people to remember what it is that you're talking about if there's a specific image that works with the content that you're sharing and the headline that you created. That's how you sort of tie everything together is with those images.

It also just makes it less boring. It's just an image, but an image can say so much. And it just adds a little bit of color, and spice, and feeling, and expression, and style to your page as opposed to just text. So yes, add images. And here's some tools I'm going to give to you to help you add some nice effects and to get images nicely placed on your page and things like that.

So let me first start with that torn edge effect that you were talking about Keith. If you go to SmartPassiveIncome.com and typically you'll run across a number of different images on my site, you'll notice that a lot of them have a little bit of a torn edge effect on it, which is really cool. And I did that purposefully to sort of try something different and stand out of the crowd, and sort of add a little bit of edge, I guess you could say. That's a poor choice of words there, but just a little bit of a different style to the way images are shown so people would remember. And obviously you pointed it out, so you liked it, and here's how you can do it. There are a number of different ways to create that torn edge effect, and also other types of effects as well, but I'm going to go over the way I do it, which is a little bit longer, and it's because I just have a little bit more control, I have more options doing it this way. It doesn't take too long, maybe a minute and a half to two minutes. But I feel like it's worth the time investment as opposed to just putting a square image on a site, or a rectangular image on a site. And I don't always do this, but I do it every once in a while. Especially when I'm taking parts of something on a website and showing it, just to show that it is sort of cut out, or taken from a piece of a larger item.

So to get this edge effect, if you're a Mac user this is what I do. I take an image, whether it's something I take a screenshot of using command-shift-4, and then dragging a box around something. That saves a screenshot to my desktop, or I might have an image already on my computer from somewhere. I'll drag and drop that image directly into a new document in Pages for Mac. You use Pages for Mac to do word processing, but I drag and drop that image there. That's the tool I use to create this effect. I click on that image to highlight it, and then I put a border around it. In the inspector you can put a border around it and typically it puts like a single-pixel black line around it. From there you can actually change that border to a frame. And then it'll give you a whole bunch of options for different frames. One will look like a picture frame, one will look like just a white outline around that image. Another one will have a shadow behind it. And there's one that has a torn page effect, and that's the one that I choose. So I choose that one, it automatically changes it, and then I take a screenshot of that because there's no really quick and easy way to export that with the border that you want. If you export it it becomes the whole page, I just want the image. So I'll do again, command-shift-4, and drag a box around it, and then it saves onto my desktop where I can just change the name and then upload it from there. And that's how I get the page, the torn page effect.

There is a tool out there that actually you can use to make it easier, it's a paid tool but it's not very expensive. And you can use it to take screenshots—I mean it's called Snagit. Snagit. If you go to TechSmith.com, or just look up Snagit in Google, you can find it. PC users, I believe you can use this as well, and you can drag a little box around whatever part you want to capture, and then you can just from there change the border, you can even add text on top of it, you can add arrows pointing at certain things, and then you export that into a .jpg, and then boom you have that all ready for your site. You can also use Keynote, I believe, or PowerPoint to achieve the same effect. So drag and drop those images in there and you can do this whole screenshot thing, and then again you're good to go.

Now one thing that's been working for me really well is taking images and then putting text on top of it and sharing it on social media, like I talked about earlier. Facebook has just been wonderful, I mean it's so many shares, so many more comments, just peoples' attention is drawn to images, especially nice colorful images that are different than what's normally seen in people's feeds.

So to add text on top of images, I use Photoshop. And I know that's an expensive tool, and a lot of people don't know how to use it, and you don't need Photoshop. That's the great thing, to do and achieve this effect you don't need Photoshop, all you need to do is to get an image, and I told you earlier about where to go to get information on how to find images that you can use. Again, AskPat.com/imageguide. But once you have an image, and you can get it to the right size, I'm not going to go into sizes right now, because that's a whole other discussion, especially for social media. But you can use a tool like Gimp at Gimp.org. Gimp.org, which is a free version of Photoshop. It's on the web and you can use it from any computer, and you can use that if you again learn how to use it. There's a little bit of a learning curve there.

There's also similar ones like Pixlr, and Paint.net for you PC users. Again, this is like photo manipulation, Photoshop-type software that you can use for free. Now there's tools that are a little bit more specific for adding effects and text on top of your images. And these might be a little bit more easy to use out of the box. They'll all have a little bit of a learning curve, but these will help you. So PicMonkey is one, Canva is another one. And this one, I just recently found this next one, Fotor, and that one there is an option to specifically do just what we're talking about. You upload an image and then add text, you can choose different fonts, move them around and boom, you're going to have your nice little photo card, or text card, that you can share on social media. So that last one is Fotor.

So Keith, that's a lot of information and I hope that helps you out and helps everybody else out who's listening. Again the major tools there are Snagit, if you're into getting the more automated type of tool for doing those torn page effects and other effects you can do on top of those screenshots. I use Pages for Mac for the effects myself. And then I use Photoshop, but there's also other ones like Gimp, Pixlr, Paint.net, PicMonkey, Canva, and Fotor. So thank you so much Keith, I appreciate your question so much. An AskPat teeshirt will be sent your way. Best of luck to you.

And for those of you listening, if you have a question that you'd like featured here, or potentially featured here on the show, you can head on over to AskPat.com and ask your question right there from the page using the mic right there on your computer. And of course I want to mention the episode resource, once again that is AskPat.com/imageguide. That's the ultimate guide to finding and using images on your website.

And lastly I want to leave you with a quote. Another one from Benjamin Franklin, he just has a ton of quotes. So I'll leave you with this quote from Benjamin Franklin, he says: “Well done is better than well said.” I love that. So you gotta take action. Take care, I'll see you in the next episode of AskPat.