Join James Williamson for an in-depth discussion in this video Creating basic shapes, part of Designing Icons for the Web.
- Now that our sketches are in place…and can sort of act as a template for us,…it's time for us to start drawing the…actual icons themselves.…I'm going to start with the root icon…and we'll start by adding some basic shapes…with some slight modifications to them.…So, I've opened up the hruns-icon…from the 03_08 directory.…I've created a preview window over here on the…right-hand side…and I've got a zoomed in view that is…centered on the roots icon art board…and you'll notice that in the main window,…I've also got the grid turned on…so that we can use it to draw our shapes.…
Now, I realize that this may be a little frustrating…to you guys because every time you open up a file,…you're going to have to rearrange the windows…and create the new preview paint.…Typically, when you're working on your own projects,…of course, you're going to be working on them…all the way through, so it's not like you're going to be…reopening files every single time.…For this chapter, however, we are going to have to…do that each time, so I sort of skipped ahead…
Author
Released
8/27/2015- Developing a brief
- Sketching your ideas
- Establishing grids
- Creating shapes, paths, and strokes
- Using transparency
- Exporting icons as PNGs, GIFs, and SVGs
Skill Level Intermediate
Duration
Views
Related Courses
-
Design the Web: Sprite Sheets
with Chris Converse20m 45s Beginner -
Choosing and Using Web Fonts
with Laura Franz6h 52m Appropriate for all
-
Introduction
-
Welcome49s
-
-
1. Planning for Successful Icons
-
The power of icons5m 7s
-
Creating effective icons5m 56s
-
Designing for the screen6m 4s
-
-
2. Conceptualizing Icons
-
Developing a brief5m 24s
-
Defining the metaphor4m 21s
-
Sketching ideas2m 41s
-
Taking sketches digital8m 27s
-
-
3. Drawing Icons
-
Setting up your workspace8m 44s
-
Establishing grids2m 59s
-
Creating artboards3m 12s
-
Organizing with layers6m 8s
-
Managing color8m 50s
-
Creating a preview window5m 21s
-
Adding sketches8m 56s
-
Creating basic shapes6m 54s
-
Adding paths8m 37s
-
Merging shapes8m 23s
-
Modifying strokes4m 48s
-
Using transparency5m 10s
-
Equalizing icon weight6m 47s
-
Designing for smaller sizes5m 28s
-
Simplifying icons11m 7s
-
-
4. Exporting Icons
-
Exporting icons5m 1s
-
Generating PNGs and GIFs9m 4s
-
Generating SVGs6m 48s
-
Optimizing SVGs4m 25s
-
-
Conclusion
-
Additional resources4m 15s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Creating basic shapes