Important links in the post transcript text: FastStone Image Re-sizer – Befunky.com – Online Image Editor
Stu2u training Transcript:
Hi this is Stu back over at The 2020 Club I hope everybody’s having a nice afternoon.
Yesterday on the webinar we talked about image branding and water marks.
And I’m just going to go through some procedures on Photoshop and other Image processing software I use.
When I get images ready to upload to a website.
So over the months we prepared branding for the 2020 Club in Photoshop if you’re not looking at the image full size it might look a little raggedy or pixelated so if we view it in full size it’s a lot bigger and it’s a lot clearer in full size and the reason why we do this is so that when it’s online we get to see it really clearly in responsive containers across all devices.
I like to include both a branding box usually in the lower right of the image and the text url of your domain/website address underneath clearly so when Google images or other search engines find the images and repurpose them people will identify with your brand faster and become more familiar with you quickly when they like what they see.
In the lower right hand corner or left corner or top left and bottom right however you want to do it it’s all good so we’re to go back to the view window.
Put it on the screen while I process. And maybe just a tad smaller if I had control. Minor zoom out a little bit okay.
Size of my actual image and it’s right what I intended 1600 by 900 resolution 72 for the web.
And this is a good clear image for sharing on a Blog and Social media. Facebook came out with some sizes a couple years ago that were different than what some people thought were appropriate and they started at 1200 by 630 which I think is also about 16 by 9 aspect ratio, but after checking actually it would be 563px tall but close enough.
So everybody was scratching their heads when they started doing that but it’s the same reason Google is now calling for 1600px wide images for accelerated mobile pages (AMP) and nice large formats for their image search engine.
What I’m going to do is switch it up a little bit here put a double set of branding/logo watermark style images across the span of the png watermark image file so when we process it with Fastone it’ll be really cool looking.
And I’ll put this one down a little further and leave those two up a tad higher.
I’m going to put this in here and this is totally unconstitutional. FastStone is the only program I’ve ever found where you can actually put your own Domain name with a .com in it because Every other image processor on Earth will reject that because the .(dot) Is reserved for the end of the file called JPEG or whatever the convention.
The first time I saw at work I was astounded and I, I just discovered it on my own I wasn’t told this it was one of those things you just you’re doing something and you know it can do that so now I’ve got the batch processing folder set up with all these four Images are going to go with our Watermark and that output folder is over here and right now the output folder is empty so as we process these photos they’re going to be dumped into that folder with this file name in front of the wild card and keep those file names for SEO and we’re going to get to that too because we talked about it.
So I’m going to go ahead and convert them. And we can see in the output folder. If I view extra-large icons yes and the layers were placed perfectly on the resized image and the file names are what we just discussed.
When I upload one of these pictures into the FineArttips.com blog.
I’m just show you how Accelerate the search engine optimization (SEo) with the use of ALT tags you’re in one minute I’m just going to get set up for that.
Okay we’re back in the dashboard of Lori’s site. We’re using WordPress I have to update WordPress today they just rolled out version 5.4.1. And I’m going to pick my Category going to post and then I’m going to write this blog post after I produce this video that you’re watching right now.
And I am going to add a featured image will see over here we do SEO processing as well and that’s a whole different topic for another day.
Remind me to shut the featured image by uploading to our Media Library. And I’m going to select my folder 2020 Club.
Check Tech with Stu category. Output I’m going to select all these images at once. On our Wordsrack server being nice and fast is going to Crunch them.
What may seem incredible now what I’m going to do is I’m going to get rid of the layer behind after I crop the whole thing down.
Cuz I’m making a watermark for use on other images this is just the template.
So now I’m going to crop it and check again the clarity in photoshop at 100% view.
Extremely clear and everything looks good so I’m going to get rid of the background and it still has the text of the domain for FineArttips.com and stu2u.com there and I’m going to save this image, actually the legacy export photoshop tool it for web and I’m going to save it as a portable Network Graphic (PNG)s so we have the transparency in the background.
And I’m going to pick the folder that that goes into over here and call.
And I’m going to prepare a couple of images in another piece of software that I use.
And it is called Faststone Photo resizer this is available free off the web.
Its an incredible program I found quite a few years ago. And some of the best software doesn’t look as fancy as what we may be using now but this does an incredible job.
I add all of these I can get a preview of the them they are all 1920 by 1280 which is also 16 by 9 and I’m going to be processing them down using the software and overlaying the watermark and re-naming them all in one fell swoop, that’s the entire point.
To 1600 pixels wide.And you can look up. FastStone – https://www.faststone.org/FSResizerDetail.htm.
Photo resizer on the web I have version 4.3 I think that’s probably fairly current it doesn’t change often and Reg was talking the other day with Lori about how to run this on a Mac and a lot of people run Windows programs on a Mac and this is a windows program so you’ll have to get your Macbook air or whatever you have to boot this program. Reg knows lol, I’m a linux guy at heart on the web and have an Android phone.
Now we’re going to find out where your output folder is and using the advanced options and then the image name itself.
So I’m going to browse the folder that I want to Output the files to.
Find IHOP.. really (speech to text hits again)!!!
This is the file folder that I had the files in smf I’m going to import… this isn’t really hard. quite a few little steps and of you miss one you’ll figure it out that’s how we all learn.
So I’m also going to go to my Advanced options (in FastStone) and I’m going to resize the photos and I’m going to pick a predefined side which is the way, I want a 1600 pixels in width, and a watermark okay it says add Watermark.
And I’m going to delete and I’m going to find our size of the screen but we’re setting it up for a 1600 pixel wide.
Image checkbox Watermark checkbox resize all these other things are Elementary and they don’t need fussing with.
And then we’re going to say okay this * is a wildcard in the file name so we want all the Original file names and says amazing River and mountain landscape for the 2020 Club jpg.
And upload the images to the back end of the site and it’ll take him a minute for the 4 images about 1.9mb total one at a time… and they’re done and I thought this machine looking one was a really cool I’ve been so I’m going to use that for the featured image of this post.
And this is where we talked about in the webinar you must put the ALT Text in this box, inside here.
Can I use my image filename if you don’t put all text in Google penalizes you because it’s for people with disabilities to be able to read what the images about, that’s the ALT tag.
Visually and hearing-impaired people that have special devices for looking at websites so that ALT text came from the file name which is incredible because the dot-coms in there as well.
And you can see right here. Fine Art tips dot Com and Stu2u.com done processing and branding your photos what can I can say?
The new 2020 Club at Fine Art tips.
Exactly what I intended to do. The beauty of this is that you’re going to say it on the Blog and I’m just going to save a draft here and put that image on the post just for demonstration purposes here, save the draft and we can preview it before I upload to YouTube Stu2u.com’s channel
And bingo in a second we have a great branded image with SEO built-in with the all tags that’s that’s it for this Tech tips blog on image processing.
Are you using Photoshop or a program that I can show you. If you don’t own Photoshop I can show you how to do this with a website online called Befunky.com and this is not a poor man’s Photoshop it’s a great alternative because it also has image processing.
It does layers which is the reason it’s so great, if you want to do one at a time without the image processing but you could build a watermark like I did that was a little bit of an extravagant Watermark to have found the entire width of a 1600 pixels wide image.
Is lead on Easley possible and you can find beautiful images on the web (I love Unsplash.com) or take the photographs yourself and build this type of branding in there and with befunky.com or your image editor of choice, I’m not going to go into it but you can put text on the images just like I showed you while I was doing it in Photoshop so I hope everybody has a great afternoon and the rest of their day and I’ll be back on the tech tips blog Stu in The 2020 Club often.
In short order, we’ll be putting out lots of great tips for you I hope you enjoy them come back soon stay well and be safe and careful while isolating.