In this presentation, you will learn...
- When to use a graphic vs. a photo
- How to search for images online
- How to make your own graphics
Graphics vs Photos
Both are used to convey non-verbal messages and grab attention. You may want to use a GRAPHIC if it would better illustrate information (such as in an infographic or chart), help emphasizes something important (such as a date), or if branding (such as logos) is needed. Graphics are commonly used in the foreground while photos can be background elements.
How to Search for Images Online
Whether you’re looking for a pre-made graphic or a photo to create your own graphics, knowing what to look for and where to look is the first step to effective use of graphics. It is highly recommended to use a stock photo website (such as the ones in the resources menu on the right), as they are likely to be high resolution and have all the copyright information outlined up front. If you do need to use google images for your search, click on "Tools" at the top in order to filter by size and usage rights.
Not all colors are created equal!
WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
How to Make Your Own Graphics
For this training, we will be using Adobe Spark (please make sure to sign up for a free account and log in).
You can find free to use illustrations or vector graphics via the resources listed on the sidebar, such as pixabay. Download the highest resolution needed- in this case the hero image is 1400px by 700px so download the resolution that is bigger than that.
NOTE: Do NOT get a graphic or photo that is TOO BIG! Such as 4000px by 2000px. These images are TOO BIG for the web and would make your page load slowly.
On the top left-hand corner, the title of the project can be updated.
In the center top is the undo and redo buttons (ctrl+z also works!).
The right-hand toolbar is where most of the work will be done.
Upon upload, you will see these two options: Pin to Background or Move Freely.
One makes your photo into the background, the other makes your photo into a foreground element. For our purposes, we will choose Pin to Background.
Once the text is edited and the graphic is looking good, it's time to download.
NOTE: It is recommended to download as a .PNG file as it is a web-friendly file type that keeps the lines of the illustration looking crisp.
Now that the graphic is downloaded and ready to use, log in to drupal and edit your web page. At the top, click on Hero Section and select Hero Slide show from the menu.
NOTE: The hero slideshow will give you two size options! For this graphic, we will be choosing the LARGE BANNER that matches the dimensions of our graphic.
Once your hero image has been added, save and review the page.
NOTE: all hero images will have a black "overlay" effect. Take this into account when looking at the text on your graphic.
Navigate to the logos & branding section of the VCCCD Graphic/Media Library
NOTE: The logos & branding section has everything from logos to Hexcode for official colors that can be used on the web.
Once you find the logo you would like to use, click on the download button. There will be a prompt asking you to choose an available file type. For this purpose, the Medium PNG - 1280px is more than enough.
NOTE: You don't always need to download the biggest size! The largest size could slow down your webpage!
Go back to the project in Adobe Spark and click add a photo. This time, after choosing the logo, when it prompts you "Choose where to add:" click on "Move Freely"
NOTE: "Move Freely" = a foreground element that is not part of the background.
Place the logo where you would like it to go and follow the steps to download this new version of the hero image.
NOTE: as you are moving the logos around, you might see a dashed pink line appear. This line is a guide to help you center your logos on the board, use it wisely!