search

sebinbenjamin / image-res-generator

A versatile tool for generating icons and splash screens for web and mobile projects. Supports Angular, Ionic, PWA, and more, with seamless SVG and PNG resource generation.
GNU General Public License v3.0
8 stars 5 forks source link

Splash screen autogenerated - splash-bg.png + splash-icon.png #152

Open alfreddagenais opened 4 years ago

alfreddagenais commented 4 years ago

Is your feature request related to a problem? Please describe. Not related to a problem

Add labels enhancement

Describe the solution you'd like In photography we work with the tier 1/3 ( Composition and rule of thirds ). Normally in this generator we provide the splash.png and the system generate a composition of images with this master template. With my tests I could notice the rule of thirds is not always obtained. It's not a big deal, but for my eyes I would have a better look and feel.

So this is why my ideas came. Can we have a generator we can take a background apply to a Splash screen first. Divide the screen in 9 parts. Apply the splash Icon in the middle max width or max height to respect the image ratio for each screen generated?

What do you think?

Describe alternatives you've considered I do not think any alternative solutions for this at this moment.

issue-label-bot[bot] commented 4 years ago

Issue-Label Bot is automatically applying the label enhancement to this issue, with a confidence of 0.60. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

alfreddagenais commented 4 years ago

Issue-Label Bot is automatically applying the label enhancement to this issue, with a confidence of 0.60. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

👍

sebinbenjamin commented 4 years ago

That seems to be a cool feature! Please do add an expected splash with the background image and icon, just to make sure the feature is clear. PRs always welcome.

I'm in the middle of refactoring parts of the codebase. I'm not sure if I can look into this immediately. Thanks

alfreddagenais commented 4 years ago

I'm not sure what is your request exactly, I understand you need to view an expected splash background image and icon. So check the next pictures. The aqua line is simple to represent the rule of thirds in images.

My example is for the generated resource : resources/ios/splash/Default@2x~iphone.png

Ressource Generated : Ressource Generated

Expected image with rule of thirds : Expected image

The red circle represents the area available for the splash-icon.png

This is a possiblity of settings to place logo in correct zone of the thirds

left column center column right column
(7) left-top (8) center-top (9) right-top
(4) left-center (5) center-center (6) right-center
(1) left-bottom (2) center-bottom (3) right-bottom

This options is base on CSS background-position Property The first value is the horizontal position and the second value is the vertical.

For the number is simply a fast-way to position the Icon based on Numpad schemas
Numpad image

In other version we could add a possibility to add percentage to position at the desired position.

@sebinbenjamin Just be sure on which git branche you work for your refactoring? I would try to do a PR in the good branche 👍 Thank you

sebinbenjamin commented 4 years ago

Hey, the PRs are against develop branch.