How to Resize and Watermark Photos for Your Blog in Photoshop CC

How to Resize and Watermark Photos for Your Blog in Photoshop CC

posted in: Blogging, Our Work, Writing | 0 | This post may contain referral links. See privacy policy for more.

The size of your images can drastically affect the time it takes your site to load. We mentioned this in our earlier post: Basic Blogging Checklist Part I. Today, we will show the steps we use to resize and watermark photos in Photoshop CC 2015.5.

Share this post!

How to Resize and Watermark Photos for Your Blog in Photoshop CC

Reducing the Size of Images for Websites

Open your photo in Photoshop CC. We opened “Sassy Nana.jpg”.

How to Resize and Watermark Photos for Your Blog in Photoshop CC 1

To resize the image, go to Image Size under Image > Image Size… Alternatively, use the shortcut Option-Command-i on a Mac.

How to Resize and Watermark Photos for Your Blog in Photoshop CC 2

The Image Size dialog box will pop open. We resize all our photos to 900 pixels wide. Photoshop does the height calculation, provided the lock aspect ratio button is clicked. We leave the resolution at 72 ppi. This is fine for digital work. Only physical prints need a higher resolution (at least 300 ppi usually).

How to Resize and Watermark Photos for Your Blog in Photoshop CC 3


You can see that with the reduction in pixels, the image size decreased from 40 MB to 1.54 MB. This means a faster load time once the photo is on the website.

How to Resize and Watermark Photos for Your Blog in Photoshop CC 4

The reduction in image size makes the images smaller on the screen. To increase the view of the image, either press Command and + a few times or hold down option while scrolling on your mouse.

How to Resize and Watermark Photos for Your Blog in Photoshop CC 5

Watermarking Your Images

There are two main mays to do this in Photoshop. The first is a new text layer. The second utilizes the Brush Preset feature of Photoshop.

The example below uses a text layer in the bottom left and a brush preset in the right corner of “Sassy Nana.jpg”.

How to Resize and Watermark Photos for Your Blog in Photoshop CC 7

Creating a Brush Preset

Brush Presets in Photoshop CC 2015.5 have a maximum size of 5000px x 5000px. We used a 1000px x 242px canvas size for this brush, since we knew it would never need to be bigger than 900 pixels wide.

Brush Presets uses a grayscale to determine opacity of the brush, therefore if you want your brush to be solid, make your text black. That way when you use the brush, you can vary the opacity and color to your taste per use.

How to Resize and Watermark Photos for Your Blog in Photoshop CC 9

Next go to Define Brush Preset under Edit > Define Brush Preset…

How to Resize and Watermark Photos for Your Blog in Photoshop CC 10

Name the preset whatever you like.

How to Resize and Watermark Photos for Your Blog in Photoshop CC 11

Try it out!

How to Resize and Watermark Photos for Your Blog in Photoshop CC 12

Using Your Watermark

For the brush, make a new layer via Layer > New > Layer… or use shortcut Shift-Command-N.

How to Resize and Watermark Photos for Your Blog in Photoshop CC 6

Position the Brush to your liking and click.

Change the Blend Mode of the layer to Soft Light and the Opacity to 50% if you want a translucent watermark. You may need to experiment on a photo by photo basis.

How to Resize and Watermark Photos for Your Blog in Photoshop CC 8

Share this!
Basic Blogging Checklist: Embedding Videos and Maps in Blog Posts (Mobile Friendly)

Basic Blogging Checklist: Embedding Videos and Maps in Blog Posts (Mobile Friendly)

posted in: Blogging, Our Work, Writing | 0 | This post may contain referral links. See privacy policy for more.

Last week, we discussed how we use content and images on our blog. This week, we will show you how we embed videos and maps. This is post is primarily directed to WordPress users.

Understanding iframe

“iframe” stands for inline frame. According to WhatIs.com, an iframe is “an HTML document embedded inside another HTML document on a website.” Now “why would this be helpful?” you may be asking. 

WhatIs.com has an answer for that also: “A web designer can change an IFrame’s content without requiring the user to reload the surrounding page.” For example, you can watch multiple youtube videos on the same webpage.

Obtaining the Embed Code

For YouTube Videos, go to the Share button under the video and click Embed. Copy the iframe code.

How to Embed a YouTube Video

For Google Maps, it is a bit more hidden.

Embed Google Maps Step 1 Click Menu

First click the menu, located to the left of the search bar.

 

Embed Google Maps Step 2 Click Share

Then click Share or embed map.

Embed Google Maps Step 1 Copy Embed Code

Set the zoom to your perfect setting and switch to Earth or Map view. Once the appearance is to your liking, copy the iframe code.

Making it Mobile Friendly

Making content responsive (aka mobile friendly) can be a real head scratcher. Fortunately, the folks at SmashingMagazine.com have a solution that we find works perfectly. You can read about the whys and wherefores on their site here.

Add a div class to iframe content

First, in text editor mode, you want to wrap your iframe content in <div> with the class set to video-container.

Add CSS content for div class

Next, you want to add some custom css. Get the code above at SmashingMagazine.com. If your theme doesn’t have a custom css section, you can install a plugin like Simple Custom CSS.

The Final Result!

 

 

Share this post!

How to embed videos and maps in a blog post

Share this!
Basic Blogging Checklist Part I: Quality Content and Important Images

Basic Blogging Checklist Part I: Quality Content and Important Images

posted in: Blogging, Our Work, Writing | 0 | This post may contain referral links. See privacy policy for more.

They don’t call it the Blogosphere for nothing. Blogging is its own little world with plenty of unwritten rules. These are constantly evolving as the internet evolves.

Today, we wanted to share Part I of our Basic Blogging Checklist. We read a lot about blogging before we ever published a post, so we had an idea of what to expect. However, it does not due to live exclusively by the precepts of others.

You have to figure how you want to do things for yourself. So this series is about how we approach blogging after 100+ posts. Maybe we’ll do another series when we are at 1000+ posts!

blogging, typing, writing

Content: The Key Ingredient

Content is king in the blog world. We aim for 300-500 words of content. Some may be shorter or longer, but most fall into the aforementioned range. This may seem daunting at first, staring at the blank page and blinking cursor, but the more you write, the easier it becomes. You just have to sit down and do it. See yesterday’s post for more (How to Write Anywhere & End Procrastination For Good).

The content must also have some intrinsic value to the audience. It needs to have a focus and a purpose, for example, to inform or entertain. A scattered blog post is not very helpful to readers, even it can be fun to create.

blogging, photography, iphone, iphone photography, city

Images: Visual Value

Everyone seems to have a two second attention span these days. Pictures help break up content for the reader. We tend to use between 3-10 images per post. The internet is a big place with lots of websites competing for viewership; images keep readers captivated. How many times have you stayed on a website to view interesting images?

You can use your own images, get some from flickr under the Creative Commons Licenses, or just google “free stock photos” to find great sites like unsplash. Once you have your photos, you will likely need to do some editing to optimize them for your blog.

We use Photoshop CC from Adobe on a $10/month subscription basis to make minor improvements to photos. We had been using Photoshop Elements happily for a couple years, including to create our very first book cover. (See more in Evolution of an eBook Cover: Part 1).

However, the price of Photoshop CC is well worth the editing power. You could also use a free alternative like PicMonkey. See The 10 Best Photoshop Alternatives You Need To Know from lifehack.org for more.

computer, laptop, photo editing, photoshop

Optimized Images: Level Up

We usually adjust the levels, curves, and hue/saturation as needed per photo. We also do any crops, rotations, or necessary text additions/watermarking in Photoshop. We have been teaching ourselves how to use Photoshop through YouTube Tutorials, especially those offered by Phlearn, and through some excellent sessions from Creative Live, where you can stream live classes for FREE! There is always more to learn in Photoshop.

Once we are happy with the look of each photo, we reduce the size to 900 pixels wide x (proportionate number) pixels high; sometimes we do 1200 pixels wide if it is an artsy photo. Reducing the size of your images will increase the speed of your website. Also, you don’t need to worry about high resolution – 72 pixels per inch is fine for blog photos.

Now the photo is ready for import to the website. We use wordpress, which makes image optimization a snap. We further reduce the size of our images using the WordPress PluginWP Smush. Almost finished…

Finally, we add the photo to the post and add some “alt text.” This seemingly obscure task is important for search engine optimization (SEO). You can read more at Image SEO: alt tag and title tag optimization from Yoast (of SEO Plugin fame). Basically, you type in words that describe what is in the image into the Alternative Text section of the Image Details. For example, the alt text for the above photo includes: “computer, laptop, photo editing, photoshop.” Another helpful article is from Search Engine Journal: Image Alt Text Vs. Image Title: What’s the Difference?.

We’ll be back with Basic Blogging Checklist Part II next week, so stay tuned!

Share this!