1 of 29

Modular Graphics Icons

Table of Contents

​

Meeting:

  • Kristian: Video and photoshop, permaculture, applying
  • Tanya -
  • Jonathan -
  • Marcin - work on pattern language from 2009
  • Tom
  • Jean-Baptiste, Chile - ex of icons for hydraulics
  • Catarina

Principles for Designing Modular Icons

  • Build upon existing icons - adopt them for our own
  • Scope - categories of icons
  • Easy to access icons - needs a library of icons
  • Make it open to every topic and icon type
  • Vector graphics - B&W can be colored
  • Modular icon comp
  • Standardize color scheme for different areas -
  • Community Building Effort
  • Shape of icon - square? Border?
  • Profile or top view - both?
  • Comprehensive set
  • Open Source - open to economic activity - including making money
  • Attribution required - determine the rules for attribution
  • Modular + remixable components of icons
  • Descriptors - like quantities, sizes, etc. like numbered periodic table
  1. Goals for 6 months
    1. Development Steps + Tools + Safety + Quality Control
    2. Icon Set 2 - Machine Modules
    3. Icon Set 3 - Permaculture Modules
  2. Identifying Basic Development Steps - the Biggest

2 of 29

Table of Contents

  1. Finished Icon Sources
  2. Schedule
  3. Design Assets
    1. Icon Design Guidelines
    2. Icon Creation Guide Step by Step
    3. Icon list spreadsheet
    4. Existing Icon Sets
      1. Add Aquaponics as some of the first sets
  4. Team Structure
  5. March 2 Meeting
  6. Educational Links
  7. Frequently Asked Questions when creating icons
  8. Explainer Video
  9. Autotracer - see link. Not preferred as auto tracing does not give accurate results.
  10. Bug Tracker
  11. Meetings

3 of 29

Explainer Video

  • Ubuntu Linux is official platform - so choose software available in Ubunutu (cross platform)
  • Use Kdenlive + Open Broadcaster (or something else that works on Ubuntu)
  • Test case:
    • Screencast captured by Jean-Baptiste
      • Video uploaded to YouTube - just the raw Screencast source
        • without basic Kdenlive edit
        • Note: filename used must be the same for anyone who downloads it so that Kdenlive recognizes that file
      • Put video into Kdenlive File-
        • Generate OSE Media Assets (jpg?)- Title screen, Credits/Outro Screen, Subtitle Name Bar
        • Make sure that all files are in a single folder - create a folder on Desktop where you put the Video source, and any media assets used in Kdenlive editing
          • When you upload, just take out the Video file from the folder - but name
      • Do initial cut in Kdelive - “OSE Pattern Langauge Icons Tutorial”
      • Upload Kdenlive file to OSE Wiki Graphics Team Page
        • Zip the Kdenlive file and upload
      • Marcin will download Kdenlive Source, screencast source - and add a clip of introduction
      • Publish to Youtube

4 of 29

Collaborative Editing Notes

  • Collaborative download works in Ubuntu
  • Collaborative Editing Kdenlive file worked with Kdenlive in Windows Virtual Box
  • Download Marcin video - and Jean Baptiste video (or if you have it already, put that into the folder using the same)
    • Make sure that if you don’t have the video file in the folder: click on Use placeholders for missing clips
    • You can change filepath to the actual file if you doubleclick

​

​

​

​

​

​

​

  • Download the zipped Kdenlive Project File and extract it
  • The folder will not have the video files there
  • Download the missing videos as above - and if they don’t have the
    • same name as the Kdenlive Project File, then change the
    • names so they are the same

5 of 29

Collaborative Video Editing Notes

  • Collaborative Editing Kdenlive file using Kdenlive in Windows 7 VirtualBox
    • You can change the file path to the broken linked file by double clicking on the file path.
    • Then click on the “Open file dialog” button to the right of the second popup window that appears.
  • Double click on the file path
  • Click on Open file dialog and find the missing file on your hard drive and click open

6 of 29

Bug Tracker

  • Installing an official bug tracker for the project on Wiki
  • Keep a bug tracker for each single project we work on
    • 50 GVCS tools
    • Icons
    • Aquaponic greenhouse
    • Etc.
  • Keep track of software, process, and other bugs
  • Specify the needs for OSE Bug Tracker as we go forward

7 of 29

Schedule

April Goals

  1. Start onboarding people for graphics working team. First 5 sample icons
  2. Begin onboarding Team
    • Tech Team Survey
    • FB
  3. First Session -
  4. Training Materials - team building
  5. Blog Post on Methodology & Goals
  6. Production Metrics
    • 1 Icon per Hour basic goal
    • Team of 12 gets us 12 icons

May Goals

  1. Continue developing numbers of people working on Team
  2. Develop a Saturday Sprint Schedule
  3. Devop 2 other leaders outside of Jean-Baptiste.

June

​

April Goals

  • ​

​

April Goals

  • ​

​

Sepember Goal

  • 1000 Icons Complete

​

8 of 29

Development Steps of Social Technology Process for Developing Technology

Use case: say we’re trying to get a person on a team, we want to give them an overview of the workflow and and process for developing a piece of tech. If we are building a team as part the development process, then we need to accommodate the team building steps within the development process. We already have Development Steps in Dev Board. This is a Table of Contents for overall development process.

Join a Team

Initial Meeting

Goal Setting: Timeline

Buy-In

Role Commitment

Development

Design Requirements

Module Breakdown

Concept Design

Technical Design

Industry Standards

Design Completion

Issue Tracking

What we Believe

Design Submissions

Velocity Measurement

Fabrication Diagram

Build Procedure

Bill of Materials

Legos

Calculations

Scale Prototypes

Design for a Team Build

Quality Control

Checklist in Build Procedure

Picture Upload for External Feedback

Role Allocation

Forking

Merging

Build Event

Build Schedule

research

Version Control

9 of 29

Joining the OSE Development Process

Join a Team

Initial Meeting

Goal Setting: Timeline

Buy-In

Role Commitment

Design

What we Believe

Build Procedure

Design for a Team Build

Quality Control

Role Allocation

Build Event

Use case: say we’re trying to get a person on a team, we want to give them an overview of the workflow and and process for developing a piece of tech. If we are building a team as part the development process, then we need to accommodate the team building steps within the development process. We already have Development Steps in Dev Board. This is a Table of Contents for overall development process.

Bill of Materials

10 of 29

Development Process Steps

Use case: say we’re trying to get a person on a team, we want to give them an overview of the workflow and and process for developing a piece of tech. If we are building a team as part the development process, then we need to accommodate the team building steps within the development process. We already have Development Steps in Dev Board. This is a Table of Contents for overall development process.

Development

Design Requirements

Module Breakdown

Concept Design

Technical Design

Industry Standards

Bill of Materials

Building Blocks

Calculations

Scale Prototypes

Merging

research

Version Control

Forking

CAD

CAM

Product Ecology

Interface Design

Layer 1: Orientation

Layer 2: Detailed Steps

Layer 1: Documentation Challenge - keeping it all organized

11 of 29

12 of 29

Notes

Framework

Process Flow (cycle)

Best practices- What are people familiar with?-

Methodology(ies)- Choosing a methodology.

Performance/Mastery

​

​

​

13 of 29

March 2 Meeting

  1. Steps to Develop Icons
    1. Workflow Google Example
    2. Tools
      1. Training
        1. Videos
        2. Online classes
    3. Timeframe
      • ​
    4. Platforms
  2. Teams
    • Lead roles & expectations
      • Reminders - Calendars
      • Weekly Deliverables
      • Team progress
      • New members
    • Member expectations
      • Responsive Communication
    • Volunteers
      • Documentation
      • Education

14 of 29

Education Links

​

  • On-Boarding Infographic Flowchart with Links - Crash Course on the Wiki
    • Start with Crash Course from 2012
  • Inkscape Video (YT) -Beginners Tutorial
  • Gimp Video (YT) - Gimp 101
  • Inkscape: Creating a basic icon (step by step article)

​

​

​

15 of 29

FAQ

Why prefer Inkscape VS Gimp?

-Inkscape (Illustrator), Gimp (Photoshop)

Fastest software to work with?

Info about basic tools in the software.

Which tools do I need to know how to use to create icons in inkscape?

What´s the best way to combine icons in Inkscape?

​

16 of 29

Types of Symbols Required

  • Machine Icons
  • Machine Modules
  • Agriculture Planning
    • Plants
    • Animals
  • Permaculture Design
    • Land forms
    • Land forming
    • Structures (trellis, etc.)
  • Open Source Hardware - Design - Machines, components, parts
    • Electronics
  • Materials and Chemical Compounds
  • Safety Icons
    • Notices
    • Safety equipment
  • Quality Control Icons
  • Plumbing
  • Tools
  • Functional Icons - moves
  • Skills
  • Resources
    • Fuel
    • Money
  • Organizational
  • Community Building

  • ​

17 of 29

Goals

  • Goals for 6 months
    • Define Icon Standards
    • Active search for services that provide NGOs with design services
    • Define Icon Sets
      1. Development Steps
        1. Workflow - universal organization items
        2. Tools
        3. Safety - such as eyewear in instructionals
        4. Quality Control - real key to distributed production
      2. Icon Set 2 - Machines + Modules
      3. Icon Set 3 - Permaculture Modules - plants + land features and earthworks, anything related to nature
    • Define how icons are designed - icon software work
      • Software download instructions
      • Basic software tools used in creating icons
      • Design process
        • Research
        • Sketching/doodles
        • Creating a vector illustration in Inkscape
    • Develop Teams
      • Recruit Teams
      • Onboard Team Members
        • Prepare an instructional for how somebody creates icons with OSE
    • Define and Prioritize Rollout of Icons for the Team
    • 1000 Icons in 6 Months - Decent Set
      • 12 People
      • 99 Designs - program for nonprofits to help
  • Identifying Basic Development Steps

18 of 29

Working Team Members

Team Leads

  • Marcin
  • Jean-Baptiste
  • Jonathan

​

​

Team Members

  • Tanya
  • Tom
  • Catarina
  • Kristian

​

​

Team Advisors

  • Tom
  • Catarina

19 of 29

Use Case

  • Website - use icons for identifying different sections of website
  • Wiki Team Pages - icons represent skills that people have
  • Instructionals - tools, safety, quality control, fabrication steps
  • Functional Icons - moves

20 of 29

Requirements

  • Applying principles for Designing Modular Icons
  • Types of Symbols

21 of 29

Team Goals

  • Everybody gets the big picture -
  • Formation of Graphics Team
    • Team leads
    • Members
    • SME/Advisors
    • Apprenticeship
      • Documentation
  • Objectives
  • Tasks
  • Deliverables
  • Dates for next meeting

​

22 of 29

Process to Get There: Action

  • Study existing icon set - list them
    • Proprietary
    • Open
  • Use icons that we like and adapt them to the form we want to use
  • Define standard for Format - svg - scalable vector graphic - PDF?

23 of 29

Objectives

  • Framework/platforms
  • Top icons
  • Distribute work
  • Time specific

​

24 of 29

Next Steps

  • Jean-Baptise + Tanya - define stylistics requirements
  • Tom + Kristian - study existing existing icon sets
    • Create a large list of different Sources of Existing Icons
    • Classify according to category from this
  • Catarina ?
  • Converting to Vector Equivalents -
  • Use Icon Editor?
  • Marcin - How to build a community - FB + invite others from here
  • Jonathan
  • Invitation - for next week.

25 of 29

Icon design guidelines

proprietary references

open source and/or free references

REVIEW THE GUIDELINES HERE

26 of 29

OSE Icon Creation step by step 1 - 6

1. Download and install inkscape

2. Choose the icon you would like to create from the list here

3. Find and Download the corresponding reference image for the icon

4. Download icon template file

5. Open icon template file in inkscape

6. Import reference image

    • Click on the layer labeled “reference image”
    • Go to file menu and select import
    • Select reference image downloaded in step 3
    • Choose “embed” option in pop up window

27 of 29

OSE Icon Creation step by step 7 - 8

7. Adjust reference image size

  1. Object menu -> transform
  2. Click on the Scale tab
  3. resize image till it matches the live area highlighted in blue approximately
  4. lock that layer

8. Begin tracing the icon

  1. using shapes to construct the icon
  2. using bezier curves to construct the icon

28 of 29

OSE Icon Creation step by step 9 - 11

9. Test the scalability of the icon

  • Zoom out to about 8-10%
  • If the icon is still recognizable at this small size continue to step ?+2
  • if the icon is not recognizable at this small size go to step ?+1

10. Begin tracing the icon

  • zoom back in and simplify the icon if possible
  • go back to step ?

11. Add link to the google spreadsheet

  1. Save your inkscape file
  2. Upload it to the cloud
  3. Get the shared link and post it to the spreadsheet in the corresponding cell
  4. change the status of the icon to completed

29 of 29

CONGRATULATIONS & THANK YOU!!

Thank you very much for helping us add to the OSE icon library. We hope you´ve enjoyed this experience, working on this project and invite to create more icons if you have the time or talk to ... about working on another project with OSE.