Content Basics: Graphics using Adobe Spark

Title header with Drupal 8 logo that says "Ventura County Community College District 2020 Drupal Training Content Basics: Graphics using Adobe Spark"

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. 

Screenshot of google images with the tools section highlighted.

Accessibility

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.

Screenshot of WebAIM with a good contrast.
Screenshot of WebAIM with a bad contrast.

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). 

 

  • Details of Hero Image
    Step 1: Making a Hero Image Graphic
    The Hero Banner Image is 1400px wide by 700 px tall. Note that only the centermost part of the image is going to show up properly. 
  • Illustration Vector Graphic found on the website Pixabay
    Step 2: Start with an illustration or Vector

    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. 

  • Adobe Spark landing page with Custom Size highlighted
    Step 3: Log in to Adobe Spark
    Log in to Adobe Spark and start a new project with a custom size. 
  • Select a size screen on Adobe Spark
    Step 4: Select A Size
    Insert the custom size for the hero banner, which is 1400px by 700px.
  • Screenshot of the Adobe Spark Interface.
    Step 5: Get Comfortable with the Spark Interface

    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. 

  • Screenshot of Adobe Spark highlighting the add toolbar
    Step 6: The Add Toolbar
    If you click on Add you will get a new toolbar popup. You can add text, photos, etc. For this demonstration, we will be adding a photo first by uploading the vector from step 2. 
  • Adobe Spark screenshot of choose where to add prompt.
    Step 7: Choose Where to add:

    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.

  • Adobe Spark screenshot Scale and Rotate
    Step 8: Scale and Rotate
    Now that the image is placed, it will then give us the options to scale or rotate to make it fit better on the board. 
  • Adobe Spark screenshot with text templates.
    Step 9: Add Text
    Now we can go back to "Add" and add text to get this menu of stylized text templates. 
  • Adobe Spark screenshot with text template options.
    Step 10: Place the Text Template
    Once the text template is placed, it can then be edited using the new menu on the right-hand side and you can edit the text itself by double-clicking on it. 
  • Adobe Spark screenshot highlighting the download button
    Step 11: Download

    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. 

    Adobe Spark screenshot highlighting the different file types for download
  • Screenshot of Drupal 8 Hero Section
    Step 12: Adding your Hero Graphic to Drupal

    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. 

    Screenshot Drupal 8, selecting hero slideshow size.
  • Screenshot of file upload
    Step 13: Uploading the Graphic
    Select your file for upload. Note that this graphic is the correct size for the hero image and will fit properly in the space. 
  • Screenshot from Drupal 8 file upload with the Alt Text prompt.
    Step 14: Alternative Text and Categories
    This is one of the MOST IMPORTANT STEPS! Your alternative text (or Alt Text for short) should be a brief description of your graphic. NOTE that you MUST include any text that is on your graphic, otherwise screen readers will not be able to read it! In this example, the graphic has "Rad Graphics" typed on it, therefore in the Alt Text box we have written "Rad Graphics". 
  • Screenshot Drupal 8 webpage with Hero Image.
    Step 15: Save and Review

    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. 

  • Screenshot of VCCCD Graphics/Media page.
    Step 16: Adding logos

    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. 

  • Screenshot of VCCCD graphics/media library with the prompt to download a logo.
    Step 17: Find and Download Logo

    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! 

  • Screenshot of Adobe Spark, Add a photo highlighted.
    Step 18: Add a Photo and Move Freely

    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. 

    Screenshot of Adobe Spark with the Choose Where to Add prompt.
  • Screenshot of Hero image with added logos.
    Step 19: Place and Download

    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!