The data of [SASHIE] can be downloaded with PNG (image) and SVG (vector). Although it is good to use as it is, it is recommended to customize it according to the taste and contents of your website with a little processing.

In the case of image data, it is relatively easy to use such as “change color”, “trim with rectangle”, etc. If it is a vector (SVG), it is creative like “to paint different colors” “combine” Editing is possible.

For use as an eye catch image of a blog or illustration of contents, we will introduce Tips (using Adobe Photoshop, Illustrator) according to each characteristic.

Change the color of image data (PNG)

You can change the color of your favorite with Photoshop’s tone curve, level correction, hue saturation and so on. Let’s adjust each parameter and check the color change.

Color change example

Color change example

As an example I uploaded a droplet to change from default blue to gray. (Photoshop droplet)

ToMono Application example

ToMono Application example

Mask the image data (PNG) with a rectangle or a circle

It will be processed in Photoshop.

  1. PNG Draws a rectangle at the place you want to cut out on the image.
  2. Double-click the original image (background) in the layer and move it above the rectangle.
  3. Applying [Group Layer / Layers] masks the image in any way.
  4. In [Image / Trimming], omit the transparent part and adjust it to the appropriate size.

Application example of mask

Different colors of vector data (SVG

Because it is vector data, I will process with illustrator.

  1. After selecting all, outline all paths with [Object / Path / Path Outline].
  2. Select an outline and change it to an arbitrary color with [Selection / Common / Color].
  3. If useless painting (line painting) remains, please delete it (I will sorry to trouble you.
  4. After releasing the group, select any part (fill) with the direct selection tool (A) and color it.

Colored example

Increase expressiveness by combining

Let’s improve expressiveness by combining elements such as combining illustrations and adding ballistic.

Try animating

  1. For each parts such as arm and neck, group by Illustrator, and rotate and move partly to make two patterns.
  2. Display the timeline in Photoshop and apply the scenes made in (1) alternately.
  3. Write out with GIF.

Animation example

How is it? You can see that the illustration changes variously with a little ingenuity. These customizations are just an example. Let’s make a nice illustration by devising variously so that everyone fits the contents.