Newer
Older
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="GitLab Pages">
<meta name="description" content="Fab Academy documentation site for Charlotte Fab-C">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../assets/css/main.css" />
<title>Charlotte Fab-C - Fab Academy</title>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<header id="header">
<a href="../index.html" class="logo"><strong>Charlotte - FabLab de Charleroi</strong> Fab Academy website</a>
<ul class="icons">
Charlotte Vandenbulcke
committed
<li><a href="https://www.facebook.com/littlebelge" class="icon brands fa-facebook-f" target="_blank"><span class="label">Facebook</span></a></li>
<li><a href="https://www.instagram.com/little.belge/" class="icon brands fa-instagram" target="_blank"><span class="label">Instagram</span></a></li>
<li><a href="https://gitlab.fabcloud.org/charlotte-vandenbulcke" class="icon brands fa-gitlab" target="_blank"><span class="label">Gitlab</span></a></li>
</ul>
</header>
<!-- Section -->
<section id="banner">
<div class="content">
<header class="main">
<h2>2. Computer Aided Design</h2>
</header>
<section>
<p>This week I tried several 2D and 3D designing programs to find the ones that suit me best.</p>
</section>
<section>
<h3>My journey</h3>
Charlotte Vandenbulcke
committed
<p>At first I had to catch up on the first week so I worked on the website (design and content). After finishing the biggest part of it I tried several the Onshape, Freecad and Inkscape programs for 2D and 3D designing (I'm already familiar with Illustrator and Autocad).</p>
</section>
<section>
<h3>Creating my Fab Academy website</h3>
<p>To save myself some time, I chose to download a free template for the design. I chose "Editorial" from <a href="https://html5up.net/" target="_blank">html5up.net</a> (thanks to <a href="https://fabacademy.org/2023/labs/aalto/students/saskia-helinska/" target="_blank">Saskia Katarzyna Helinska</a> for the link in her own website ! ;) )</p>
<span class="image object">
<a href="https://html5up.net/" target="_blank"><img src="../images/editorial-template.jpg" alt="Html5Up page showing the free template named Editorial." /></a>
</span>
<p>Working on this website gave me the opportunity to put my hands back into HTML and CSS. I realize now how much I've missed it.</p>
<p>I also took pleasure in choosing all the pictures based on cats ! You're welcome for that ! ;)</p>
<span class="image object">
<a href="https://www.canva.com/" target="_blank"><img src="../images/canva-cat-images-selection.jpg" alt="Printscreen of my Canva account open on my Fab Academy cat images searching work." /></a>
</span>
<p>As I have a <a href="https://www.canva.com/" target="_blank">Canva</a> Premium account, I searched the pictures in it and also tested their AI picture generator. Not as good as the well-known <a href="https://chat.openai.com/auth/login" target="_blank">ChatGPT</a> and <a href="https://openai.com/dall-e-2" target="_blank">Dall-E</a> but not too bad (see the pictures of assignments "Computer Controlled Cutting" and "3D Scanning And Printing" on the <a href="../assignments.html" target="_blank">Assignments</a> page).</p>
<blockquote><strong>Good to know :</strong> Canva's compression algorithms optimize the size of the images without loss in quality ! It also let's you select the quality of the .jpg export before download.</blockquote>
<span class="image object">
<a href="https://www.canva.com/" target="_blank"><img src="../images/canva-jpg.jpg" alt="Printscreen of the Canva's Jpg export options" /></a>
</span>
<p>To choose the colors and get the right hex code, I use the <a href="https://coolors.co/" target="_blank">Coolors</a>palette generator. It helps you find inspiration, match the right colors and gives you all the color references (hex, rgb, cymk,...).</p>
<span class="image object">
<a href="https://coolors.co/" target="_blank"><img src="../images/coolors-for-website-colors.jpg" alt="Coolors website that helps you find the right colors for your designs." /></a>
</span>
<p>I'm having trouble changing the icons on the <a href="../index.html" target="_blank">homepage</a> and align everything correctly.</p>
Charlotte Vandenbulcke
committed
<span class="image object">
<a href="../index.html" target="_blank"><img src="../images/icons-missing.jpg" alt="My homepage with the missing or doubled icons from Font Awesome" /></a>
</span>
Charlotte Vandenbulcke
committed
<p>The template uses "<a href="https://fontawesome.com/search?m=free&o=r" target="_blank">Font awesome</a>" in it's free version but the icons references don't seem to work. I will check on that later and maybe add my own made ones.</p>
Charlotte Vandenbulcke
committed
<span class="image object">
<a href="https://fontawesome.com/search?m=free&o=r" target="_blank"><img src="../images/font-awesome-free-icons.jpg" alt="Page of the free Font Awesome icons" /></a>
</span>
</section>
<section>
Charlotte Vandenbulcke
committed
<h3>Image compression</h3>
<p>Whenever I'm taking printscreen, I compress the images saved with <a href="https://www.xnview.com/en/" target="_blank">XnConvert</a>, which it's a free software that helps you convert and compress your images files in whatever size or format you need without quality loss.</p>
<span class="image object">
<a href="https://www.xnview.com/en/" target="_blank"><img src="../images/xnconvert-website.jpg" alt="XnConvert's website to download the program." /></a>
</span>
<p>The other interesting thing is that it can convert several images at once (big time saving!).</p>
<span class="image object">
<a href="https://www.xnview.com/en/" target="_blank"><img src="../images/bulk-images-conversion.jpg" alt="Printscreen of several images imported in the program to be converted at the same time." /></a>
</span>
</section>
<section>
<h3>Discovering Onshape</h3>
Charlotte Vandenbulcke
committed
<p>I already did a training course on Autocad several years ago so I tried other softwares, starting with "Onshape".</p>
<span class="image object">
<a href="https://www.onshape.com/en/" target="_blank"><img src="../images/Onshape-website.jpg" alt="Onshape website's homepage." /></a>
</span>
<p>I first tried to understand it by myself but I quickly found out that it isn't the good way.</p>
<span class="image object">
<img src="../images/own-onshape-attempt.jpg" alt="Printscreen of my attempt on Onshape without tutorials." />
</span>
<span class="image object">
<img src="../images/2nd-own-onshape-attempt.jpg" alt="Printscreen of my attempt on Onshape without tutorials." />
</span>
<p>So back again with my best friend for tutorials, <strong>Youtube</strong>.</p>
Charlotte Vandenbulcke
committed
<p>As it is also easier for me to learn fast in my own language, I obviously searched for videos <strong><u>in french</u></strong> and found these made by <a href="https://www.youtube.com/@polyfab" target="_blank">PolyFab Normand Brais Formations</a>.</p>
Charlotte Vandenbulcke
committed
<span class="image object">
<a href="https://www.youtube.com/@polyfab" target="_blank"><img src="../images/Polyfab-onshape-youtube-tutorials.jpg" alt="Printscreen of Polyfab's onshape introduction tutorials." /></a>
</span>
<span class="image object">
<a href="https://www.youtube.com/playlist?list=PLHDGrHUQCLD2G2CldAlNegH_X4bEBwrjX" target="_blank"><img src="../images/Polyfab-onshape-exercice.jpg" alt="Printscreen of Polyfab's onshape pipe cover exercice." /></a>
</span>
<p>I followed their simple exercice of making a pipe cover and learned :</p>
<ul>
<li>How to use the planes and create sketches</li>
<span class="image object">
<a href="https://youtu.be/xs2zOy_5dyE?si=WpEWg3Hw7S6ycxO8" target="_blank"><img src="../images/onshape-sketch-units.jpg" alt="Printscreen of a cercle sketch on the front plane on Onshape." /></a>
</span>
<li>Extrude my cercle, create holes in it and move them in another place</li>
<span class="image object">
<a href="https://youtu.be/_11-ggfBtQY?si=aSCKK9zOuTLeW21K" target="_blank"><img src="../images/object-extrude-plus-holes-onshape.jpg" alt="Printscreen of the 3D object with holes created on Onshape." /></a>
</span>
<li>Export the file and create the drawing sheet of the object with the size informations</li>
<span class="image object">
<a href="https://youtu.be/kGENY1WsvAw?si=WFaRd7f3DfdTnchb" target="_blank"><img src="../images/onshape-object-drawing-sheet.jpg" alt="Printscreen of the 3D object drawing sheet with size informations created on Onshape." /></a>
</span>
</ul>
Charlotte Vandenbulcke
committed
</section>
Charlotte Vandenbulcke
committed
<section>
<h3>Discovering Freecad</h3>
<p>After working on Onshape, I tried another 3D design program : <strong>Freecad</strong>.</p>
Charlotte Vandenbulcke
committed
<p>I found tutorials (<strong><u>in french</u></strong> again) made by <a href="https://www.youtube.com/@CADPrinter" target="_blank">CAD Printer</a> to understand the interface and the tools.</p>
Charlotte Vandenbulcke
committed
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<span class="image object">
<a href="https://www.youtube.com/playlist?list=PL1P4z1vfrsq8KZ2mHqRBZg8aoftq_w6vY" target="_blank"><img src="../images/freecad-french-tutorials.jpg" alt="Printscreen of the Freecad french tutorials' playlist on Youtube." /></a>
</span>
<p>I started by opening a new document and I chose the workshop that will show the tools to create a new sketch.</p>
<span class="image object">
<img src="../images/freecad-new-document.jpg" alt="Printscreen of the Freecad new document window." />
</span>
<span class="image object">
<img src="../images/freecad-choose-workshop.jpg" alt="Printscreen of the Freecad workshop option." />
</span>
<p>After selecting the plane to work on, I chose the form I want to work as base. In this exercice I took the circle.</p>
<span class="image object">
<img src="../images/freecad-choose-plane.jpg" alt="Printscreen of the Freecad planes." />
</span>
<span class="image object">
<img src="../images/freecad-choose-plane2.jpg" alt="Printscreen of the Freecad plane selected." />
</span>
<span class="image object">
<img src="../images/freecad-choose-sketch-tool.jpg" alt="Printscreen of the Freecad sketch tools options." />
</span>
<p>To draw the circle, you click once to place the center and by moving your mouse, you determine the diameter, that will be save by clicking another time.</p>
<span class="image object">
<img src="../images/freecad-sketch-circle.jpg" alt="Printscreen of a circle drawn in Freecad." />
</span>
<p>When I was finished, I clicked on "close" and chose the "extrude" tool.</p>
<span class="image object">
<img src="../images/freecad-extrude-circle.jpg" alt="Printscreen of an extruded circle drawn in Freecad." />
</span>
<p>I changed the length and saved the form by clicking on "ok".</p>
<span class="image object">
<img src="../images/freecad-change-length.jpg" alt="Printscreen of an extruded circle's informations in Freecad." />
</span>
</section>
Charlotte Vandenbulcke
committed
<section>
<h3>Discovering Inkscape</h3>
Charlotte Vandenbulcke
committed
<p>I regularly use Adobe Illustrator. To try another program, I thought about Inkscape because I will have to use it with my own embroidery and sewing machine.</p>
<span class="image object">
<a href="https://inkscape.org/" target="_blank"><img src="../images/inkscape-website.jpg" alt="Printscreen of Inkscape website's homepage." /></a>
</span>
Charlotte Vandenbulcke
committed
<p>I've already tried 1 or 2 times to use it but hated it as it isn't as user-friendly as Illustrator. But the Fab Academy is a good excuse to give it another try so, thanks to Youtube (forever and ever), I've saved a tutorials playlist, <strong>still <u>in french</u></strong>, made by "<a href="https://www.youtube.com/playlist?list=PLMCmz4rTAYpaOAVrJA6bbTHPxeKJyAwKP" target="_blank">Savoir pour tous</a>" to learn it step-by-step.</p>
Charlotte Vandenbulcke
committed
<span class="image object">
<a href="https://www.youtube.com/playlist?list=PLMCmz4rTAYpaOAVrJA6bbTHPxeKJyAwKP" target="_blank"><img src="../images/Savoir-pour-tous-inkscape-tutorials.jpg" alt="Printscreen of the Inkscape tutorials playlist made by Savoir Pour Tous on Youtube." /></a>
</span>
Charlotte Vandenbulcke
committed
Charlotte Vandenbulcke
committed
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<p>I've opened a new document and drew an hexagone with the tool in the left sidebar. You can determine the number of sides you want in your object in the top bar (after selecting the polygon tool).</p>
<span class="image object">
<img src="../images/New-doc-inkscape.jpg" alt="Printscreen of Inkscape's new document screen." />
</span>
<span><img src="../images/creating-hexagone.jpg" alt="Printscreen of Inkscape's polygon tool." />
</span>
<p>After quickly drawing the object, I clicked on the selection tool and entered the correct size in the top bar.</p>
<span class="image object">
<img src="../images/hexagone-done.jpg" alt="Printscreen of an hexagon drawn in Inkscape." /></span>
<span><img src="../images/changing-size.jpg" alt="Printscreen of Inkscape's size changing tool in the top bar." />
</span>
<p>I then drew a first rectangle that I aligned with the bottom side of my polygon. To align the drawings, I had to go in the top menu bar, click on "object" and then select "align and distribute". The "align and distribute" tools appeared on the right.</p>
<span class="image object">
<img src="../images/creating-rectangles.jpg" alt="Printscreen of a rectangle drawn in Inkscape." />
</span>
<span class="image object">
<img src="../images/align-menu.jpg" alt="Printscreen of a rectangle drawn in Inkscape." />
</span>
<span class="image object">
<img src="../images/align-objects.jpg" alt="Printscreen of a rectangle drawn in Inkscape." />
</span>
<p>Another way to align the objects (but less easy) is to use the magnetism tool. You just have to enable it in the top right of the screen and then move your pieces until they "stick" together magnetically ("X" signs will appear at each magnetic point of the objects once you get close to them).</p>
<span class="image object">
<img src="../images/magnetism-tool.jpg" alt="Printscreen of Inkscape's magnetism tool." />
</span>
<p>After aligning the 2 objects, I duplicated the rectangle by a simple "Ctrl+C/Ctrl+V" and aligned the new rectangle with the opposite side of the polygon.</p>
<span class="image object">
<img src="../images/align-opposite-side.jpg" alt="Printscreen of the second rectangle positioned in the middle of the top side of the polygon in Inkscape." />
</span>
<p>Duplicating again the rectangle, this time I had to rotate the pieces at the same angles as the other sides of the polygon.</p>
<p>For that, back again in the top menu, a click on "Object" and a click on "transform". Tools appear again on the right side of the screen where .</p>
<span class="image object">
<img src="../images/transform-menu.jpg" alt="Printscreen of Inkscape's transform menu'." />
</span>
<p>I just had to select the "rotation" option and type the right angle information.</p>
<span class="image object">
<img src="../images/copy-and-rotate.jpg" alt="Printscreen of another rectangle duplicated in the document and rotated at 120 degrees." />
</span>
<p>All the pieces in place, I selected all of them (polygon included), clicked on "path" in the top menu and selected "exclusion".</p>
<span class="image object">
<img src="../images/tool-exclusion.jpg" alt="Printscreen of Inkscape's object exclusion option." />
</span>
<p>My first drawing is done. I just have to save it as .pdf and open it in the laser cutting machine program.</p>
<span class="image object">
<img src="../images/Inkscape-first-object-done.jpg" alt="Printscreen of an hexagone drawn in Inkscape." />
</span>
Charlotte Vandenbulcke
committed
</section>
Charlotte Vandenbulcke
committed
<section>
<h3>My Project</h3>
<p>I've decided how I wanted my pet house/box to be built and assembled.</p>
Charlotte Vandenbulcke
committed
<p>Panels will be square and the holes to attach the accessories hexagonal to look like a honeycomb on some sides, like this <a href="https://www.printables.com/fr/model/258405-snipspliers-holder-for-honeycomb-storage-wall" target="_blank"> 3D printed tools storage panel</a> idea you can find on printables.</p>
<span class="image object">
<a href="https://www.printables.com/fr/model/258405-snipspliers-holder-for-honeycomb-storage-wall" target="_blank"><img src="../images/printables-honeycomb-tools-structure.jpg" alt="Page on Printables website where you can download the honeycomb structured wall storage for tools" /></a>
</span>
</section>
Charlotte Vandenbulcke
committed
<section>
<h3>Files and resources</h3>
<p><strong>My files</strong></p>
<ul>
<li><a href="../files/CharlotteVdb-OnshapeTest.stl" target="_blank">Onshape test file</a></li>
<li><a href="../files/test1.FCStd">Freecad test1 file</a></li>
<li><a href="../files/test2.FCStd">Freecad test2 file</a></li>
<li><a href="../files/parametric-construction-kit.svg">Inkscape test file</a></li>
</ul>
</section>
</div>
</section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Menu -->
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li><a href="../index.html">Homepage</a></li>
<li><a href="../assignments.html">Assignments</a></li>
<li>
<span class="opener">Week per week</span>
<ul>
<li><a href="../assignments/week01.html">1. Project Management</a></li>
<li><a href="../assignments/week02.html">2. Computer Aided Design</a></li>
<li><a href="../assignments/week03.html">3. Computer Controlled Cutting</a></li>
Charlotte Vandenbulcke
committed
<li><a href="../assignments/week04.html">4. Electronics Production</a></li>
<li><a href="../assignments/week05.html">5. 3D Scanning And Printing</a></li>
<li><a href="../assignments/week06.html">6. Embedded Programming</a></li>
<li><a href="../assignments/week07.html">7. Computer Controlled Machining</a></li>
<li><a href="../assignments/week08.html">8. Electronics Design</a></li>
<li><a href="../assignments/week09.html">9. Output Devices</a></li>
<li><a href="../assignments/week10.html">10. Mechanical Design And Machine Design</a></li>
<li><a href="../assignments/week11.html">11. Input Devices</a></li>
<li><a href="../assignments/week12.html">12. Molding and Casting</a></li>
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
<li><a href="../assignments/week13.html">13. Networking And Communications</a></li>
<li><a href="../assignments/week14.html">14. Interface And Application Programming</a></li>
<li><a href="../assignments/week15.html">15. Wildcard Week</a></li>
<li><a href="../assignments/week16.html">16. Applications And Implications</a></li>
<li><a href="../assignments/week17.html">17. Invention, Intellectual Property And Income</a></li>
<li><a href="../assignments/week18.html">18. Project Development</a></li>
</ul>
</li>
<li><a href="../final-project.html">Final Project</a></li>
<li><a href="../about.html">About Me</a></li>
</nav>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© Charlotte - FabLab de Charleroi. Fab Academy 2024. All rights reserved. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/browser.min.js"></script>
<script src="../assets/js/breakpoints.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/main.js"></script>
</body>
</html>