Skip to content

scottgriv/Resolution-Scale-Calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


JavaScript Badge HTML Badge CSS Badge
GitHub Badge Email Badge BuyMeACoffee Badge
GitHub Workflow Status (with event) Silver


Resolution Scale Calculator

Scale design dimensions (width and height) up or down for @1x, @1.5x, @2, @3x, @4x, and custom @Nx resolutions.

  • Use the application on GitHub Pages Here.
  • Especially useful for Web, iOS mobile app, and Android mobile app designers.

In the digital design realm, crafting visually compelling and crisp graphics is pivotal. The Resolution Scale Calculator emerges as a handy little tool for designers and developers eager to recreate or adapt designs inspired by existing website elements. Here's why incorporating this calculator into your design toolkit is beneficial:

  • Facilitate Design Recreation: Encounter a design element on a website that resonates with your project's aesthetic? Our tool empowers you to ascertain the dimensions of images or designs, often optimized for high-density displays (e.g., @3x), and scale them down accurately to @1x. This foundational step is crucial for vector-based designs, ensuring scalability and adaptability.
  • Vector Design Best Practices: Vectors are the backbone of versatile design, enabling flawless scaling to accommodate various resolutions. Starting your design process at @1x is a best practice that guarantees ease of scaling up for exports without compromising on quality. The Resolution Scaling Calculator simplifies this process, ensuring that your vectors are primed for perfection from the outset.
  • Optimize Asset Performance: By accurately scaling down assets for their intended use, you not only enhance the visual fidelity of your project but also optimize performance. Smaller, correctly scaled assets contribute to reduced load times and a smoother user experience across devices.
  • Precision and Efficiency: Say goodbye to guesswork and tedious manual calculations. Our calculator delivers precise scaling dimensions swiftly, streamlining your design workflow and bolstering productivity.

Application Preview

Table of Contents

Getting Started




Simply input the dimensions (Width x Height) and select the scale (@1x, @1.5x, @2x, @3x, @4x, or a custom @Nx) to see scaled dimensions instantly, optimizing asset performance and consistency.

Note

To run locally if you decide to make changes to the code, simply click on the index.html file to view the project in your browser. It's written in pure HTML/CSS/JavaScript, so there's no need to host it on a web server. Enjoy!

Resources

Design Articles:

Technologies:

License

This project is released under the terms of the MIT License, which permits use, modification, and distribution of the code, subject to the conditions outlined in the license.

  • The MIT License provides certain freedoms while preserving rights of attribution to the original creators.
  • For more details, see the LICENSE file in this repository. in this repository.

Credits

Author: Scott Grivner
Email: scott.grivner@gmail.com
Website: scottgrivner.dev
Reference: Main Branch