Multi-state icons (1) -PS production

Foreword

      Polymorphic we often see a button whether in software or WEB, the button that is normal (Normal), into (Hover), press (Press), disability (Disabled) four-state, as follows

      If not in the process of developing software designer to help you make an icon, a bit of a hint of worry Sang (Like me), Ever since I own button design icon, and a good memory as bad written, wrote this series, hope to see this article helpful to you, the original intention of this series is the Web \ WPF \ Android \ IOS wrote all the words, which involves a custom WPF user control, at the time of it, for writing.

PS version

   

PS Production steps

       First, open the PS,

      Select "File \ New"


Click "OK"


Remember the first project to save it

Then select the "View \ New reference line", which is placed to the accuracy of the position of the layer


Here we built a four guides


And create a new rounded rectangle


Clicking anywhere on the canvas, provided rounded rectangle properties


Click "OK", then rounded rectangle appears on the canvas


Here rounded rectangle default fill color is white, it is changed to red, 


Double-click the white box


After setting the color and click "OK", then you can see the rounded rectangle turns red


Then select the "Move Tool", rounded rectangle will move to the first reference line

Since we are four state diagram of left to right: Normal, Hover, Press, Disabled

Copy the rounded rectangle layer 3, a good location is placed


Note Disabled filling gray RGB (96,96,96)

The following upward to add some custom shape tool (you can also directly add 1234)

Select the toolbar to the right of the Custom Shape Tool


At this time, the toolbar becomes


Select any shape inside, I chose one (you are free to choose on it, just to see the effect of polymorphism)


After selection, click on the canvas Normal area, set the properties as follows


Click "OK"


Created using the same method on Press and Disabled icon 25 * 25, 30 * 30 icon is created on Hover, created after the following


You may find the red triangle icon is not in the middle, can be appropriate to fine-tune the right look.

Next on the list we use to generate PNG image, first hide the background


Then select "File \ Save As (A) .."



Click "Save", the following dialog box may appear


By default, click OK, then we can see we saved background transparent four-state icon of


Finish

The next section, design custom ImageButtoon with WPF controls, will spend this four-state icon.

/*********************************************************************************************************

For reprint please indicate the source: http: //blog.csdn.net/mybelief321/article/details/49998311

*********************************************************************************************************/



Published 143 original articles · won praise 161 · Views 1.21 million +

Guess you like

Origin blog.csdn.net/mybelief321/article/details/49998311