2D Design

Key Concept

Raster and vector are two primary types of digital graphics formats used for creating and representing visuals.

Raster graphics, also known as bitmap images, are comprised of individual pixels arranged in a grid. Each pixel carries specific color and brightness information. Common file formats include JPEG, PNG, and GIF. These images are resolution-dependent, meaning they can lose quality when scaled up due to visible pixelation. It is great in representing photographs and images with complex color variations and gradients, but editing them, particularly for resizing or modifying shapes, can be challenging.

On the other hand, Vector Graphics are constructed using mathematical equations to define shapes such as points, lines, and curves. Instead of storing pixel data, vector graphics store the instructions needed to recreate the shapes, enabling them to be scaled to any size without loss of quality. This is very suitable for design and fabrication industry. Typical formats for vector graphics are SVG, EPS, and PDF.

Vector Design

Initially, I wanted to make a logo that can be used (only) for the branding of my final project. But then, I thought.. why stop there? Up until now, I just realized that I haven’t really think of a personal branding for my professional work, given the fact that I have my biomaterial page at @tafisabi.lab, but I never design a logo for it. I think, it’s time to do a rebranding!

Therefore, for this assignment I plan to design a logo for my personal passion project, but in a way that is still related to my final project.

Process

Sketching

Working with Inkscape

I have been introduced to Inkscape by Rico, my instructor, during our local bootcamp. I am interested to use it mostly because it’s open and free, but turns out it’s also easy to use!! I think Inkscape can be a very powerful tool when you really explore and know how to maximize its potentials. Anyway, I am still a newbie to it. So, what I am showing you here are pretty much basic operations -but enough to design your own logo!

1. Open Document

Open Inkscape > ‘New Document’ or browse for one if you already have specific doc you want to work on

2. Format page

Set up the page format (size, orientation, unit, background, etc) by going to File > Document Properties > Display.

For this one, I set mine to A3 with Landscape orientation. You can also set up color guides and create grids on the tabs next to it.

3. Organize layers

Set up your layer system! This will make your design files more organized, and later on will make your workflow more efficient! Disclaimer: I’m not that organized, but I realize setting this up front will reduce unnecessary hassles!

You can manage your layers and objects through this box ‘Layers and Objects’:

• To rename existing layer, simply Right Click > Rename Layers
• To add new one, Click the + icon.
• To move layer position, simply drag and drop the layer

Consider how do you want to organize your design assets, either by dedicating each layer for a single type of asset–like images, text, etc, or by organizing them based on object/theme.

4. Import Image

I already have image sketches of the logo that I want to make. To import, there are 2 ways:

• Go to File > Import...
• or, Drag and Drop the files from your directory folder directly to the workspace

5. Trace Image

Next, to be able to transform the raster image into editable vector, do

• Right Click > Trace Bitmap

• Adjust the tracing setting to your liking

I aim to make the logo look a bit fat, so I’ll adjust the bitmap tracing to make it as bold and blocky as possible. There’s no really a right or wrong formula for this, I just play around with the setting until I find the one that I like.

6. Fine-tune Edges with Path tool

The traced image will be converted into path object that we can manipulate. The resulted path object still has some bumpy edges, to refine it, we can simply edit the path points directly or through the Path commands bar.

7. Create Polygonal Shape

Next, I wanted to create a backround for my logo. As I’ve explored in the sketches before, I was thinking of using a hexagon shape derived from ‘hex nuts’ to incorporate a DIY workshop spirit.

• Click Star/Polygon Tool icon
• Set number of corners
• You can also set how rounded or how sharp you want the corners to be at the ‘Rounded’

I wanted to make the corners more subtle, less sharp, to align with the overall visual language. So I tried playing around with different numbers

8. Alignment

Next, I placed the hexagon shape as background behind the logo object. I then can adjust the position of the logo precisely in the centre of hexagon through this ‘Align and Distribute’ Tool

Seeing this tool reminds me of Figma since it also has similar one. But I think Inkscape offers much more variety, like there’s an option to arrange it in circular. I think this tool will be especially very helpful when we have to prepare our lasercut files!

9. Customize Color and Style

Result

Here’s the thing, I’m a thinking by doing kind of person. So oftentimes, I really need to explore and spend some time to try ✨every single scenarios✨ in order to make a decision. So yeah, in the end I tried many different combinations of colors, gradients, and patterns.

Until know, I think I still can’t decide which one I’ll go for!🤣 However, I lean more towards the earth tone–to represent sustainability, and pink/purple accent–to represent innovation and playfulness. So I think I will go with the purple-sage mixed!

Update :

I tried more combination and found these two looking really good as well!

Raster Design

Raster imaging can be used in the context of digital fabrication in various ways, particularly in processes that involve engraving, etching, or carving, but more than that it also can be used for 3D printing texture mapping, CNC machining, and other kinds of intricate and artistic detailing.

For this, I will export the logo that I have made above in the PNG formats (a raster graphics) and process that for laser-engraving purposes by using Figma.

Figma

Figma is a web-based, collaborative, and intuitive design platform that is widely usually used for UI/UX design purposes. It is primarily vector-based, but also supports importing and embedding raster images. Although is not as extensive as Adobe Photoshop and Illustrator, Figma has many extensive plugins to complement that. I’m already familiar with Figma, so lets go straight to the point!

Process: Working with Figma

1. Open Figma > Import the image that you want to edit or you can copy-paste it directly

2. Then you can go straight to editing your image! Here, I would like to turn this logo into grayscale for laser-engraving purpose. To do that, there are various ways:

   • Go to Fill > Click on ‘Image’ and this image editing window will pop up. You can adjust basic photo manipulation filter, like exposure, contrast, highlight and shadows.

     

     To reduce its colors (make it grayscale), just bring the saturation down until it degrades all the other colors. To set how bold you’d like the image to look like, adjust ‘Contrast’ or manually set the ‘Highlights and Shadows’

   • Another instant approach is to manipulate the layer. You can create a new ‘Frame’ to enable layer > Click on the water drop icon under ‘Layer’ > Choose the effect. The one that will generate grayscale is ‘Luminosity’, but feel free to explore other options there!

     

3. You can also add visual effects, such as drop shadow and blur. To activate it, simply click on the Effects tab for this options:

   

Result

That’s it! Very simple for this purpose. But I need to check if this result is enough to be able to generate visible engraving / etching.

Design Files

Tabi-Lab Logo (Inkscape) .svg