How to add GIF in your Readme Of Github - G'Ashish Blog

Post Top Ad

Post Top Ad

Responsive Ads Here

Wednesday, April 17, 2019

How to add GIF in your Readme Of Github


Building a Good Github is always helpful and it help you to show your work to the world. Adding GIF to the Github readme is always clear and shortcut way to show how your project work and how it look like. In this tutorial i am gonna show you how to make GIF and add this to your github Readme. If you are wonder What it will look like just check the link below:
https://github.com/silentashish/IntroPage-CSS/tree/master

Step 1 : Recording Your project's Screen

Very first step is to create a short video which open all the feature of your project. You can use any ScreenRecorder software we want like Camstudio, Camtasia, Fraps etc. If you are a windows user then there is by default screen recorder in your Operating system provided by Xbox which is basically developed for gamer to record their gaming screen. To use this you must have to enable Xbox in your setting.

Go to the setting of your window and click on Gaming


Enable ( Record game clips, screenshots and broadcast using game bar ) option


There you go , now you are ready to go.
You can now open Screen recorder in every app like you can record in chrome ,or in atom text editor.

Just press Win + G to open Game bar. This will look like this


Now  you can start recording or you can use shortcut WIN + ALT + R

Step 2 : Downloading and Installing Flimora 

Get Flimora from the link Given Below
https://filmora.wondershare.com/video-editor/ 


 Open Flimora in Full Feature Mode.

Clicking on "Import" import your video into the Flimora and drag it into the Video Section.


I recommend to increase video playback speed. You can do it by right clicking on video Edit and increase speed.

Then export your video into the GIF. You successfully created GIF now.




Step 3: Push your GIF into the github ripo and get link
Now it's the time to push your video into the github and copy the link of the GIF.



Step 4 : Update your readme now 
Now in you read me write as

![alt-text](link)
 
example below: ![grab-landing-page](https://github.com/silentashish/mypro/photo.gif)



No comments:

Post a Comment

Post Top Ad

Responsive Ads Here