There are two ways of recoloring raster icons:
Apr 16, 2016 Editing may not be possible without Illustrator. Right-clicking to see 'Open with.' On of my.ai file shows two other installed programs will open the files. I have PhotoShop Elements 12 as one option. I just tried importing an.ai into PSE and it converts it to a pdf on the fly before presenting on-screen, so editing is probably nit possible.
- A complicated way: 9 steps in Photoshop. This article describes it in detail.
- A simple way: one click in Icons8 Web App. Check out the Icons8 Must Try Features to learn more.
So, you downloaded a freeicon pack for Windows 8 or iOS9, fine. Let’s make them shine in new splendor.
Getting Adobe Photoshop
You’ll need Photoshop (why to bother with Photoshop? See bottom of the message). If you don’t have one, a normal license is $20 a month, but you could also:
- Download a fully functional 30-day trial. When expired, you could either register it or install it on some other computer.
- BuyPhotoshop Elements for $80. It has all the required functionality and much more.
Opening the file
That’s right, dear readers. There are software developers among you, some PhDs and MBAs, but still I’m going to teach you how to open a file 🙂
So, choose an icon and either drag’n’drop it on Photoshop icon or use Cmd+O (Ctrl+O on Windows) for Open dialog. Hint: don’t bother about a thing that Adobe is pushing to you called Adobe Bridge. Choose the desired size, for example 128×128 px:
Coloring the icon
1. Make sure the color mode is RGB
If it’s grayscale, the icon would be in the shades of gray no matter what color you choose. In Menu, click Image->Mode-> Color RGB.
2. Make sure you have the Layers palette on screen
It looks like this:
Usually, it’s in the bottom right part of the screen. If it’s not, use Window->Layers to open it.
3. Click Fx icon for effects
4. From Effects menu, choose Color overlay
The dialog like this will open:
5. Click the color box
6. In the color dialog, choose the desired color
7. Press OK in all dialog boxes
Enjoy the result. If satisfied, save PNG file with File->Save for Web. You’ll see the dialog like this:
8. Make sure file preset is PNG-24
9. Click Save
Done. Now you could recolor any icon. Great!
Why Photoshop?
You may ask yourself why to bother doing it in Photoshop if there are easier tools. There is a number of reasons, here are just two:
- You’ll never have any comparability issues. Same way as we did, you could open PSD, SVG, AI, EPS, whatever, and it would be working fine. For comparison, look at what I’ve got in one of the “simple” tools. As you can see, the result is unpredictable depending on the source format, from a perfect bug to the somewhat mutilated body of it:
- Another reason is you are learning a powerful tool. If you ever want to color it with a gradient, or with a pattern, or destroy in some way, you could do it with an extra movement or two. Isn’t it great?
Sooner or later recolored icon is a sold icon. But what if people try to steal from you? Check out What to Do If Someone Steals From You 7 Times a Day
Get to know about one of the most spectacular Icons8 fails in How We Lost 47% of Our Users After a Redesign.
Also, learn how to make a consistent icon set, how to make a pixel-perfect icon, how to make a seamless background and how to make a watermark in Photoshop
Try free tools for creators by the Icons8 team
Also, get the lists of free vector software and free photo editing software.
With over 2,400 configurable symbols, SF Symbols is designed to integrate seamlessly with San Francisco, the system font for Apple platforms. Each symbol comes in a wide range of weights and scales that automatically align with text labels, and supports Dynamic Type and the Bold Text accessibility feature. You can also export symbols and edit them in vector graphics editing tools to create custom symbols with shared design characteristics and accessibility features.
Download SF Symbols 2 betaJune 24, 2020
macOS 10.15.3 or later (139.4 MB)
Apple Design Resources for iOS include Sketch, Photoshop, and Adobe XD templates, along with comprehensive UI resources that depict the full range of controls, views, and glyphs available to developers using the iOS SDK. These resources help you design apps that match the iOS design language. Icon and glyph production files are preconfigured to automate asset production using Sketch slices or Adobe Generator for Photoshop CC. Color swatches, dynamic type tables, and fonts are also included.
iOS 14 (Beta) Sketch LibraryJune 22, 2020
iOS 14 (96.1 MB)
June 22, 2020
iOS 14 (90 MB)
June 24, 2020
iOS 14 (1.0 GB)
February 14, 2020 (v33)
iOS 13 (Requires Sketch 58 or greater)
February 14, 2020
iOS 13 (58.6 MB)
February 14, 2020
iOS 13 (505.8 MB)
February 14, 2020
iOS 13 (81.5 MB)
May 25, 2020
iOS 13 (9.7 MB)
To download iOS device frames for use when marketing your app, see App Store Marketing Guidelines.
Apple Design Resources for macOS include Sketch and Photoshop templates for Touch Bar glyphs.
macOS 11 (Beta) Download for Sketch*June 22, 2020
macOS 10.15 (9.3 MB)
*Only icon production templates updated for macOS 11
June 22, 2020
macOS 10.15 (13.3 MB)
*Only icon production templates updated for macOS 11
June 3, 2019
macOS 10.15 (Requires Sketch 51 or greater)
June 3, 2019
macOS 10.15 (2.3 MB)
Browse Files On Cd
macOS 10.15 Download for PhotoshopJune 3, 2019
macOS 10.15 (3.9 MB)
June 3, 2019
macOS 10.15 (3.2 MB)
Apple Design Resources for watchOS include Sketch and Photoshop dynamic type guides, layout specifications, app templates, Apple Watch bezels, and other UI materials. An installer for SF Compact, the system typeface for watchOS, is also included.
Add watchOS Sketch LibraryFebruary 19, 2019
watchOS 5 10.14 (Requires Sketch 51 or greater)
February 19, 2019
watchOS 5 (3.9 MB)
February 19, 2019
watchOS 5 (39.7 MB)
May 9, 2019
watchOS 5 (3.4 MB)
To download watchOS device frames for use when marketing your app, see App Store Marketing Guidelines.
Apple Design Resources for tvOS include icon and image templates, as well as tools for previewing layered image files and the parallax effect.
Download for PhotoshopOctober 25, 2018 (310 KB)
To download tvOS product imagery for use when marketing your app, see App Store Marketing Guidelines.
Use Parallax Previewer to preview layered Photoshop files, assemble individual image layers from PNG files and preview the parallax effect, or preview layered images exported by the Parallax Exporter plug-in.
Download for macOSParallax Previewer requires macOS 10.10.5 or later.
Use the Parallax Exporter plug-in to preview a layered image while working in Adobe Photoshop.
Download for macOSRequires Adobe Photoshop CC 2015.5 or later and macOS 10.9.0 or later.
Download for WindowsHow Do I Browse Files
Requires Adobe Photoshop CC 2015.5 or later and Microsoft Windows 7 with Service Pack 1 or later.
Use the Add Apple Watch Face button to enable installing Apple Watch Faces from your iOS app, watchOS app or website.
Use the AirPlay glyph when referring to AirPlay in setup or instructional text within your app.
Use the AR glyph and AR badges to indicate and launch AR experiences in your app’s UI.
The Apple Design Resources for CarPlay apps include Sketch and Photoshop type tables, as well as fonts.
Download for PhotoshopMay 25, 2020 (211 KB)
Use the Game Center icon for integrating with Game Center from your game. Use the glyphs for offering players direct access to the leaderboard, their accomplishment and profile.
Use the Apple Health icon in your app that supports HealthKit.
Use the HomeKit glyph when referring to HomeKit in setup or instructional text within your app.
Use the provided Apple logos to design Sign in with Apple buttons that use left-aligned logos or that display a logo only.
Marketing Imagery
A variety of imagery is available for use when marketing your app. Follow all usage guidelines.
iOS, macOS, tvOS, watchOS
Apple Product ImagesIncludes device frames.
Apple News
Apple Pay
Music, iTunes, and Podcasts
Wallet
Browse App Store On Pc
Other
Mac App To Browse Photoshop Pattern Files Pdf
Licensing and Trademark ImageryIncludes device and technology icons.