search

V-Squared / V-Squared.github.io

Initiative for Modular and Upgradable Mini and All-In-One PC. Standards — Know How — Blueprints — Trailblazer Products
http://v-squared.github.io/
Other
2 stars 1 forks source link

Draw Illustration: "V² Big Picture" aka "V² Puzzle" #38

Open VillageHubertChen opened 8 years ago

VillageHubertChen commented 8 years ago

v2-puzzle

Hero for Interaction / Look & Feel

hero-puzzle

VillageHubertChen commented 8 years ago

Handover

@bcaswelch

I updated all pertinent information for you to make your illustration, including creating an upload folder. Once you are done, please make a comment to me and Lukas so we can design your artwork into the homepage.

VillageHubertChen commented 8 years ago

Change List v01

List of all changes going from v01 to v02

VillageHubertChen commented 8 years ago

How to Create Web Ready SVG

Crop SVG to border

  1. Go to File > Document Properties
  2. Expand Resize page to content (click the plus icon to reveal collapsed content)
    1. See the image "Expand Resize page to content" below at the yellow mark
  3. Click Resize page to drawing or selection
    1. See the image "Resize page to content" below at the yellow mark

Expand Resize page to content

Resize page to content

Resize page to content

Click Resize page to drawing or selection

Save As optimize SVG

  1. Go to File > Save As
  2. Select Optimize SVG in Save as type
    1. See image "Save as type"
  3. Click Save
  4. Select every checkbox except "Keep editor data"
    1. See image "SVG options"
  5. Click to Ids tab
  6. Select every checkbox
    1. See image "SVG id options"
  7. Click OK

Save as type

Save as type

SVG options

SVG options

SVG id options

SVG id options

VillageHubertChen commented 8 years ago

How to Add Tooltip to SVG

At this point this document with only for web developer, not yet ready for designer.

  1. Open SVG in your browser
  2. Open developer tools
  3. Select the path you want to edit
  4. Copy the value of the d attribute
  5. Open find in your editor
  6. Paste
  7. Add v2-tooltip attribute on the path you find using find
  8. Add your tooltip content inside the v2-tooltip attribute
VillageHubertChen commented 8 years ago

Overview Interactive Graphics

Step 1: Art Brief

The Art Brief describes the illustration and the tooltips.

Step 2: Create Web Ready SVG

You can read on how to do that → How to Create Web Ready SVG. The idea is that your illustration is described in SVG and it need to be done in such a way that the browser renders it truthfully. This is a bit tricky, as not all SVG elements are supported by the browser. So you need to find out with try and error which ones work. It is also important to deliver non convoluted SVG source code to not make the life of the poor schmuck hell who will add the tooltip manually into the SVG source code.

Step 3: Embed the SVG into HTML page

The programmer will generate an HTML page and include the SVG as inline SVG into the HTML source code. He will also load the scripts needed for the interactive tooltips. When done he tests in a browser that all works as expected.

Step 4: Insert the Tooltips

Last the programmer will add the tooltips within the SVG code and test its function in the browser. The text of the tooltips is found in the Art Brief to this project.

VillageHubertChen commented 8 years ago

Review Bobby's v01

@bcaswelch

Thank You

Thanks very much for your work and to deliver on time. Please see my review feedback.

Not Organic, but Copy Paste

I know we said you only need to draw three pieces and use copy paste. But after looking at the result it just felt wrong. After carefully examination of real puzzles I notices that each puzzle connector shape is different. As such, please draw accordingly. We want to deliver the message on a subconscious level that we deliver real things, that work in the real world.

Not Production Compatible

The shapes you draw are not production compatible. As such no one as ever played with a puzzle that has shapes like these. As such this puzzle looks like academically correct, but not functional in the real world. This is counter our message that our designs are made for and tested in the real world.

Mating Not accurate

Your parts do not mate accurately. Some angles are slightly off. Some parts have slight offsets. It is not much, but enough to say that we do not work accurately. This is also against the message we want to deliver.

Not Puzzle Connector Form

This one is simple. We want to appear like a real puzzle and your design simply does not look it.

Your SVG was not Browser Compatible

Your SVG will be used directly in the HTML page. Rendering will be done by the browser. When opening your SVG file the text was not showing. Apparently not all SVG elements are supported by the browser.

  1. Please read Lukas writing on Browser Compatible SVG.
  2. When you done save your SVG and open it in a browser. Check the rendering is identical to the SVG you have open in Inkscape (Two displays help). In any case compare side by side.

Have Fun

All the best for your next version. If you have any questions to my feedback, I am staying up until 9 am your time, so that all your questions are answered so your workday is productive. Please aim that your next version is good for production.

P.S. What happened to the second appointment?

We has an appointment after your match. What happened?

VillageHubertChen commented 8 years ago

Writing Tutorial

Stacking of one Puzzle piece (top to bottom)

<svg>
  <defs>
    <clipPath id="clippath-id-1">
      <path id="1" d="27 53.2 84 22"> (*2)
    </clipPath>
    <clipPath id="clippath-id-2">
      <path id="3" d="22 19.3 56"> (*2)
    </clipPath>
  </defs>
  <g>
    <image xlink:href="URI-1" clip-path="url(#clippath-id-1)">
    <path id="2" d="27 53.2 84 22"> (*1)
    <text>Title 1</text> (*3)
  </g>
  <g>
    <image xlink:href="URI-2" clip-path="url(#clippath-id-2)">
    <path id="4" d="22 19.3 56"> (*1)
    <text>Title 2</text> (*3)
  </g>
</svg>

(_1)(Stroke, coloring, tooltip shape) (_2)(Clip path that clips the image to the path outline. No stroke not fill color) (*3)(Title of element)

URI-1 Path to image. Currently is a path to local HDD, need to changed to relative path)

Picture with the following elements

<svg>
   Group Puzzle Piece 1
      Path → (Stroke, coloring, shape to trigger tooltip)
      Title → (Text used as title for this part in the info graphics)
      ClipPath → (Same path, copied and the used to clip the picture below)
      Picture → (JPG image. Clipped via ClipPath)
   Group Puzzle Piece 2
      Path → (Stroke, coloring, shape to trigger tooltip)
      Title → (Text used as title for this part in the info graphics)
      ClipPath → (Same path, copied and the used to clip the picture below)
      Picture → (JPG image. Clipped via ClipPath)
</svg>
VillageHubertChen commented 8 years ago

Writing Tutorial

Stacking of one Puzzle piece (top to bottom)

<svg>
  <defs>
    <clipPath id="clippath-id-1">
      <path id="1" d="27 53.2 84 22"> (*2)
    </clipPath>
    <clipPath id="clippath-id-2">
      <path id="3" d="22 19.3 56"> (*2)
    </clipPath>
  </defs>
  <g>
    <image xlink:href="URI-1" clip-path="url(#clippath-id-1)">
    <path id="2" d="27 53.2 84 22"> (*1)
    <text>Title 1</text> (*3)
  </g>
  <g>
    <image xlink:href="URI-2" clip-path="url(#clippath-id-2)">
    <path id="4" d="22 19.3 56"> (*1)
    <text>Title 2</text> (*3)
  </g>
</svg>

(_1)(Stroke, coloring, tooltip shape) (_2)(Clip path that clips the image to the path outline. No stroke not fill color) (*3)(Title of element)

URI-1 Path to image. Currently is a path to local HDD, need to changed to relative path)

Picture with the following elements

<svg>
   Group Puzzle Piece 1
      Path → (Stroke, coloring, shape to trigger tooltip)
      Title → (Text used as title for this part in the info graphics)
      ClipPath → (Same path, copied and the used to clip the picture below)
      Picture → (JPG image. Clipped via ClipPath)
   Group Puzzle Piece 2
      Path → (Stroke, coloring, shape to trigger tooltip)
      Title → (Text used as title for this part in the info graphics)
      ClipPath → (Same path, copied and the used to clip the picture below)
      Picture → (JPG image. Clipped via ClipPath)
</svg>