www.WPTechCafe.com

Module 7: Images• Image Sizes• Header• Featured Image• Social Media

• Free Stock Photos• Free Online Design Tools

www.WPTechCafe.com

ImagesSetting up a theme to look like the demo, especially one with several widget areas on the home page, often depends on duplicating the image sizes.

Before you start the set up process, take the time to discover the image sizes for your home page widgets, logo, header, and featured images.

www.WPTechCafe.com

ImagesMany premium themes (including Hello Glam from Hello You Designs) include image sizes in the documentation.

This theme uses retina images for both the front page widget areas and the logo.

Retina Display is the registered trademark used by Apple for a display technology used in their latest devices. This technology basically displays more dots per inch than older devices ( around 300 DPI). This means crisper images and smoother font rendering.

If an image area on your website calls for a retina display ready image, you will need to create an image twice the size of the display area.

www.WPTechCafe.com

ImagesThe documentation for this theme also includes the size for the logo. The logo is also designed for retina display meaning the logo will display at half of its actual size.

www.WPTechCafe.com

ImagesTo discover the size of feature images or other images included in the layout, use the Right Click on your mouse to find the View Image Info menu item.

Right click on an image and look for View Image Info or similar phrase in the box that appears

www.WPTechCafe.com

ImagesIf the information is available, your browser will display the image size, the actual image size (if it is different) and sometimes other properties.

Your browser will show you the actual image size (the size you initially uploaded to the media library) and the displayed size that has been reduced and cropped to fit the image space designated by the theme.

www.WPTechCafe.com

ImagesThe details displayed when you Right Click an image will depend upon your browser.

Each browser will offer a different display providing information about the image.

www.WPTechCafe.com

ImagesFor themes that do not include image sizes in the documentation, you can usually discover the logo and header sizes by clicking through the setting options in the Customizer.

For this theme, clicking the Site Identity gives you’re the option to upload a logo.

www.WPTechCafe.com

ImagesWhen you choose to upload a logo, you discover the recommended logo size.

If you upload an image larger than this size, you will have to crop it.

www.WPTechCafe.com

ImagesThis theme also provides a place for a header image. Clicking on this option in the Customizer menu will cause a second screen to appear.

www.WPTechCafe.com

ImagesThe recommended header image size will be displayed here.

www.WPTechCafe.com

ImagesYou will need to use the Right Click to View Image Info option to discover the image sizes needed for your blog posts.

www.WPTechCafe.com

ImagesIf the Right Click option does not work, look for an add-on tool for your browser. The one I use is MeasureIt.

This tool adds an icon to your browser tool bar that allows you to measure the pixels of any given area on a page.

www.WPTechCafe.com

ImagesIn addition to images specifically sized for your blog, each social media platform recommends specific image sizes.

Your handout for this module will include templates and links to regularly updated sources.

www.WPTechCafe.com

Free PhotosMany wonderful sites offer photos, illustrations, and graphics that are free to download and free to use for your blog and social media.

One of my favorites is Pixabay. You can start with a search using any word or refine your search with several options.

I use the color option when building a mood board for new sites. Spend some time using a combination of the options to find images that fit your needs.

www.WPTechCafe.com

Free PhotosOne of ways these sites make money is by offering links to premium image options. Any image in a section titled Sponsored or with a watermark across the image is a paid item.

Each site displays the paid images in different layout. Be sure you are choosing a free image.

Look for the page number to see more images from your search criteria.

Any image in a section titled Sponsored or with a watermark across the image is a Premium (paid) item.

This section displays the free images available to download.

www.WPTechCafe.com

Free PhotosDouble-clicking on an image will cause a larger copy of the image to appear with a download button. Click on the download button to bring up image size options.

www.WPTechCafe.com

Free PhotosChoose the image size you wish to download. Click the Download button.

The image will be downloaded to your computer.

See the handout for more sites with images that are free for you to use.

www.WPTechCafe.com

Free Online Design ToolsSign up for Canva with your email address and a password.

You’ll arrive at your Canva dashboard with templates for social media and other projects.

Canva saves each project and they will appear on this dashboard.

Don’t miss out on the full library of tutorials available for beginning to advanced users.

In addition to the 23-second intro tutorial Canva shares, a full library of detailed tutorials can be found by clicking Learn to Design.

www.WPTechCafe.com

Free Online Design ToolsCanva provides many templates sized for specific projects and platforms. It also allows you to create your own image sizes.

Click the green Create a Design button and click Custom Dimensions in the upper right corner. Add the pixel dimensions to the fields and click the green Design button.

www.WPTechCafe.com

Free Online Design ToolsA canvas (or page) in the size you designated appears with background options in the left column.

Click on the full photo background image and drag it to the empty page.

The photo background will fill the page.

Click on the photo/image background and drag it over to your blank page

www.WPTechCafe.com

Free Online Design ToolsClick the green Upload your own images button to upload photos from your computer.

Once the photos are fully uploaded, drag and drop them into the photo background.

www.WPTechCafe.com

Free Online Design ToolsTo adjust the size or cropping of the image, click the Crop button in the upper toolbar.

www.WPTechCafe.com

Free Online Design ToolsThe part of the image outside the crop lines will be displayed. You can drag the image to reposition it. You can also click on one of the corners to resize the image to fit your needs.

Drag the image and/or resize the image by positioning your cursor on a corner

www.WPTechCafe.com

Free Online Design ToolsOnce you are satisfied with the image, click the checkmark in the toolbar.

www.WPTechCafe.com

Free Online Design ToolsYou can duplicate the page and create additional images of the same size.

When you have completed your design, click the title area and update your title. Click the green Done button.

www.WPTechCafe.com

Free Online Design ToolsClick the green Download button to download the image (or images) to your computer.

www.WPTechCafe.com

Free Online Design ToolsTo add text to an image, click the Text icon and one of the text sizes. Add your text to the box that appears.

www.WPTechCafe.com

Free Online Design ToolsUse the design tools to change the font, the size, and/or other aspects of the text.

www.WPTechCafe.com

Free Online Design ToolsWhen you have completed your design, download the image for your site.

See your handout for more free tools.

www.WPTechCafe.com

I share easy-to-follow tutorials and effective tools to improve your blogging journey. I specialize

in identifying the best resources to prevent online overwhelm.