Photoshop Tutorial: Creating a Tricolor flag in Motion.

On the occasion of 68th Republic day.
In this tutorial, I am trying to create the Tri-colour flag in motion using Photoshop. But not only this effect is used for flag can be used for anything.

the final output will be the
tricolorflag

Step 1 : First thing first choose your images a. Tri-colour flag image b. fabric image, you can use mine also…

Step 2: Put both the images in Photoshop.

tricolor flag and fabric image in photoshop

Select the fabric image and apply Gaussian Blur (Filter > Blur > Gaussian Blur) and experiment with the radius to hide the detail of the fabric, keeping only the folds

Step 3: Save

Save the work as tricoloflag.psd

Make sure you save it as .psd file so further steps will work properly

save as psd file

Step 4: Apply the effect on flag.

Select the flag image.

Apply the displacement map filter to your flag with your fabric photo  (Filter > Distort > Displace)

And select your tricolorflag.psd then selecting flag layer apply Hard light filer to the flag layer

g

The final output should be the same as below image.tricolorflag

Inspiration from http://www.instructables.com/id/Creating-A-Realistic-3D-Flag-In-PhotoShop/?ALLSTEPS

95% resolution are broken before 15 jan.

Our resolution should be I want to do this and not I will stop doing this…..,

13866ee35680a34d53d0670abef253b7

 Our life long goal should be to improve our self. Don’t change yourself becoz changes are automatic so do progress.

List down areas you want to improve.

Continuous Progression on your resolution if you fail restart it

If you have big desire and want to make it your Resolution start with simple things.

capture

Learning

  1. observation (thoughts, working style)
  2. Understanding (apply to situation)
  3. Practice and Implement in your life.

Get experience (good and bad ) and that’s learning.

Do what you like…

2c575f50d2c8043f42f5bc97a8bd52ed

If you dont like to run early in the morning dont do that find the thing that you do like and implement in your life.

so it wont happen like this

ce0573a4-044f-433f-a05d-d67d0117785d

Now lets come to my resolution this year one of  my resolution is starting a blog. So I started with this simple blog you too define your resolution and start with simple things.

If you get habit of doing small things one day you will amaze the word. cheeeers !!!!

Thanks for reading this is just simple blog from my side.

Year

CSS Pseudo-Classes And Pseudo-Elements

Without getting overcomplicated and technical definition, Pseudo-classes is a specific characteristic of an element that can be target with CSS. A few common and known Pseudo classes are :link, :visited, :hover, :active, :first-child, :last-child. There are many more we are going to each of them in this article.
Pseudo-classes are always preceded by a colon (:) and then comes a name of pseudo-class and sometimes a value in parenthesis :nth-child(n) anyways?

Pseudo-elemnts are like virtual elements that can be treated as an html elements. The thing is that they doesn’t exist in DOM. This means we actually don’t type pseudo-elements, but rather create them with the css.
A few of pseudo-elements are :after, :before and :first-letter, we will talk about them at the end of article.

Single or Double Colon for pseudo-elements ?

The short answer is , in most cases, either.
The double colon (::) was introduced in CSS3 to differentiate pseudo-elements and pseudo-classes such pseudo-elements ::before and ::after from pseudo-classes :hover and :active. All browser support double colon (::) except IE8 and below.

When not to use CSS generated content.
Generating content via css is achieved by combining the CONTENT CSS property with :before and :after pseudo-elements. This “content” may be a plain text or contain that we manipulate with CSS to display.
Use CSS generated content for decoration and non-vital information, but make sure its properties handled by screen-readers, so that people with assistive technologies are not distracted.

Experimental pseudo-Classes and pseudo-elements.

An experimental pseudo-classes and pseudo-elements means its specification is not stable or finalized. The syntax and behaviour could change on the road. However, we might able to use experimental pseudo-classes and pseudo-elements now by applying vendor prefixes.
So below are the pseudo-elements and pseudo-classes we are going to look in this article. The psuedo-classes and psuedo–elements are categorised for sake of understanding.
1

 

Continue reading “CSS Pseudo-Classes And Pseudo-Elements”

This Chrome extension lets you watch videos while searching YouTube, just like on mobile

One of my favorite features of YouTube’s mobile apps is the ability to minimize a video to a thumbnail and continue watching it while searching for another clip.

YouTube-PiP

The YouTube Picture in Picture Chrome extension brings this same functionality to the desktop and it works like a charm.

Continue reading “This Chrome extension lets you watch videos while searching YouTube, just like on mobile”