![]() Select the copy, drag it down and place it roughly as shown in the second image. Make sure that your cloud icons is selected and duplicate it (**Command + C > Command + V**). You should end up with a simple, blue shape like the one shown in the second image. Using the **Move Tool (V)**, select all the shapes made so far, focus on the **Path Tools** pane from the **Properties** panel and click that **Union** button. Create a **60 x 20 px** rectangle and place it as shown in the third image. Switch to the **Rectangle Tool (M)** and set the **Fill** color to black (**R=0 G=0 B=0**). ![]() Replace that yellow from the **Fill** color with **R=44 G=164 B=15**, create a **30 px** circle and place it as shown in the second image. Replace the existing **Fill** color with **R=225 G=200 B=0**, make sure that the **Ellipse Tool (O)** is still active, create a **60 px** circle and place it as shown in the first image. Pick the **Ellipse Tool (O)**, move to your canvas and create a **40 px** circle - the grid and the **Snap to Grid** feature will ease your work. Drag the **Alpha** slider to **0%** and this will make your **Stroke** invisible. Click the **Fill** color well and set it to **R=74 G=196 B=237** and then click the **Stroke** color well. Keep in mind that you can quickly enable or disable the grid and the **Snap to Grid** feature using the **Command + '** and **Command + Shift + '** keyboard shortcuts.įocus on the Toolbar and notice that by default the fill color is set to white while the stroke color is set to black. Change the grid **X Spacing** and **Y Spacing** to **5**, set the **Subdivisions** to **0** and enable **Snap to Grid (Command + Shift + ')**. If the **Properties** panel is not currently visible, you can easily open it using the ruler icon that lies above the **Layers** panel. Switch to the **Grid** pane in the **Properties** panel. Select the **Grid** document style, set the document units to **pixels**, and set the document dimensions to **600** pixels wide by **740** pixels high. Go to **File > New (Command + N)** to bring up the **New Document** window. Weather Icons licensed under SIL OFL 1.In the following tutorial you will learn how to create a set of flat weather icons in Graphic for Mac.įor starters you will learn how to setup a simple grid and how to create a cloud shape using basic tools and vector shapes building techniques.Taking full advantage of the Snap to Grid feature and using some simple stroke techniques, you will learn to create most of the icons.įinally, you will learn how to create a flat background, how to center it and how to add a subtle shadow to your icons.Icon art for v1.1 forward, HTML, Less, and CSS are by me (Erik). The icon designs are originally by Lukas Bischoff. If you feel so inclined to add icon ideas, icon art, or other fixes/changes to how the package works, feel free to help! Credit They work the same as degrees, for example would be an arrow pointing to the South by Southeast (roughly 158 degrees). Included in the set as well are aliases to point to cardinal directions. For example, a "from 90 degrees" icon would point to the 270 degree mark, wheras a "towards 270 degrees" would point at the same 270 degree mark. Note: A "from" class has the point of the arrow at the opposite end of the degree. You can use any degree from 0 to 359 in this manner. To display a wind indicator, you must use the base class wi and wi-wind, and then include the towards/from direction you want, like from-293-deg. To use the wind indicators, you must also use along with the default CSS file. Check the API List to see the class names. Presently there are mappings for Forecast.io, Open Weather Map, World Meteorological Organization, Weather Underground, and Yahoo. This set includes companion CSS files for popular weather service API. You can flip, rotate, or add a fixed width. To add a modifier, include the class you want after the icon name, which looks like. The icons are displayed by using an i element and adding the base class wi and then the icon class you want, such as day-sunny. Place the 5 font files and the main file in your project, with the assumption that the fonts are located up. Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into Bootstrap, or any project that needs high quality weather, maritime, and meteorological based icons! Weather Icons 222 Weather Themed Icons and CSS
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |