Sizing on Photoshop

Ever visited a website that is full of content/images and it just seems that it will take forever to load? Or how about scrolling through a website when randomly the screen freezes? Most people think there is an issue with their computer or that the internet is slow, most of the time the issue revolves around the size of the images. I wish I could tell you that the sizing of images does not matter and that you can upload whatever image you want for your website instantly. Though, you are more than willing to upload any image of your choosing, the sizing just needs to be appropriately adjusted.

What do I mean by that? Each image you upload to a website has a size and an aspect ratio. Image size will determine how big or small the image is on a page. Aspect ratio is the proportional relationship between its width and height – so will determine its shape.

Why is this important? These two things are key contributors to what your image will look like on a webpage according to Jo Waltham of Callia Web,

How does this relate to Photoshop? Let’s say that you download an image of a mountain that you want to use for your website. The original image size is 1920 x 1280 with a file size of 370 KB. Too big. Photoshop allows you to adjust the sizing so that it can work for your website. You just click “new project” and enter the dimensions you want and then open up your original image and click “select all” to copy the image to insert on the new project. You can then control the sizing by using the different functions that shrink the image to fit the appropriate sizing. Once you have completed those steps, you export the image to fit the web.

Editing Images

You do not need to be a professional photographer to edit images on Photoshop. There are many simple tricks that can make your image go from bland to grand. Photoshop allows users to adjust certain features about each image. Below is an example of an image that I quickly adjusted some characteristics that created more energy to the image.

 

 

According to techradar, these are the top ten tools on Photoshop to consider when editing images for your website.

  1. Using adjustment layers: Layering allows the user to apply multiple edits without harming the quality of the original image.
  2. Converting to black and white layers: Creates power in the image and avoids the hassle of keeping a consistent color scheme when working with multiple photos.

    Courtesy of techradar.com

  3. The Camera Raw filter: Allows the user to go back and make an adjustment with speed and ease on a JPEG image.

    Courtesy of techradar.com

  4. Healing Brush: This tool allows you to retouch specific areas on an image that you would like to see removed or edited.
  5. Customizing your workspace: This allows the user to select relevant photos and transfer them into a folder to make it easier to retrieve when needed.
  6. Dodge and burn: Allows users to adjust the brightness of specific parts of the images. The tools can be set to target shadows, midtones, or highlights.

    Courtesy of techradar.com

  7. Create a contact sheet:

    Courtesy of techradar.com

  8. Blending modes: This adjusts layers to achieve a range of effects such as the changing of brightness, contrasts, and colors.
  9. Quick Mask mode for selections: Allows you to paint of a specific area on an image, which then selects the designated area to be able to edit.

    Courtesy of techradar.com

  10. Cropping: The crop tool allows you to adjust the grid of what is shown on an image. Photoshop allows you to create your own customized grid that can serve as a preset when needed.

Why Photoshop is an Essential Tool in Web Design

Sizing on Photoshop

Ever visited a website that is full of content/images and it just seems that it will take forever to load? Or how about scrolling through a website when randomly the screen freezes? Most people think there is an issue with their computer or that the internet is slow, most of the time the issue revolves around the size of the images. I wish I could tell you that the sizing of images does not matter and that you can upload whatever image you want for your website instantly. Though, you are more than willing to upload any image of your choosing, the sizing just needs to be appropriately adjusted.

What do I mean by that?

Each image you upload to a website has a size and an aspect ratio. Image size will determine how big or small the image is on a page. Aspect ratio is the proportional relationship between its width and height – so will determine its shape.

Why is this important?

These two things are key contributors to what your image will look like on a webpage according to Jo Waltham of Callia Web,

How does this relate to Photoshop?

 Let’s say that you download an image of a mountain that you want to use for your website. The original image size is 1920 x 1280 with a file size of 370 KB. Too big. Photoshop allows you to adjust the sizing so that it can work for your website. You just click “new project” and enter the dimensions you want and then open up your original image and click “select all” to copy the image to insert on the new project. You can then control the sizing by using the different functions that shrink the image to fit the appropriate sizing. Once you have completed those steps, you export the image to fit the web.

“You do not need to be a professional photographer”

Editing Images

You do not need to be a professional photographer to edit images on Photoshop. There are many simple tricks that can make your image go from bland to grand. Photoshop allows users to adjust certain features about each image. Below is an example of an image that I quickly adjusted some characteristics that created more energy to the image.

According to techradar, these are the top ten tools on Photoshop to consider when editing images for your website.

Using adjustment layers: 

Layering allows the user to apply multiple edits without harming the quality of the original images

Converting to black and white layers

Creates power in the image and avoids the hassle of keeping a consistent color scheme when working with multiple photos.

The Camera Raw filter:

Allows the user to go back and make an adjustment with speed and ease on a JPEG image.

Healing Brush

 This tool allows you to retouch specific areas on an image that you would like to see removed or edited.

Customizing your workspace

This allows the user to select relevant photos and transfer them into a folder to make it easier to retrieve when needed.

Dodge and burn

Allows users to adjust the brightness of specific parts of the images. The tools can be set to target shadows, midtones, or highlights.

Create a contact sheet

Blending modes

This adjusts layers to achieve a range of effects such as the changing of brightness, contrasts, and colors.

Quick Mask mode for selections

Allows you to paint of a specific area on an image, which then selects the designated area to be able to edit.

Cropping

The crop tool allows you to adjust the grid of what is shown on an image. Photoshop allows you to create your own customized grid that can serve as a preset when needed.

For this post, I want to start by looking at 3 banking websites. I know banking isn’t necessarily an obvious first example, but banks require a conservative approach. People must trust their online presence, or the online usage will be limited. The colors banks choose must convey messages about reliability, trustworthiness, and those colors can be culture – specific. Some color theorists might argue that many banks choose to wrap their sites in blue because that color conveys authority and trust. Who knows. It matters to understand not only the color, but the proportion.

I’ve chosen two national banks, and one regional bank: Chase Bank, Wells Fargo, and Union Bank. You can try this exercise with your own favorite banks, just to see if you find differences.  Open up three bank sites.  How many colors do you see?  Stay at the top of the page for a minute, and watch the images that scrolls. Be sure to note:

  • Background colors – even if white;
  • gradations of a font color—look for black turning to grey.
  • Small dividing lines/borders around text
  • Check roll over (particularly easy to see in the menu though roll overs are fading in the land of icons for menu options)
  • Notice the prominent colors in staged pictures – Photo content counts as part of their color palette.

Related Articles

Adobe Alternatives and Dupes

    A subscription to Adobe can get a little...

Adobe Alternatives and Dupes

    A subscription to Adobe can get a little...

Adobe Alternatives and Dupes

    A subscription to Adobe can get a little...