Waterflow imitation. Animated tiles of water with Adobe Photoshop and ImageReady

      Games    Pixelart    Tutorials    Links    Contact GAS 13    
Author: Sergey DELer Kanev (translated by Gas 13)

This method allows you to create animated tiles of water by means of Adobe Photoshop and Adobe ImageReady. This automated process will save time when you are developing mobile phone games.
This method was tested while I was working on "Hive of Evil" (mobile)...

Concept test graphics, project: Hive of Evil Waterflow imitation. Animated tiles of water with Adobe Photoshop and ImageReady

First of all, you should create a water texture (it doesn't need to be high quality but rather contrast). It will be the source material of the whole work...

Create a new file. It should be rather large (so it'll be easier for an eye to see the quality of tiling and animation). Fill the layer with the source texture. Duplicate the layer... Change the opacity of the higher layer...

...the opacity was set to 30% in this example, but the opacity differs depending on the type, contrast and colors of the source texture.

Switch to ImageReady...
Now, you should create new frames moving the upper layer on some pixels. Move direction and step of move should be selected depending on your goals.
Main thing is that you must have a cycled animation as a result... Having 16x16 tiles moving on 2 pixels you will get a calm smooth animation of waterflow. The bigger this step the higher speed of the water and (!) less frames... For best result you can play with opacity on each frame and editing pixels while animating.

Here in this examples you can see the changes that were gained by changing movement directions and parameters of the layer...
The best results you're getting should be saved as gif using your working pallete...

Waterflow imitation. Animated tiles of water with Adobe Photoshop and ImageReady

Now all you need is to get the real frames of your water animation and crop the tiles to get the waterflow tileset...
Open your gif animation in ImageReady and switch back to Photoshop... Crop any place of your animation to 16х16 pixels.

Now we have psd-file with 16х16 pixels tiles. The number of layers is the number of frames.

All you need now is to save by turns every layer...

As a result of this not that hard manipulations we have got waterflow tiled animation texture.

(zoom 200%)

Here below you can see some test water animations made using aforesaid method while I was creating graphics for "Hive of Evil" and some other projects of our CyberDream company.

All the graphics materials are
property of mobile games development department
of CyberDream.

Author of this site has an official permission on hosting this tutorial here. You must get the author's permission to host this tutorial on your website.

  Photoshop tutorial pixel menu
Pixel menu
Pixelart tutorial
Pixelart tutorial antialiasing
Pixelart tutorial
  isometric pixelart tutorial
Isometric pixelart
Pixelart tutorial
so you want to be a pixel artist
So you want to...
Pixelart tutorial
  pixel face
Pixel face
Pixelart tutorial
animating water photoshop tutorial
Pixelart tutorial
  isometric pool tutorial
Isometric pool
Pixelart tutorial
Photoshop art tutorial
Art tutorial
Photoshop tutorial
  Photoshop tutorial drawing from a reference photo
Photoshop tutorial
Photoshop tutorial drawing human hair
Human hair
Photoshop tutorial
  Photoshop tutorial drawing human hair
Human updo hair
Photoshop tutorial
Photoshop tutorial drawing human eye
Human eye
Photoshop tutorial

Were this tutorials helpful? Please consider donating a few dollars to keep this site alive.

(c) 1997-2024 Alexey Garkushin