The Adobe CC features your charity can benefit most from – web design

This is the second of our articles running through the most useful features available to charities as part of the discounted Adobe Creative Cloud ‘all-apps’ plan. To read part 1, click here.

This time, we’re running through 3 of Adobe’s most useful products for web design – Photoshop, Spark and Dreamweaver.


Effective imagery can be hugely beneficial for charities looking engage new and existing supporters. Photoshop is incredibly useful for this, with a range of features that help to create professional-quality imagery for websites, emails, social media or physical marketing materials.

Basic options include the ability to:

  • Crop images.
  • Change image format (from jpeg to png, for instance, which is useful if you want transparent elements in your images).
  • Remove the background from images.
  • Edit the image or canvas size.
  • Alter the colour-palette of the image.

Beyond that, Photoshop offers loads more complex options. If you have a staff member who has an interest in design, then Adobe have a bank of easy-to-follow tutorials they can use to upskill at Photoshop. With those, you could start doing things like:

  • Content-aware scaling: Altering the background without editing the primary subject of the image.
  • Using the high-pass filter: You can select certain parts of the image to make more crisp or highly-contrasted.
  • Using the bird’s-eye feature: This helps you keep perspective when doing detailed cloning or edge refinement.

Pretty much anything you could want to do to an image is possible in Photoshop, so the best thing to do if you’re not experienced with the software and stuck is to search for your exact Photoshop edition with a brief explanation of what you’re trying to achieve. From experience, this is a really easy way to become more skilled over time too.

Here’s just one of the Photoshop tutorials as an example of what’s available:



Here are some of the other most popular Photoshop tutorials if you’re looking to get stuck in right-away:


Spark provides a fuss-free way to generate informative images and is specifically useful for social media. Put briefly, you can:

  • Add your own choice of text, ideally no more than 200 characters.
  • Select a background image.
  • Personalise the image to be consistent with your charity branding.
  • Share easily with your audience.

It has a number of personalisation options to choose from, including fonts, styles, colour schemes and background images. These options ensure the image looks like your own creation rather than a standard stock image.

Additionally, you can easily change the image’s hue (colour palette) or make it monochrome without external editing.

Once your graphic is created, you have the choice to download and share it. If downloaded, it can be used a number of times across various channels.

The simplicity of Spark is a key reason it’s so appealing. It enables charities to create professional-looking graphics that can be used as an infographic, a call to action or just as an eye-catching addition to a text-based social-media post.

If you’d like to find out more about Spark, simply follow this link. As with each of the apps, it’s available on its own outside of tt-exchange. The most cost-effective way to get hold of this is through the Adobe CC ‘all-apps’ plan though.


This can get overlooked as too complex but it actually doesn’t require much advanced understanding to use.

If you maintain a website and have a styling issue, it’s often quite difficult to find where in the code to fix. This is where Dreamweaver comes in, even if you have minimal experience. Here’s how:

  1. Right click a blank space on the problematic webpage.
  2. Select the option to ‘view page source’, you’ll be greeted with an overwhelming amount of text.
  3. Select and copy all of the text, or a specific section if you have a very rough idea where the problem is.
  4. Paste this into a new Dreamweaver HTML document.
  5. Inspect and edit the source code where errors are identified.

Each type of code (i.e. HTML, CSS, PHP, Javascript, etc.) is highlighted in a different colour to make it easier to spot bits to fix.

Beyond that, if you’re more experienced in web development, Dreamweaver has the tools to build full web pages or even whole websites, including:

  • Taking advantage of images: Adobe stock images are readily available when you build your site with Dreamweaver.
  • Multi-page view: This means you can view both the source code and the preview at the same time.
  • Using the code suggestion feature: The process can be sped up with this as it predicts what you may want to have in your HTML.
  • Conduct a site-wide ‘find and replace’: This means you don’t have to pinpoint every individual error but can correct many at once.

If you’d like to get to grips with the tools that Dreamweaver makes available, then the best place to check is the Adobe site. Otherwise, some good ones include:

  • Udemy – It’s quite long but free and can be undertaken in your own time.
  • Bring your own laptop – This one is broken down into useful sections so you can refer specifically to what you need.



Copyright © 2017 Tech Trust.
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License