Git Product home page Git Product logo

prizm-icon-guide's Introduction

New Prizm Icon Design Guide

Style:

So with the update, Casio did away with the colorful 3D style main object and replaced it with a white 2D object that has a drop shadow. Also, they now fit in a 82x38 rounded rectangle, so there's less space to work with.

To get started, download the template psd and open it up in Photoshop or GIMP.

The rounded rectangle can be whatever color you choose, but to get the closest resemblence to Casio's icons I created an overlay that adds a gradient. To create your own color, follow these steps in whichever program you use:

  1. Fill the Color layer with your desired color

For Photoshop:

  1. Go to "Filter > Noise > Add Noise..." and use these settings: 1%, Gaussian, Monochromatic

For GIMP:

  1. Go to "Filters > Noise > HSV Noise..." and use these settings: Dulling - 2, Hue - 3.00, Saturation - 0.040, Value - 0.040

The overlays and backgrounds should be self explanitory from there, you can just change the visibility.

When saving in Photoshop, the default BMP settings should work fine and in GIMP, export as BMP and change it to 24 bit under the advanced options when prompted.

The end results should be similar to this:

Unselected

Selected

And here's a proof of concept I made with Prizoop:

Prizoop

prizm-icon-guide's People

Contributors

stbeaumont98 avatar

Stargazers

 avatar  avatar  avatar Jason Youngberg avatar

Watchers

 avatar

prizm-icon-guide's Issues

Prizoop Example

Do you still have the example you made with prizoop saved, I would love to change the icon I have, and yours looks so much nicer.

Iโ€™m fine using a hex editor if I need it to change the icon.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.