Animated GIF (II)

When my professor first showed how to make this kind of animated GIF, I thought it might be hard. However, when I tried, it became easy and fun. So, I ended up making three of them. For my animation, I chose the pictures and animated GIF from Google image. I used NewHive online website to place an animated background and animated characters to under and over the static picture.  Then I have used ISpring to record the screen for three minutes. After that, I saved the recording as a video and imported the video as frames to the Photoshop. Then I saved these frames as GIF for the web. This is a link about how to do it:

After making the first one, I think I can use this skill for educational purpose. So, I made the following GIF. This GIF represents a modern city. In this GIF, I have used five characters. Each character symbolizes each problem that is going on in that city. The GIF  demonstrates that the city has Obesity, poverty, relationship problem, depression, and anxiety.  This is my first symbolic GIF ever.

I would say this is my favorite Disney GIF ever.  I have used some characters from several Disney movies and put them as an animated GIF. This GIF seems childish but I am proud of my creation.

Animated Gif

I wanted to make this kind of animated GIF from the first day when I saw a similar GIF like that. Instantly I asked the question to my professor “how can I make one like that?” Professor explained it to me since I was looking for a chance to make it. So, here it is-

I know it looks quite simple but it takes a lot of effort to make it. As you can guess, I took a picture of Jake Gyllenhaal for making this GIF.

At first, I used PIXLR to make this black & white effect.  This is the link to the tutorial:

After making this effect, I have used Photoshop to crop out the black space from the photo and have made the background transparent. Then saved the picture as a PNG file for the web. Next, I choose a GIF background and used the  to place this static photo over a GIF background. As I am using windows 10 as the operating system, I used iSpringto record the screen. This software is free to download and easy to use. After recording for four seconds, I saved the recording as a video and imported it to the Photoshop. In Photoshop, I chose the video to frame animation option. Then I saved these frames as GIF for the web. This is the link to the video of how to make GIF from the video: doing these hard works, I became really happy when I saw the final animated picture of Jake Gyllenhaal.


Splatter Effect With Pixlr

I have found the splatter effect is a very sophisticated effect. I really wanted to learn it using Photoshop, but I did not have access to Photoshop from my home. However, I have used PIXLR to learn it.

  • Select a picture with transparent background and erase it using the eraser.
  • Select the paint bucket tool and give the background white color.
  • Then open the image one more time, copy it and paste it on the white background (you can skip this part if you have a picture with white background).
  • Select the move tool and move the picture little bit to the right. Duplicate this layer for two times.
  • Go to the edit tab and select free transform. Use it on the layer 1 copy.
  • Add a layer mask to the second layer.
  • Select the brush tool and open up the following dialogue box.                           Select the more option and open up the following dialogue box.        Click on the splatter option and add those brushes under the brush option.
  • Use these brushes to create the splatter effect.
  • Last but not the least save the picture.

I have used the link below to learn this effect:

This is my splatter effect:

Learning The Creation Of An Out Of Bounds Effect

As you all know, I am working with the PIXLR for a couple of weeks to learn and create new effects. This week I am learning the out of bounds effect. I found it relatively easy to make and the outcome is amazing. The major steps of creating these effects are:

  • Choose the image, create a new blank layer and a duplicate layer.The image should have a transparent background.  When we are doing this effect, either we can download a picture that has a transparent background or we can make the picture background transparent manually. This is a link of how we can the picture background transparent:
  • Use the drawing tool to create the clipping mask. At first, select the drawing tool icon, increase the border size to 20 and check off the full shape button.
  • Change Perspective. Go to the edit, click on the free distort option and adjust the frame. 
  • Select the frame areas with the wand tool.
  • Add a layer mask that hides part of a layer.
  • Select eraser, increase the size of it and erase the border of the selected area.
  • Select the brush tool, increase the size of it and use it to improve the image.
  • Apply the layer mask to the existing layer, merge down the layers.
  • Make the photo part of the image more distinct. Go to the adjustment tab, select the curve option and change the presets to color.
  • To give the picture a wavy look, select the water swirl option from the filter tab. Adjust the amount and size.This is the link of the video that I have used to learn this effect:

This is my out of bounds effect:

Please try it using the resources that are provided and comment below if you have any questions.

Galaxy Effect Using Pixlr

Galaxy effect is really a cool effect and it is very easy to create using Pixlr. When I was scrolling through videos to get some ideas for my next project, I saw this effect. I was very enthusiastic to learn this effect. So, I took the picture of my favorite actor Jake Gyllenhaal. The final product of this effect is very beautiful.


These is the link of the video that I have used for creating this effect

3-D Effect Using Pixlr

Pixlr is a cloud-based set of image tools and utilities, including a number of photo editors, a screen grabber browser extension, and a photo sharing service. The suite was intended for non-professionals, however the apps range from simple to advanced photo editing. It’s function is similar to Photoshop. But, one great difference is Pixlr does not have any timeline bar. So, any kind of animation or GIF cannot be created by using this online photo editor. This 3-D effect on Pixlr is similar to the Glitch effect on Photoshop. Using Pixlr for this effect is much more easier than using Photoshop. I take a photo of Cinderella for doing this effect because it is one of my favorite fictional character from Disney world. When I tried to do the 3-D effect on this photo, it was not that hard for me. I have watched couple of you tube videos and tried to create this effect. The links of the videos are given below:

GIF Animated Glitch Text

After working with glitch effect of the picture, I became interested to work with the text effect. I must say the text effect was more complicated than the picture. I was taking help from the Youtube video and still I messed up some part of it. I tried to figure out my mistake and I became confused. But, I finished my work. This is the GIF of animated text with glitch effect:

This is the link to the Youtube video that I have used: If you guys can find an easier tutorial of this text glitch effect, please let me know.

GIF Animated Glitch Picture

Working with photoshop is complicated and interesting. Complicated because it has many unexpected cool features and there are thousands of ways to create one certain effect.Photoshop is interesting because if one knows how to use it, he/she can conquer the web world with own creativity. I never used Photoshop before taking this class. My first Photoshop Gif took hours to complete because I was struggling to figure out the functions of each command. Though every week I try to do something new and struggle a lot, I believe this is a great learning opportunity.

This week I tried to create GIF using Glitch effect. I found a good Youtube video to help me out. This effect is really cool. Every week I struggle a lot to find good quality pictures. Making layers, using layer masks, grouping different frames, confuse me a lot. I am practicing and hopefully will understand with time. This is my GIF with glitch effect:

This is the like of the video that I have used:

I really want you guys to try this effect and if anyone know where and how I can find good quality pictures, please let me know.

Frame Animation in Photoshop

After using Photoshop in the classroom, I became interested. I wanted to make something interesting that relates to my major. So, I took some pictures of great mathematicians (Euclid, Pythagoras, Rene Descartes, Albert Einstein) and tried to do frame animation. I took help from different youtube videos; the links are given below.

When I completed the first frame animation successfully, I was happy and wanted to create something for fun. So, I took some pictures of Selina Gomez and created another frame animation.

I struggled a lot to find out pictures of the same size. I used google image tool but most of the pictures were not accurate size. I also struggled with picture quality. Picture quality changed a lot when I used them in Photoshop. Resizing pictures or frames were another point of my struggle.

These are the links of the videos that I have used to learn frame animation:

First Photoshop Picture

I heard about photoshop a lot. People always tell that photoshop is really complex and hard to use. For the first time, I have used photoshop in my communication technology class last week. Though it was complicated, I have found it interesting. With the help of my professor, I have made this GIF using photoshop.