#notaverygoodtutorial

Skill-share (pixel animation tutorial)

Hello, I am sharing my new-found pixel animation skills that I learned using Adobe Photoshop, in the hope that I can help other people to learn how to make simple 2D GIF pixel animations. Some people out there may be wondering how to create their own GIFs to add to their social media sites, or to other sharing platforms. As I am new to Tumblr, I will also be using my new-found Tumblr blogging skills to create my very first tutorial blog-post for readers to follow. 😉

This post is a very basic, easy-to-follow tutorial, for anyone who is looking to start animating in Adobe Photoshop, suitable for all ages. So, if you are a beginner and you want to have a go at pixel animation, then please, follow my tutorial. I have tried to use plain language and instructions (no jargon). I believe that everything I have explained, every instruction, is easy to understand. If not, please feel free to comment and I will do my best to help and rectify any problems. Your feedback posts will let me know if my tutorial has been a success or not. Anyway, I really hope that you find my tutorial useful.

The basic knowledge and skills that I will be sharing are:

How to create, upload or select an image to develop (digital character-design).

How to use editing tools in Photoshop.

How to use ‘Layers’ in Photoshop to create frames.

How to use tabs in Photoshop.

How to use drop-down selection menus in Photoshop.

Animation concepts and how to create walk-cycles.

How to save and export created pixel animation GIFs.

Rule number one about Photoshop is that it is very hard. If you are using it for the first time, take it easy, don’t over complicate things because otherwise, you will most likely get very frustrated and may even quit before you begin your animated journey.

The first thing you are probably going to want to do, if you want to start animating in Photoshop, is to open the program and start a new document. Open the desired image file or create your own images from scratch. You can rearrange the details so it fits your needs perfectly; don’t worry, that part is fairly simple.

Next, select the ‘Paintbrush Icon’ from the toolbar, get out your brush-tool and start drawing! Keep trying to get the character to look how you desire. Remember, you can use the drawing tools to edit images you have uploaded or you can create images from scratch. It’s okay if it doesn’t look great immediately, you’ll get there, most good things happen with time.

‘Layers’, they are a thing and a very useful thing. If you layer-up your work, you can start to make your animation. Also, the useful thing about layers is that you can trace over other layers, so, they look the same and are in equal proportion. You start at the base layer and stack-up layers as you create your characters. The final layer will be the first visible. 

Once you have some layers sorted out, you can look to the bar at the very top and see where the tab says “Window”, go all of the way down the drop-down selection menu list and click on “Timeline” and when you do, a bar will pop up at the bottom of your screen. You will see a button that says either “Create Frame Animation” (which is the one that I used) or “Create Video Timeline”, for the animation I would suggest using Frame Animation, as I don’t know yet what the other one does exactly. After you have clicked on Frame Animation, you can put all of your layers side-by-side and move them around, edit them. You can do whatever to make the animation how you want it to be. When you have finished creating, don’t forget to name and save your animation.

Once you export your finished animation, you can upload it to your blog, social media, any website or email messages.

Figure 1 - Adobe Photoshop Toolbar and Drop-Down Selection Menu

Simple Steps to Create a GIF:

Open Adobe Photoshop.

Upload and open your created image.

If you want to, you can edit your uploaded image or draw your own character using the drawing tools from the toolbar on the left. 

Click on ‘Timeline’ in the window drop-down menu.

Click ‘Create Frame Animation’.

For every new frame, create a new layer.

Open the menu icon on the right, select ‘Make Frames From Layers’.

Under every frame, choose the time-span length for appearance before switching to the next frame.

At the bottom of the toolbar, select amount of times to loop.

Press the ‘Play’ icon to preview your GIF.

Name, save and Export Your GIF.

Upload your GIF to your blog, social media site or email messages.

Steps (from Adobe Photoshop) to Export Your GIF:

Go to File > Export > Save for Web (Legacy)...

1. Select GIF 128 Dithered from the ‘Preset’ menu. 2. Select 256 from the ‘Colors’ menu. 3. If you are using the GIF online or want to limit the file size of the animation, change Width and Height fields in the Image Size options. 4. Select Forever from the ‘Looping Options’ menu. Click the Preview... button in the lower left corner of the Export window to preview your GIF in a web browser. Click Save... and select a destination for your animated GIF file.

Now you have an Animation, I hope. If not, I am very sorry. Good luck!

Please let me know how you get on.  If you encounter any problems or have any suggestions, I would really value your feedback posts.  Thanks 👍

Thanks to rai-smik for the feedback below:

Basic Moving Strawberry GIF - from rai-smik

Created following my Adobe Photoshop Tutorial

Tutorial Review

First of all, I have to say that writing my first Adobe Photoshop pixel animation tutorial was not easy. Trying to explain and write instructions for other people to follow was quite hard. I really had to stretch my brain to try and formulate a comprehensive guide that other people would be able to understand and follow. Using Tumblr for my skill-share was a brilliant medium; it was easy to use and a great platform for sharing skills quickly.

So, after receiving clear feedback from rai-smik (as above) I am now able to reflect on how successful, or not, my skill share was.

I believe that I was able to convey all the necessary information to share my new skills in my tutorial, this is because the feedback from rai-smik reported a successful animation creation (bouncing strawberry GIF above) using my guide. The user said that they were able to understand my numbered instructional list, and they also found the tutorial language/tone simple and easy to understand. So, as the user was able to follow my step-by-step numbered list with no problems, and they managed to create their own GIF, I would say that my tutorial achieved what it was designed to do.

However, after reading my feedback, I realised that I should have taken screenshots in Photoshop of each step that I took to create my animated character, and I should have inserted the screenshots underneath, or above, its corresponding numbered instruction in my tutorial. It’s so obvious now that visual images should have been pasted in to complement the written instructions. I can’t believe that I overlooked such a simple thing. Next time I write a tutorial I will definitely insert screenshots to better convey my ideas to the audience. 

Writing the tutorial also reinforced my own knowledge, and instilled a deeper understanding of the things that I had learned during the Photoshop training. I feel more confident about revisiting my new skills and moving forward with new projects. If I go wrong, I can always look back at my tutorial to remind me how to get it right. Also, now I know how to write a tutorial, I can apply this knowledge to other subjects and produce this kind of documentation when it is needed. It is a good skill to have and I know I will keep improving my technique.

Overall, I enjoyed writing my tutorial, it was a fun document to create. I had fun creating the jpeg that shows both the Photoshop toolbar and the drop-down menu. I also had fun searching for a thumbs-up GIF to add at the end of my document. It gave me the chance to look around Tumblr and see what’s going on out there. Mostly, I am so glad that someone was able to use my tutorial, understand it and get good results.

Summary: so, what did I learn from creating a tutorial? ✔✔✔✔✔✔✔

I learned how to share skills and knowledge through blogging, using Tumblr as a platform.

I learned that sharing skills reinforces learning.

I learned to hone my technical skills online and in programs.

I learned how to create a tutorial (transferable skills).

I learned how to write a review (transferable skills).

I learned how to add instructional screenshots (transferable skills).

I learned to consider my audience, beginners who might use my tutorial.

Critical Review - Skill-share (pixel animation tutorial)

Disappointingly, from creating my pixel animation tutorial, I learned that I am not as good as I would like to be at it, sharing skills that is, and I need more tutoring and practice. I also learned that I am not the best at writing a review. I tried so hard to create the tutorial, but I missed so many obvious factors (like lack of screenshots) that someone else who might want to learn how to use Photoshop (an absolute beginner) might not be able to follow my tutorial very well.

Summary: so, what do I need to improve? 🤦‍♀️

I need to learn how to explain myself better in writing; to convey better.

I need to include more detail and less waffle in what I am writing.

I need to practice and create more tutorials to improve.

I need to practice writing reviews to improve.

I need to include screenshots of every stage of animation.

I need to learn how to add instructional screenshots appropriately.

I need to be more critical of my own work.

I need to learn how to judge and edit my own work to get it right.

I learned that I need to get third-party feedback.

Considering my intended audience user-base (those who might use my tutorial); I wanted to share my new skills to try and help people like me, who lack education and access to good facilities. I was hoping that disadvantaged people, who are basic beginners, might be able to learn from an easy-to-follow tutorial, for anyone who is looking to start animating in Adobe Photoshop (for all ages). Beginners who might want to learn animation. I tried to use simple language and instructions. I believed that everything I explained, every instruction, was easy to understand. However, I now realise that my tutorial was not very useful for some people in society.

Crucially, one thing that I stupidly overlooked and have genuinely learned from, is that most disadvantaged people do not have Photoshop or access to Photoshop; I only know one person, in my whole association, that has access to Photoshop. I came to realise that once you’ve had access to something (like Photoshop) how easy it is to fall into the patronising bourgeois trap of “Let them Eat Cake” 🎂 -- so, that was very foolish of me! 😒😒😒

APOLOGY: the label ‘Disadvantaged’ is considered to be discriminatory. ‘So-called’ disadvantaged people find it insulting and patronising (I should know, I am labelled as disadvantaged).

“Once you label me, you negate me” - Søren Kierkegaard