r/graphic_design - Help / Information Required: Creating my own "Diablo-2

Creating my own “Diablo-2 ‘like’ images” (Items, characters,…

Greetings Designers!

(Also posted in Reddit’s: learning design – please let me know if this is now allowed here! :)… )

r/graphic_design - Help / Information Required: Creating my own "Diablo-2 'like' images" (Items, characters, etc.)

Property of DIABLO 2 // BLIZZARD – These are NOT my designs

Property of DIABLO 2 // BLIZZARD – These are NOT my designs.

Please note: The graphics seen above are NOT my graphics! (Property of DIABLO 2 // BLIZZARD – please let me know if these are not allowed.

Rather than beating around the *pixelated* bush XD – I will get straight to the point:

I am hoping to create graphics that are very similar to the ones above for: World Building, Board Game Creation; Primarily for eventually printing on cards (playing cards) for a game of my own. Please note that I am NOT copying any in-game graphics – I simply want to create my own that are heavily inspired by the graphics in Diablo 2 (2000)


Soft-ware / apps / design programs / tablets / computers:

– What soft-ware/program would best be used for this? Multiple soft-wares? (images will be stationary & pixelated/low res, as seen above; they will not be animated/moving.)

– Is the soft-ware(s) monthly subscription ($?), one time purchase, free?

– Open to also designing and sending graphics from an app(s) per tablet so that I can ‘free-style’ draw/create graphics. Do you recommend any apps? Specific tablets? Programs? Stylus pens for drawing on said ‘recommended’ tablet

– Other recommendations?

Learning / physical creation:

– Best place to learn from / how to design graphics like this? Not to sound ‘cheap’ – looking at various discount courses on Udemy.com. Other recommendations? Specific places / online to learn this kind of drawing / creation? Without paying actual college/university prices/courses?

– Easier with stylus? Mouse?

– Other recommendations for getting into this kind of art?

– Websites and/or other references that are ideal for printing finished graphics onto blank playing cards, blank ‘board-game’ boards, into ‘player books’ (like DnD?) etc? (Looked at STAPLES, but also searching for other ideas – apologies as i know this is not ‘directly’ related to learningdesign.)

– Other recommendations?

Graphic Design:

– What is this kind of design called? (Pixelated? Low res? 90s/2000s?)

– I’ve utilized Aseprite + Udemy (for learning) for many ‘little’ projects before, but it doesn’t give me what I am looking for with regards to the ‘Diablo-2 Like’ graphics. Also – I don’t think you can used a stylus with Aseprite.

– Is stylus the best / good choice for designing this style of graphic design art? Other suggestions?

– Looking to create characters, monsters, magic-like stationary images, possibly landscapes and items such as: weapons, armor, plants, magic spells, potions, gems, etc – everything ‘fantasy’ related.

– Other recommendations?

Thank you again – I do hope that this is all ‘allowed’ here. If not / something not: please let me know where I can go to research / gain answers.

Greatly appreciative!

~ Andy. (graphic design noob)

Source link

SVGator 3.0 Reshapes the Way You Create and Animate SVG With...

SVGator 3.0 Reshapes the Way You Create and Animate SVG With…

Building animations can get complicated, particularly compelling animations where you aren’t just rolling a ball across the screen, but building a scene where many things are moving and changing in concert. When compelling animation is the goal, a timeline GUI interface is a long-proven way to get there. That was true in the days of Flash (RIP), and still true today in every serious video editing tool.

But what do we have on the web for animating vector graphics? We have SVGator, an innovative and unique SVG animation creator that doesn’t require any coding skills! With the new SVGator 3.0 release it becomes a ground-breaking tool for building web animations in a visually intuitive way.

It’s worth just looking at the homepage to see all the amazing animations built using the tool itself.

A powerful tool right at your fingertips

I love a good browser-based design tool. All my projects in the cloud, waiting for me no matter where I roam. Here’s my SVGator project as I was working on a basic animation myself:

Users of any design tool should feel at home here. It comes with an intuitive interface that rises to the demands of a professional workflow with options that allow more control over your workspace. You will find a list of your elements and groups on the left side, along with the main editing tools right at the top. All the properties can be found on the right side and you can bring any elements to life by setting up keyframes on the timeline.

I’ll be honest: I’ve never really used SVGator before, I read zero documentation, and I was able to fiddle together these animated CSS-Tricks stars in just a few minutes:

See that animation above?

  • It was output as a single animation-stars.svg document I was able to upload to this blog post without any problem.
  • Uses only CSS inside the SVG for animation. There is a JavaScript-animation output option too for greater cross-browser compatibility and extra features (e.g. start animation only when it enters the view or start the animation on click!)
  • The final file is just 5 KB. Tiny!
  • The SVG, including the CSS animation bits, are pre-optimized and compressed.
  • And again, it only took me a couple minutes to figure out.

Imagine what you could do if you actually had design and animation talent.

Intuitive and useful export options
Optimized SVG output

SVGator is also an outstanding vector editor

With the 3.0 release, SVGator is no longer just an animation tool, but a full-featured SVG creator! This means that there’s no need for a third-party vector editing tool, you can start from scratch in SVGator or edit any pre-existing SVGs that you’ve ever created. A Pen tool with fast editing options, easily editable shapes, compound options, and lots of other amazing features will assist you in your work.

That’s particularly useful with morphing tweens, which SVGator totally supports!

Here’s my one word review:

Cool (animating in and out with scale and blur effects)

The all-new interface in SVGator has a sidebar of collapsible panels for controlling all aspects of the design. See here how easy this animation was to make by controlling a line of text, the transforms, and the filters, and then choosing keyframes for those things below.

Suitable plans for everyone

If you want to use SVGator as a vector editing tool, that’s absolutely free, which means that you can create and export an endless number of static vector graphics, regardless of your subscription plan In fact, even on the Free plan, you export three animations per month. It’s just when you want more advanced animation tooling or unlimited animated exports per month than that you have to upgrade to a paid plan.

Source link

Advanced CSS Animation Using cubic-bezier()

Advanced CSS Animation Using cubic-bezier()

When dealing with complex CSS animations, there is a tendency to create expansive @keyframes with lots of declarations. There are a couple of tricks though that I want to talk about that might help make things easier, while staying in vanilla CSS:

  1. Multiple animations
  2. Timing functions

The first one is more widely used and familiar but the second one is less common. There could be good reasons for that — chaining animations with commas is relatively easier than grokking the various timing functions that are available to us and what they do. There’s one especially neat timing function that gives us total control to create custom timing functions. That would be cubic-bezier() and in this post I will show you the power of it and how it can be used to create fancy animation without too much complexity.

Let’s start with a basic example showing how we can move a ball around in interesting directions, like an infinity (∞) shape:

As you can see, there is no complex code — only two keyframes and a cubic-bezier() function. And yet, a pretty complex-looking final infinity-shape animation is what we get.

Cool, right? Let’s dig into this!

The cubic-bezier() function

Let’s start with the official definition:

A cubic Bézier easing function is a type of easing function defined by four real numbers that specify the two control points, P1 and P2, of a cubic Bézier curve whose end points P0 and P3 are fixed at (0, 0) and (1, 1) respectively. The x coordinates of P1 and P2 are restricted to the range [0, 1].

The above curve defines how the output (y-axis) will behave based on the time (x-axis). Each axis has a range of [0, 1] (or [0% 100%] ). If we have an animation that lasts two-second (2s), then:

0 (0%) = 0s 
1 (100%) = 2s

If we want to animate left from 5px to 20px, then:

0 (0%) = 5px 
1 (100%) = 20px

X, the time, is always restricted to [0 1]; however, Y, the output, can go beyond [0 1].

My goal is to adjust P1 and P2 in order to create the following curves:

Parabolic curve
Sinusoidal curve

You may think this is impossible to achieve because, as stated in the definition, P0 and P3 are fixed at (0,0) and (1,1) meaning they cannot be on the same axis. That’s true, and we will use some math tricks to “approximate” them.

Parabolic curve

Let’s start with the following definition: cubic-bezier(0,1.5,1,1.5). That gives us the following curve:


Our goal is to move (1,1) and make it at (0,1) which isn’t technically possible. So we will try to fake it.

We previously said that our range is [0 1] (or [0% 100%]) so let’s imagine the case when 0% is very close to 100%. If, for example, we want to animate top from 20px (0%) to 20.1px (100%) then we can say that both the initial and final states are equal.

Hm, but our element will not move at all, right?

Well, it will move a little because the Y value exceeds 20.1px (100%). But that’s not enough to give us perceptible movement:

Let’s update the curve and use cubic-bezier(0,4,1,4) instead. Notice how our curve is way taller than before:


But yet, still no movement — even if the top value is crossing 3 (or 300%). Let’s try cubic-bezier(0,20,1,20):


Yes! it started to move a little. Did you notice the evolution of the curve each time we increase the value? It’s making our point (1,1) “visually” closer to (0,1) when we zoom out to see the full curve and this is the trick.

By using cubic-bezier(0,V,1,V) where V is some very big value and both the initial and final states are very close together (or almost equal), we can simulate the parabolic curve.

An example is worth a thousand words:

I applied the “magic” cubic-bezier function in there to the top animation, plus a linear one applied to left. This gives us the curve we want.

Digging into the math

For those of you math-minded folks out there, we can break that explanation down further. A cubic bezier can be defined using the following formula:

P = (1−t)³P0 + 3(1−t)²tP1 + 3(1−t)t²P2 + t³P3

Each point is defined as follows: P0 = (0,0), P1 = (0,V), P2 = (1,V), and P3 = (1,1).

This gives us the two functions for x and y coordinates:

  • X(t) = 3(1−t)t² + t³ = 3t² - 2t³
  • Y(t) = 3(1−t)²tV +3(1−t)t²V + t³ = t³ - 3Vt² + 3Vt

V is our big value and t is within the range [0 1]. If we consider our previous example, Y(t) will give us the value of top while X(t) is the time progress. The points (X(t),Y(t)) will then define our curve.

Let’s find the maximum value of Y(t). For this, we need to find the value of t that will give us Y'(t) = 0 (when the derivative is equal to 0):

Y'(t) = 3t² - 6Vt + 3V

Y'(t) = 0 is a quadratic equation. I will skip the boring part and will give you the result, which is t = V - sqrt(V² - V).

When V is a large value, t will be equal to 0.5. So, Y(0.5) = Max and X(0.5) will be equal to 0.5. That means we reach the maximum value at the halfway point in the animation, which conforms to the parabolic curve we want.

Also, Y(0.5) will give us (1 + 6V)/8 and this will allow us to find the max value based on V. And since we will always use a big value for V, we can simplify to 6V/8 = 0.75V.

We used V = 500 in the last example, so the max value there would come out to 375 (or 37500%) and we get the following:

  • Initial state (0): top: 200px
  • Final state (1): top: 199.5px

There’s a difference of -0.5px between 0 and 1. Let’s call it the increment. For 375 (or 37500%) we have an equation of 375*-0.5px = -187.5px. Our animated element is reaching top: 12.5px (200px - 187.5px) and gives us the following animation:

top: 200px (at 0% of the time ) → top: 12.5px (at 50% of the time) → top: 199.5px (at 100% of the time) 

Or, expressed another way:

top: 200px (at 0%) → top: 12.5px (at 50%) → top: 200px (at 100%)

Let’s do the opposite logic. What value of V should we use to make our element reach top: 0px? The animation will be 200px → 0px → 199.5px, so we need -200px to reach 0px. Our increment is always equal to -0.5px. The max value will be equal to 200/0.5 = 400, so 0.75V = 400 which means V = 533.33.

Our element is touching the top!

Here is a figure that sums up that math we just did:

Parabolic Curve using cubic-bezier(0,V,1,V)

Sinusoidal curve

We will use almost the exact same trick to create a sinusoidal curve but with a different formula. This time we will use cubic-bezier(0.5,V,0.5,-V)

Like we did before, let’s see how the curve will evolve when we increase the value:

Three graphs from left to right, showing how the sinusoidal curve gets narrower as the V value increases.

I think you probably get the idea by now. Using a big value for V gets us close to a sinusoidal curve.

Here’s another one with a continuous animation — a real sinusoidal animation!

The math

Let’s get in the math for this one! Folllowing the same formula as before, we will get the following functions:

  • X(t) = 3/2(1−t)²t + 3/2(1−t)t² + t³ = (3/2)t - (3/2)t² + t³
  • Y(t) = 3(1−t)²tV - 3(1−t)t²V + t³ = (6V + 1)t³ - 9Vt² + 3Vt

This time we need to find the minimum and maximum values for Y(t). Y'(t) = 0 will give us two solutions. After solving for this:

Y'(t) = 3(6V + 1)t² - 18Vt + 3V = 0

…we get:

  • t' = (3V + sqrt(3V² - V))/(6V + 1)
  • t''= (3V - sqrt(3V² - V))/(6V + 1)

For a big value of V, we have t'=0.211 and t"=0.789. That means that Y(0.211) = Max and Y(0.789) = Min. That also means that X(0.211)= 0.26 and X(0.789) = 0.74. In other words, we reach the Max at 26% of the time and Min at 74% of the time.

Y(0.211) is equal to 0.289V and Y(0.789) to -0.289V. We got those values with some rounding considering that V is very big.

Our sinusoidal curve should also cross the x-axis (or Y(t) = 0) at half the time (or X(t) = 0.5). In order to prove this, we use the second derivate of Y(t) — which should be equal to 0 — so Y''(t) = 0.

Y''(t) = 6(6V + 1)t - 18V = 0

The solution is 3V/(6V + 1), and for a big V value, the solution is 0.5. That give us Y(0.5) = 0 and X(0.5) = 0.5 which confirms that our curve crosses the (0.5,0) point.

Now let’s consider the previous example and try to find the value of V that gets us back to top: 0%. We have:

  • Initial state (0): top: 50%
  • Final state (1): top: 49.9%
  • Increment: -0.1%

We need -50% to reach top: 0%, so 0.289V*-0.1% = -50% which gives us V = 1730.10.

As you can see, our element is touching the top and disappearing at the bottom because we have the following animation:

top: 50% → top: 0% → top: 50% → top: 100% → top: 50% → and so on ... 

A figure to sum up the calculation:

Sinusoidal Curve using cubic-bezier(0.5,V,0.5,-V)

And an example to illustrate all curves together:

Yes, you see four curves! If you look closely, you will notice that I am using two different animations, one going to 49.9% (an increment of -0.01%) and another going to 50.1% (an increment of +0.01%). By changing the sign of the increment, we control the direction of the curve. We can also control the other parameters of the cubic bezier (not the V one that should remain a big value) to create more variations from the same curves.

And below, an interactive demo:

Getting back to our example

Let’s get back to our initial example of a ball moving around in the shape of an infinity symbol. I simply combined two sinusoidal animations to make it work.

If we combine what we did previously with the concept of multiple animations, we can get astonishing results. Here again is the initial example, this time as an interactive demo. Change the values and see the magic:

Let’s go further and add a little CSS Houdini to the mix. We can animate a complex transform declaration thanks to @property (but CSS Houdini is limited to Chrome and Edge support at the moment).

What kind of drawings can you make with that? Here is a few that I was able to make:

And here is a spirograph animation:

And a version without CSS Houdini:

There’s a few things to take away from these examples:

  • Each keyframe is defined using only one declaration that contain the increment.
  • The position of the element and the animation are independent. We can easily place the element anywhere without the need to adjust the animation.
  • We made no calculations. There isn’t a ton of angles or pixel values. We only need a tiny value within the keyframe and a big value within the cubic-bezier() function.
  • The whole animation can be controlled just by adjusting the duration value.

What about transition?

The same technique can also be used with the CSS transition property since it follows the same logic when it comes to timing functions. This is great because we’re able to avoid keyframes when creating some complex hover effect.

Here’s what I made without keyframes:

Mario is jumping thanks to the parabolic curve. We needed no keyframes at all to create that shake animation on hover. The sinusoidal curve is perfectly capable of doing all the work.

Here is another version of Mario, this time using CSS Houdini. And, yep, he’s still jumping thanks to the parabolic curve:

For good measure, here are more fancy hover effects without keyframes (again, Chrome and Edge only):

That’s it!

Now you have some magic cubic-bezier() curves and the math behind them. The benefit, of course, is that custom timing functions like this let us do fancy animations without the complex keyframes we generally reach for.

I understand that not everyone is math-minded and that’s okay. There are tools to help, like Matthew Lein’s Ceaser, which lets you drag the curve points around to get what you need. And, if you don’t already have it bookmarked, cubic-bezier.com is another one. If you want to play with cubic-bezier outside the CSS world, I recommend desmos where you can see some math formulas.

Regardless of how you get your cubic-bezier() values, hopefully now you have a sense of their powers and how they can help make for nicer code in the process.

Source link

r/webdev - Hvaing 2 divs clicked before page moves on

Hvaing 2 divs clicked before page moves on : webdev

I am trying to make a quiz page, and the idea is that the first 3 divs (optie 1-3) would have to be clicked in to make a choice. but in order for the quiz to move on to the next page, both 1 option out of optie1-3 AND 1 option out of the 3 button divs would have to be clicked in for the page to then move forward to the next question. How should i go about this? Im a beginner using html/css/ts/js. Thanks.

r/webdev - Hvaing 2 divs clicked before page moves on

paint wireframe

Source link

r/webdev - Macbook Pro i7 16" or Macbook Pro M1 13"

Macbook Pro i7 16″ or Macbook Pro M1 13″ : webdev

Hi!I am about to inform the new company I work for about the laptop that they will provide me.I am working on Macbooks for years and currently I own a 2018 version 15″ i7, radeon GPU and 16GB of ram.

I really like the big screen, but most of the time I work on three additional screens. I may work one week a month from the laptop screen tho.If there was a 16″ Macbook with M1 I would ask for it, but for the moment I can choose either M1 13″ or i7 16″.

I am using Docker on the regular basis (so I will ask for 16GB of ram), using Webpack, VS Code and running apache/nginx server on my computer. I am also using Figma if it matters 🙂

What is the wiser choice? Is the M1 chip really worth it or should I just go with the old platform?


r/webdev - Macbook Pro i7 16" or Macbook Pro M1 13"

Source link

r/webdev - The reason .IO domains are so expensive & popular

The reason .IO domains are so expensive & popular : webdev

In the past few years, the TLD dot io has seen a significant increase in popularity. And on pages like Namecheap or GoDaddy buying an unregistered dot io domain is more expensive than a dot com domain. But why is that the case & what makes dot io so popular?

r/webdev - The reason .IO domains are so expensive & popular

The registry “Internet Computer Bureau” setting high fees

A registry that has the right to sell domains of a particular TLD determines the standard fee for its transactions. The “Internet Computer Bureau” holds the rights to sell dot io domains and it is likely that they charge high fees. We can’t know the exact fees they take. But every domain marketplace like Namecheap, Godaddy etc have higher prices for dot io domains than dot com. This can either be due to higher demand or the higher fees are the reason.

Often the higher demand is given as the reason for these prices, but there are reasons that suggest that the fees charged by the “Internet Computer Bureau” are the main driver of the cost.

First, because the “Internet Computer Bureau” not only holds the right to sell the dot io TLD. They also hold the rights to the dot sh and dot ac TLDs. However, these two TLDs are not nearly as popular as dot io but still cost $29.57 (on Namecheap), leading me to conclude that they have set relatively high transaction fees.

r/webdev - The reason .IO domains are so expensive & popular

Second, if demand were the main driver behind the high prices, then dot com should be more expensive. As of September 2020, there were 3.4 million dot com domains registered. That represents about 68% of all registrations that month (4.9 million). While dot io didn’t even make it into the top 10 TLDs of newly registered domains. This leads us to believe that “Verisign” has lower fees than the “Internet Computer Bureau”.

But the demand argument is not completely absurd. While it’s not true that demand for dot io is higher than for dot com, there is something to be said for customers being willing to pay more for dot io. GoDaddy has made the decision to price dot io 20% higher than the other “Internet Computer Bureau” TLDs they sell. This suggests that a higher price will be accepted by most customers looking for a dot io domain. They have even removed the promise of having the “same price next year”. And by that, keeping all options open to generate even more income if the trend continues to grow.

r/webdev - The reason .IO domains are so expensive & popular

The post you’ve read is all part of a new article I’ve released on Indiebrands.io If you want to read the whole article you can read it here.

Thanks for reading. Are topics like those interesting for this subreddit?


Source link

flutter barcode scanner

How to Implement Flutter Barcode Scanner From Scratch

About two years ago, I wrote an article sharing how to build a Flutter barcode plugin with Dynamsoft Barcode Reader step by step. At that time, Flutter was still under development and only supported Android and iOS. Nowadays, Google has released Flutter 2, which allows developers to build apps for mobile, web, and desktop from a single codebase. If you want to build cross-platform apps, it is worth putting much effort into Flutter from now on. Since the new Flutter is not compatible with the old one, I decide to refactor the APIs of the Flutter barcode plugin and add a new method to support barcode scanning by video stream in real-time.

Flutter Barcode SDK Plugin

In the following paragraphs, I will demonstrate how to develop a Flutter barcode plugin that supports reading barcodes from an image file and image buffer, as well as how to publish the plugin to pub.dev.

Developing Flutter Barcode SDK Plugin With Dynamsoft Barcode Reader

My current plan is to make the plugin work for Android. Therefore, I create the plugin package as follows:

flutter create --org com.dynamsoft --template=plugin --platforms=android -a java flutter_barcode_sdk

To add code for other platforms, such as iOS, to the plugin project, I can run:

flutter create --template=plugin --platforms=ios .

The plugin API is defined in the lib/flutter_barcode_sdk.dart file, which is the bridge between Dart code and platform-specific code. A android/src/main/java/com/dynamsoft/flutter_barcode_sdk/FlutterBarcodeSdkPlugin.java file is generated as the Android entry point.

Dart Code

Let’s get started with lib/flutter_barcode_sdk.dart.

The first step is to define a BarcodeResult class, which contains barcode format, result, and coordinate points, for deserializing JSON data returned from platform-specific code:

Create methods decodeFile() and decodeImageBuffer() respectively for picture and video stream scenarios:

The _convertResults() function is used to convert List<Map<dynamic, dynamic>> type to <List<BarcodeResult>> type.

Java Code

When invoking Flutter API, the Android onMethodCall() function will be triggered:

Here are the basic steps for platform-specific code:

  1. Extract the arguments from the Dart framework.
  2. Process the image data.
  3. Return the results.

The decodeImageBuffer method is designed for camera stream. To avoid blocking the main thread, I use SingleThreadExectuor to deal with the CPU-intensive work in a worker thread.

Publishing Flutter Barcode SDK Plugin to Pub.dev

Prior to publishing the plugin, you’d better pass analysis by running the command:

flutter pub publish --dry-run

If there is no error, you can publish the package to pub.dev:

flutter pub publish

I have successfully published the Flutter barcode SDK to https://pub.dev/packages/flutter_barcode_sdk.

Flutter Barcode Scanner

Once the plugin is done, it is time to build a barcode scanner app with a few lines of Dart code.

First, I add the Flutter camera plugin and flutter_barcode_sdk to the pubspec.yaml file:

Then, initialize the camera and barcode reader objects in main.dart:

The app consists of a camera view, a text widget and two button widgets:

In the videoScan() function, I invoke startImageStream() to continuously get the latest video frame and call the barcode decoding API:

The pictureScan() function reads barcode from an image and show the image and results on a picture screen:

Finally, I can build and run the app:

flutter run

A test for recognizing the 1D barcode and QR code on the Raspberry Pi packing box.

Video Barcode Scan

flutter barcode scanner

Picture Barcode Scan

Flutter barcode reader


iOS, Web, and Windows.

Source Code


Source link