Photoshop Question posted in
The official user guide can be found here.

duplicate social icon on easy way with reverse color – Photoshop

Im making a responsive website and the top i have navigation social icons and i want to hover each icons into another color. During editing in photoshop i dont know what technique to put a color an easy way. The problem is the icon is small so when it comes putting the color it takes time.I have 5 icons on my website there are : google , facebook, twitter , pinterest and rss .

see image

Tags:

4

Answers


  1. 0

    You need to change your icon using the css :hover selector.

    Try something like this:

    HTML

    <a class="icon" href="#"></a>

    CSS

    a{
  background-image: 'image.png'
  width: 32px;
}

a:hover {
 background-image: 'hover-image.png'
}
    Login or Signup to reply.
  2. 0 
    .pinterest-hover{
  background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/pinterest-hover.png');
}
.facebook-hover{
  background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/facebook-hover.png');
}
.twitter-hover {
  background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/twitter-hover.png');
}
.google-hover{
  background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/google-hover.png');
}

.social-slide {
	/*background-image: url('http://bradsknutson.com/wp-content/themes/flat-ui/images/google-hover.png');*/
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
    border-radius:50%;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-slide:hover {
	background-position: 0px -48px;
}
    <h2>Slide rollover animation</h2>
<div class="twitter-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>
<div class="google-hover social-slide"></div>
<div class="pinterest-hover social-slide"></div>
    Login or Signup to reply.
  3. 0

    Another way is to use only 1 special image and control colors with css:

    .facebook{
	width: 48px;
	height: 48px;
	border-radius: 24px;
	background: #787878 url('http://oi59.tinypic.com/ja9b39.jpg') no-repeat;
}
.facebook:hover{
	background-color:#DB4A39;
}
    <div class="facebook"></div>
    Login or Signup to reply.
  4. 0

    If u just want to change to back color of the icon only using the photo shop tools within a few seconds means u can just use the magic select tool to select the letter in white color and u can just use the image transform selection and change back color easily.

    The other method is using the layers, if you want to change the different colors for the image separate the white letter and the background as two layers and change different the colors for background and just drag and drop the letter on the background

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search