mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Continued splash page, added presets, resized cover
This commit is contained in:
unsettledgames
parent
9b3df20533
commit
e3df4618f0
@ -1543,27 +1543,137 @@ div#pb-options {
|
||||
}
|
||||
|
||||
/********FEATURES LOG*************/
|
||||
#features-log {
|
||||
font-size:16px;
|
||||
width:700px !important;
|
||||
height:500px;
|
||||
overflow-y: scroll;
|
||||
line-height: 1.5;
|
||||
#splash {
|
||||
width:100% !important;
|
||||
height:100% !important;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background: #232125;
|
||||
width: 0.5em;
|
||||
background-color: #232125 !important;
|
||||
opacity: 1 !important;
|
||||
|
||||
#splash-input {
|
||||
width:70%;
|
||||
height:100% !important;
|
||||
|
||||
#splash-menu {
|
||||
position:relative;
|
||||
height:100%;
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
|
||||
#editor-logo {
|
||||
font-weight:bold;
|
||||
text-transform:uppercase;
|
||||
font-size:20px;
|
||||
color:$baselink;
|
||||
height:40vh;
|
||||
width:100%;
|
||||
position:relative;
|
||||
|
||||
background-image:url('https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png');
|
||||
background-size:cover;
|
||||
background-position:center;
|
||||
}
|
||||
|
||||
#black {
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:relative;
|
||||
background-color:rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
#sp-coverdata {
|
||||
padding:20px;
|
||||
|
||||
p, a {
|
||||
font-size:15px;
|
||||
position:absolute;
|
||||
text-transform:none;
|
||||
right:20px;
|
||||
}
|
||||
|
||||
p {
|
||||
top:0px;
|
||||
}
|
||||
|
||||
a {
|
||||
bottom:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
margin-top: -0.125em;
|
||||
width: 0.5em;
|
||||
|
||||
#sp-quickstart {
|
||||
color:$baselink;
|
||||
width: 80%;
|
||||
margin-left:10%;
|
||||
padding:20px;
|
||||
left:0px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #332f35;
|
||||
border-radius: 0.25em;
|
||||
border: solid 0.125em #232125; //same color as scrollbar back to fake padding
|
||||
|
||||
.sp-template {
|
||||
display:table;
|
||||
vertical-align: middle;
|
||||
text-transform: uppercase;
|
||||
position:relative;
|
||||
width:100px;
|
||||
height:100px;
|
||||
border-radius:5%;
|
||||
margin-right:40px;
|
||||
margin-top:30px;
|
||||
background-color:$basecolor;
|
||||
float:left;
|
||||
|
||||
font-size: 18px;
|
||||
text-align:center;
|
||||
font-weight: bold;
|
||||
|
||||
p {
|
||||
span {
|
||||
display:block;
|
||||
font-size:16px !important;
|
||||
margin: 0 0 0 0;
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
display:table-cell;
|
||||
width:100%;
|
||||
height:100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: #232125;
|
||||
|
||||
#splash-news {
|
||||
position:relative;
|
||||
right:20px;
|
||||
height:95%;
|
||||
top:2.5%;
|
||||
background-color: #232125 !important;
|
||||
}
|
||||
|
||||
#latest-update {
|
||||
font-size:15px;
|
||||
width:350px !important;
|
||||
height:90%;
|
||||
overflow-y: scroll;
|
||||
line-height: 1.5;
|
||||
position:absolute;
|
||||
top:40px;
|
||||
right:40px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background: #232125;
|
||||
width: 0.5em;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
margin-top: -0.125em;
|
||||
width: 0.5em;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #332f35;
|
||||
border-radius: 0.25em;
|
||||
border: solid 0.125em #232125; //same color as scrollbar back to fake padding
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: #232125;
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
images/sked.png
Normal file
BIN
images/sked.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
@ -45,9 +45,6 @@ function closeDialogue () {
|
||||
if (currentOpenDialogue == "palette-block") {
|
||||
pbAddToSimplePalette();
|
||||
}
|
||||
else if (currentOpenDialogue == "features-log") {
|
||||
showDialogue("new-pixel");
|
||||
}
|
||||
}
|
||||
|
||||
/** Closes a dialogue window if the user clicks everywhere but in the current window
|
||||
|
||||
@ -1,4 +1 @@
|
||||
if (settings.showLog || settings.showLog == undefined) {
|
||||
console.log("Ok");
|
||||
showDialogue("features-log", false);
|
||||
}
|
||||
showDialogue("splash", false);
|
||||
@ -255,67 +255,103 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NEW FEATURES LOG -->
|
||||
<div id="features-log" class="update">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Lospec Pixel Editor: latest updates</h1>
|
||||
<strong>Hey! Unsettled here.</strong><br><br>
|
||||
Welcome to the features-log.html! From now on, it will show all the
|
||||
latest features that have been added to the editor, so that everyone knows what's going on.
|
||||
<!-- Splash page -->
|
||||
<div id = "splash">
|
||||
<div class="splash-news">
|
||||
<div id="latest-update">
|
||||
<h1>Latest updates</h1>
|
||||
<strong>Hey! Unsettled here.</strong><br><br>
|
||||
Welcome to the features-log.html! From now on, it will show all the
|
||||
latest features that have been added to the editor, so that everyone knows what's going on.
|
||||
|
||||
<h2>Canvas and sprite resizing</h2>
|
||||
Canvas and sprite resizing are here! You started a 4x4 sprite but realized it was a bit too small of
|
||||
a resolution to draw a fight against dinosaurs? Now you can go to Edit->Resize canvas and specify a higher
|
||||
canvas size. At the same time, if you drew an ant on a 1000x1000 canvas you can also reduce the canvas size.
|
||||
I'll tell you more, you can even use Edit->Trim to make the borders of the canvas to perfectly include
|
||||
the sprite you're drawing.
|
||||
<br><br>
|
||||
Let's say you'd like to ask for feedback on a piece. You go on Discord and post it, but it's so small!
|
||||
We've got you covered. Besides using the Lospec Pixel Art Scaler, you can also use the Edit->Scale sprite
|
||||
menu to...well...scale your sprite. It's also very useful when you'd like to edit a sprite that was previously
|
||||
scaled. Just scale it down and have a look at how your favourite artist draws those great clouds.
|
||||
<h2>Canvas and sprite resizing</h2>
|
||||
Canvas and sprite resizing are here! You started a 4x4 sprite but realized it was a bit too small of
|
||||
a resolution to draw a fight against dinosaurs? Now you can go to Edit->Resize canvas and specify a higher
|
||||
canvas size. At the same time, if you drew an ant on a 1000x1000 canvas you can also reduce the canvas size.
|
||||
I'll tell you more, you can even use Edit->Trim to make the borders of the canvas to perfectly include
|
||||
the sprite you're drawing.
|
||||
<br><br>
|
||||
Let's say you'd like to ask for feedback on a piece. You go on Discord and post it, but it's so small!
|
||||
We've got you covered. Besides using the Lospec Pixel Art Scaler, you can also use the Edit->Scale sprite
|
||||
menu to...well...scale your sprite. It's also very useful when you'd like to edit a sprite that was previously
|
||||
scaled. Just scale it down and have a look at how your favourite artist draws those great clouds.
|
||||
|
||||
<h2>Layers and palette sorting</h2>
|
||||
Changing the layer sorting is now easier and has some nice animations. Because you can never have enough juice.
|
||||
<br><br>
|
||||
You can also change the ordering of the colours in the palette menu: just drag a colour and place it in the right position.
|
||||
<h2>Layers and palette sorting</h2>
|
||||
Changing the layer sorting is now easier and has some nice animations. Because you can never have enough juice.
|
||||
<br><br>
|
||||
You can also change the ordering of the colours in the palette menu: just drag a colour and place it in the right position.
|
||||
|
||||
<h2>Advanced mode: advanced palette editor</h2>
|
||||
If you are a proud user of the advanced mode (Edit->Switch to advance mode if you want to experience the thrill),
|
||||
we (and with we I mean I) have great news: right click on a colour to open the old picker, click on the edit
|
||||
colour button if you want to try out the new palette editor. In it, you'll find:
|
||||
<h2>Advanced mode: advanced palette editor</h2>
|
||||
If you are a proud user of the advanced mode (Edit->Switch to advance mode if you want to experience the thrill),
|
||||
we (and with we I mean I) have great news: right click on a colour to open the old picker, click on the edit
|
||||
colour button if you want to try out the new palette editor. In it, you'll find:
|
||||
|
||||
<h2>Advanced mode: advanced colour picker</h2>
|
||||
It supports 3 (three) different colour models, it has sliders, it has a mini colour picker if you hate sliders and
|
||||
it also supports 6 (six) different colour harmonies. The Lospec Advanced Colour Picker will make you feel like a
|
||||
pro!
|
||||
|
||||
<h2>Advanced mode: advanced palette block</h2>
|
||||
Part of the new palette editor, it lets you add and remove multiple colours at once. Use the right mouse click to
|
||||
select a bunch of colours that you want to delete. The changes that you make will be propagated to the old
|
||||
palette.
|
||||
<h2>Advanced mode: advanced colour picker</h2>
|
||||
It supports 3 (three) different colour models, it has sliders, it has a mini colour picker if you hate sliders and
|
||||
it also supports 6 (six) different colour harmonies. The Lospec Advanced Colour Picker will make you feel like a
|
||||
pro!
|
||||
|
||||
<h2>Advanced mode: advanced palette block</h2>
|
||||
Part of the new palette editor, it lets you add and remove multiple colours at once. Use the right mouse click to
|
||||
select a bunch of colours that you want to delete. The changes that you make will be propagated to the old
|
||||
palette.
|
||||
|
||||
<h2>But wait, there's more!</h2>
|
||||
We also added a few quality of life improvements!
|
||||
<ul>
|
||||
<li>The brush preview now snaps to the pixel grid! (I'd dare to say "finally!")</li>
|
||||
<li>We added the pixel grid! Click on View->Pixel grid to toggle it, change its colour
|
||||
in the settings, maybe you really like Endesga pink grids.
|
||||
</li>
|
||||
<li>Have fun duplicating layers ;D (Layers->Duplicate or Duplicate from the layer menu)</li>
|
||||
<li>When you hover on a layer in the layer menu (on the right), the editor will temporarily hide
|
||||
the other ones, so you can easily see what's in the current layer.
|
||||
</li>
|
||||
</ul>
|
||||
<h2>But wait, there's more!</h2>
|
||||
We also added a few quality of life improvements!
|
||||
<ul>
|
||||
<li>The brush preview now snaps to the pixel grid! (I'd dare to say "finally!")</li>
|
||||
<li>We added the pixel grid! Click on View->Pixel grid to toggle it, change its colour
|
||||
in the settings, maybe you really like Endesga pink grids.
|
||||
</li>
|
||||
<li>Have fun duplicating layers ;D (Layers->Duplicate or Duplicate from the layer menu)</li>
|
||||
<li>When you hover on a layer in the layer menu (on the right), the editor will temporarily hide
|
||||
the other ones, so you can easily see what's in the current layer.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>That's all folks!</h2>
|
||||
Don't forget to follow Lospec on all the social media pages. If you like the site,
|
||||
please consider becoming a Patron or giving a tip. It helps a lot :)
|
||||
<br><br>
|
||||
Hope you all have fun creating pixel art, see you next update!
|
||||
<br><br>
|
||||
P.S.: you can find this page in Help->Latest update
|
||||
<h2>That's all folks!</h2>
|
||||
Don't forget to follow Lospec on all the social media pages. If you like the site,
|
||||
please consider becoming a Patron or giving a tip. It helps a lot :)
|
||||
<br><br>
|
||||
Hope you all have fun creating pixel art, see you next update!
|
||||
<br><br>
|
||||
P.S.: you can find this page in Help->Latest update
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="splash-input">
|
||||
<div class="splash-menu">
|
||||
<div id="editor-logo">
|
||||
<div id="black">
|
||||
<div id="sp-coverdata">
|
||||
<img src="https://lospec.com/brand/lospec_logo_3x.png"/> pixel editor
|
||||
<p>Version 1.4.0</p>
|
||||
<a href="https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png">Art by Unsettled</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sp-quickstart">
|
||||
<div class="sp-template"><p>Load</p></div>
|
||||
<div class="sp-template"><p><span>New</span> custom</p></div>
|
||||
<div class="sp-template"><p><span>New</span> 32x32</p></div>
|
||||
<div class="sp-template"><p><span>New</span> 64x64</p></div>
|
||||
<div class="sp-template"><p><span>New</span> 128x128</p></div>
|
||||
<div class="sp-template"><p><span>New</span> 256x256</p></div>
|
||||
<div class="sp-template"><p><span>New</span> 512x512</p></div>
|
||||
<div class="sp-template"><p><span>New</span> Gameboy</p></div>
|
||||
<div class="sp-template"><p><span>New</span> C64</p></div>
|
||||
<div class="sp-template"><p><span>New</span> Pico8</p></div>
|
||||
</div>
|
||||
|
||||
<div id="sp-mode-palette">
|
||||
<span>Interface mode:</span>
|
||||
<span>Palette: </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--SPRITE RESIZE-->
|
||||
<div class="update" id = "resize-sprite">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user