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.
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
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.
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.
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.
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.
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.
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.
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.
Multimedia Toolkit 
You must be logged in to post a comment.