Banner image, size and prep for web

About

This is a tutorial on how to size a image in Photoshop for a web banner.
I also have video tutorial on this same subject you can view here and is posted at the bottom of this page.

Web image and banner

Gather your images


Make sure you have the right to use the photo on you website.  Just because an image in on the Internet, does not give you the right to use an image. 

Learn about Photo Attribution.

Google Search

Use keywords in your Google search, such as the name of the person and Creative Commons, the license.
Here is the link to the photo of Lyndon Johnson and Martin Luther King Jr.

Google search

bannerphotocreate01

Launch Photoshop

Go to File, New, and a window will open

Name the image file something that you will know what the image is later.

Example:  bannersliderMLK01

width 1600 pixels

height 500 pixels

Resolution 72

Background  – white, black, transparent or the color you select.  The color of the background is helpful if you are going to add text or the image will not cover the entire canvas.

Then, OK

bannerphotocreate02

A canvas will appear, white or black, depending what you selected

Locate your image you want to use on your desktop, portable hard drive or other location.

bannerphotocreate025

Place image 

Method one – drag image on to canvas

Method two  – Go to File, place embedded, search for image, then Place

The image is now placed on canvas, but does not cover the entire canvas.

Move image to left or right side of canvas.

Hold down on the shift key at the same time grab a corner of a photo, not a side.  Expand the image until it completely covers the  canvas. If you grab a side, instead of a corner, the image will be distorted.  If this happen, you can try Command  and the letter Z to step back on a Mac.  If that doesn’t work, you might have to place the image again on the canvas.

bannerphotocreate03

Take finger off of the shift key and move the image to display the image properly or the best view.

Click on the move tool, the cross on the top of the toolbar, left side of window.

You will be asked if you want to place the file.  Select Place.

bannerphotocreate04

Save first as  PSD, Photoshop file

The Photoshop file, PSD,  is a large image file and will not be used on the website. The PSD file can be edited later, so it’s important to keep this file.

You will be making a smaller size for the web in the next steps.  If the file is too large the website will have trouble loading.  A PSD can’t be used, and a smaller web quality image is needed.

Go to – File, save as, then select a location, not in your website folder.  You can make a folder just to keep your images located outside of your website folder for  the PSD.    Save.

At this time you can add text if you want to the image.  This might be details about the photo or photographer.

bannerphotocreate06

Prepare the web quality file  for the web.

File, Export, Save for web legacy

Presets:  JPEG High, JPEG, High

IMPORTANT – Save this file in the  image folder  located in the website or move after you have saved the  image.

bannerphotocreate08

This is the image file that will be used for the website.  It’s a JPEG sized file for the web.

If you haven’t already  – At this time, save this file in your images folder located in your website or move to the images folder after you have saved the image.  Save.

Your website folder will likely have a folder that is dedicated to images.  See in the folder listed below.  All images are located in this folder on a website.  All items in the website folder are required for the website to work.  This is NOT a storage folder.
websitefolder

bannerphotocreatefinal

Image placed on web page

See video tutorials posted below about how to add the banner image you just created to a slideshow if you are working with Adobe Dreamweaver CC and a Bootstrap carousel, slideshow.

civilrightswebsite

Video Tutorials – Size banner images, place image on web page

One thought on “Banner image, size and prep for web

Comments are closed.