#and how to save images not in jpg

[necroticarts]

death waits

[monarchisms]

i am not immune to being apprehensive to change when it comes to something i really like getting a redesign/rebrand/what have you, but i think what the try guys have been doing lately is an exception. in my opinion, the best like, refreshes of a long-lasting brand/group are the ones that have (at least some of) the same recognizable elements of its previous iteration(s):

from day one, branding with the try guys has had a heavy emphasis on color, with the blue/red/green/purple scheme representing keith/ned/zach/eugene, respectively. the colors were in their intro and outro to their videos, they're still especially present in their merchandise, the whole nine yards. with ned rightfully getting kicked out of the group for his "consensual workplace relationship" (jesus), it made sense that they had to stop and change their branding after this sudden event.

the orange era serves as a good bridge between the quartet group icon they started with and the neon triangle icon we have now, but it was kinda temporary. in a way, the try guys as a brand were having an identity crisis, having lost both a founding member and a (now former) friend. i think the current rebrand is a solid mix of their past and future, the blue/green/purple making a return + the triceratops remaining in the center, and the new elements with the triangles and general neon aesthetic (sidenote: triangle + triceratops + try/tri guys makes me go insane. i love it)

i also really like how the orange is reincorporated with the portraits for each of the guys in the pictures shared on their social accounts. alongside this, their poses showcasing their general personalities with the fact that the triangles are play buttons (which i didn't know until i read some alt text on one of their their tweets, whoops!):

overall present a strong sense of familiarity with the boys, but Also the excitement they have on moving forward with whatever the future brings, and i just think that's neat :)

*i didn't know where to fit this bit besides the very end,

but i like the idea that the triangles can also represent a fast forward button, further pushing the idea of the guys moving forward. likely more of a coincidence here but still cool nonetheless :P

[absentlyabbie]

seriously, though. i work in higher education, and part of my job is students sending me transcripts. you'd think the ones who have the least idea how to actually do that would be the older ones, and while sure, they definitely struggle with it, i see it most with the younger students. the teens to early 20s crowd.

very, astonishingly often, they don't know how to work with .pdf documents. i get garbage phone screenshots, sometimes inserted into an excel or word file for who knows what reason, but most often it's just a raw .jpg or other image file.

they definitely either don't know how to use a scanner, don't have access to one, or don't even know where they might go for that (staples and other office supply stores sometimes still have these services, but public libraries always have your back, kids.) so when they have a paper transcript and need to send me a copy electronically, it's just terrible photos at bad angles full of thumbs and text-obscuring shadows.

mind bogglingly frequently, i get cell phone photos of computer screens. they don't know how to take a screenshot on a computer. they don't know the function of the Print Screen button on the keyboard. they don't know how to right click a web page, hit "print", and choose "save as PDF" to produce a full and unbroken capture of the entirety of a webpage.

sometimes they'll just copy the text of a transcript and paste it right into the message of an email. that's if they figure out the difference between the body text portion of the email and the subject line, because quite frankly they often don't.

these are people who in most cases have done at least some college work already, but they have absolutely no clue how to utilize the attachment function in an email, and for some reason they don't consider they could google very quickly for instructions or even videos.

i am not taking a shit on gen z/gen alpha here, i'm really not.

what i am is aghast that they've been so massively failed on so many levels. the education system assumed they were "native" to technology and needed to be taught nothing. their parents assumed the same, or assumed the schools would teach them, or don't know how themselves and are too intimidated to figure it out and teach their kids these skills at home.

they spend hours a day on instagram and tiktok and youtube and etc, so they surely know (this is ridiculous to assume!!!) how to draft a formal email and format the text and what part goes where and what all those damn little symbols means, right? SURELY they're already familiar with every file type under the sun and know how to make use of whatever's salient in a pinch, right???

THEY MUST CERTAINLY know, innately, as one knows how to inhale, how to type in business formatting and formal communication style, how to present themselves in a way that gets them taken seriously by formal institutions, how to appear and be competent in basic/standard digital skills. SURELY. Of course. RIGHT!!!!

it's MADDENING, it's insane, and it's frustrating from the receiving end, but even more frustrating knowing they're stumbling blind out there in the digital spaces of grown-up matters, being dismissed, being considered less intelligent, being talked down to, because every adult and system responsible for them just

ASSUMED they should "just know" or "just figure out" these important things no one ever bothered to teach them, or half the time even introduce the concepts of before asking them to do it, on the spot, with high educational or professional stakes.

kids shouldn't have to supplement their own education like this and get sneered and scoffed at if they don't.

[all-the-fish]

Oh, you know, just the usual internet browsing experience in the year of 2024

Some links and explanations since I figured it might be useful to some people, and writing down stuff is nice.

First of all, get Firefox. Yes, it has apps for Android/iOS too. It allows more extensions and customization (except the iOS version), it tracks less, the company has a less shitty attitude about things. Currently all the other alternatives are variations of Chromium, which means no matter how degoogled they supposedly are, Google has almost a monopoly on web browsing and that's not great. Basically they can introduce extremely user unfriendly updates and there's nothing forcing them to not do it, and nowhere for people to escape to. Current examples of their suggested updates are disabling/severly limiting adblocks in June 2024, and this great suggestion to force sites to verify "web environment integrity" ("oh you don't run a version of chromium we approve, such as the one that runs working adblocks? no web for you.").

uBlockOrigin - barely needs any explanation but yes, it works. You can whitelist whatever you want to support through displaying ads. You can also easily "adblock" site elements that annoy you. "Please log in" notice that won't go away? Important news tm sidebar that gives you sensory overload? Bye.

Dark Reader - a site you use has no dark mode? Now it has. Fairly customizable, also has some basic options for visually impaired people.

SponsorBlock for YouTube - highlights/skips (you choose) sponsored bits in the videos based on user submissions, and a few other things people often skip ("pls like and subscribe!"). A bit more controversial than normal adblock since the creators get some decent money from this, but also a lot of the big sponsors are kinda scummy and offer inferior product for superior price (or try to sell you a star jpg land ownership in Scotland to become a lord), so hearing an ad for that for the 20th time is kinda annoying. But also some creators make their sponsored segments hilarious.

Privacy Badger (and Ghostery I suppose) - I'm not actually sure how needed these are with uBlock and Firefox set to block any tracking it can, but that's basically what it does. Find someone more educated on this topic than me for more info.

Https Everywhere - I... can't actually find the extension anymore, also Firefox has this as an option in its settings now, so this is probably obsolete, whoops.

Facebook Container - also comes with Firefox by default I think. Keeps FB from snooping around outside of FB. It does that a lot, even if you don't have an account.

WebP / Avif image converter - have you ever saved an image and then discovered you can't view it, because it's WebP/Avif? You can now save it as a jpg.

YouTube Search Fixer - have you noticed that youtube search has been even worse than usual lately, with inserting all those unrelated videos into your search results? This fixes that. Also has an option to force shorts to play in the normal video window.

Consent-O-Matic - automatically rejects cookies/gdpr consent forms. While automated, you might still get a second or two of flashing popups being yeeted.

XKit Rewritten - current most up to date "variation "fork" of XKit I think? Has settings in extension settings instead of an extra tumblr button. As long as you get over the new dash layout current tumblr is kinda fine tbh, so this isn't as important as in the past, but still nice. I mostly use it to hide some visual bloat and mark posts on the dash I've already seen.

YouTube NonStop - do you want to punch youtube every time it pauses a video to check if you're still there? This saves your fists.

uBlacklist - blacklists sites from your search results. Obviously has a lot of different uses, but I use it to hide ai generated stuff from image search results. Here's a site list for that.

Redirect AMP to HTML - redirects links from their amp version to the normal version. Amp link is a version of a site made faster and more accessible for phones by Bing/Google. Good in theory, but lets search engines prefer some pages to others (that don't have an amp version), and afaik takes traffic from the original page too. Here's some more reading about why it's an issue, I don't think I can make a good tl;dr on this.

Also since I used this in the tags, here's some reading about enshittification and why the current mainstream internet/services kinda suck.

[erysium]

Do you have any tips for making gif comic pages? Whenever I make them the file is so huge and different than the other pages...

I was wondering bc I really like the Kochab pages and they maintain their quality!

yeah, it's just hard to make them without a huge file size :') some things I do to lessen it a little:

I make gifs in Photoshop and save them by going to File > Export > Save for web (legacy), lowering the amount of colors as far as possible without losing too much quality, same with dithering, and try to keep the image size under 1000px wide or tall at most, if possible. you can play around with the settings in those panels to see how they affect the file size, and make changes.

keep the animations to about 20-25ish frames. less frames = smaller files I think

after I'm done in PS, use https://compressor.io/ to lower the file size a bit more. I do that for big illustration jpgs, or illustration gifs, as well as comic page gifs ✨

[dogtoling]

question for digital artists because i started wondering about this while moving my 40,000 art files between hard drives.

i really want to know because for 99% of my art, I keep the csp file of the finished drawing, plus a PNG version of the art. and I'm realizing how much space that takes up because I have doubles of Literally Everything in every folder. so now I'm wondering if people do it differently or the same way.

(it might obviously be drastically different based on different art programs and ways to do art. The layer thing for one isn't relevant at all for a program with no layers.)

[irradiatedsnakes]

DRIVE LINK HERE to the official mob psycho 100 fanbook!

as far as i can find, there's not been any comprehensive scans of the fanbook put up online, at least on the english-speaking internet. soooo since there's all sorts of fun stuff in it (character birthdays! character & creator q&a's! who would be most likely to survive on a desert island! guest art by other manga authors (the one in the upper left there is by the creator of FMA)!) i wanted to make sure everybody who wants to could see it!

more info under the cut. enjoy!

5x7", scanned at 300dpi in jpg format. exact pixel dimensions differ slightly due to how my scanner's auto-crop works.

the images uploaded are exactly as they were scanned, no image editing save for cropping. they could use some editing to be more presentable (levels adjustment to bring the darks down, more saturation on the color pages, & a teensy bit of rotation/adjustment) but i wanted to upload the untouched files. i might create a new drive with cleaned-up versions at some point.

i claim no ownership over these images, please feel free to do whatever you like with them, share em, edit em, and so on, no attribution necessary.

i bought my copy from hiro_shop_japan on ebay, if anybody wants to get their own.

these are obviously untranslated- some awesome folks have scanned & translated parts of the book (particularly the qnas). you can find those here! there's also a twitter thread of translated bits from 4chan, but i can't seem to find that one at the moment.

[changingplumbob]

A Party To Die For Templates: SFS

So I may have got a tad overexcited about the Halloween CAS Challenge created by @la-llama-sims, and I made templates for every prompt. I wanted to share them on the off chance someone wanted to also do the challenge but maybe didn't have time to do much other than screenshots.

Tutorial below on how to make your own cards using the templates if you are unfamiliar with photo software, all you need is the template and a screenshot of your sim! Very little technical skill required to so feel free to jump in for Simblreen (the month of October on simblr). Remember to go to the original creator post to check out the prompts and the hashtag given for creations is #LLPTDF. Hope to see some of your creations next month, keep them for the spooky season 🎃👻🦇

Strap in and follow along as I make Glenn here (he won't do the spellcaster prompt for Simblreen, it's dress up after all, but it makes sense for a demo)

Step one: Grab the zipped folder of templates on SFS HERE. Unzip the folder and put it somewhere easy to find in your documents, I have a tumblr specific folder my templates are normally sorted in.

Step two: Open your photo editing program of choice. I use paint.net which is old but for this demonstration I will use Photopea, the online free alternative to adobe. You will see the screen below

Step three: Click "Open From Computer" right in the middle under the main title. Find the screenshot you have taken that you would like to use and open it. Now the hole in my template is 744x991 but you can make it slightly bigger if you don't want to fuss as much with lining things up exactly. To resize image from the top bar (Image -> Image Size) We're going to use the crop tool when we have our picture.

Step four: Pull on the squares at the edges to change the size. If you need click View in the top bar and you can zoom in to allow finer selecting. When you have the right size click the tick and copy the image. Keyboard shortcuts are Ctrl+A to select all, then Ctrl+C to copy.

Step five: Open the template you want to use (File -> Open, from the top bar). Add a new layer using either the top bar (Layer -> New -> Layer) or the icons on the bottom right.

Step six: With the new layer selected paste the image, Ctrl+V.

Step seven: On the right of the screen you'll be able to see layer order. Drag the layer with your sim underneath the background layer. This is what will let you slot in your picture.

Step eight: Finishing touches! Unless you are super duper lucky your sim won't appear in the exact right place, you'll have to move them around using the move tool. For precision you'll need to zoom in and move your field of vision using the hand tool.

You'll know it's in the right place when you can no longer see any of the negative space behind it. I like to check both corners to make sure I've got it. This is where having a sim image slightly larger will make it easier.

If you like you can finish now. From the top bar File -> Export as -> PNG or JPG. The picture will save to your downloads folder. If you want to add your own text, keep reading, as I've left space at the bottom for your username, the sim name, and a profile pic or other logo. Or go ahead and crop it out, who needs extra hassle when there are cute CAS looks to be made?

Step nine: From the bar on the right select the large T to add some text, it will automatically spawn in a new layer. Scroll through text options and find one you like (the text style I used isn't in photopea so we will find another). Depending on the type of text you will likely need to play around with the size as well.

Step ten: Start typing. When you're done you can highlight what you have written and use that size box to adjust how big the text is. Select the move tool from the right to move your text where you want it. Repeat step nine if you want text on the other side. I've chosen to put my username on one side, and my sim's name on the other.

Step eleven: Logo time. Open a pre shrunk logo (I scaled my pride plumbobs down to 125x125) and copy. Back on the template add a new layer then paste your image (for some reason I had to copy twice before it would do the right thing, I don't have an explanation sorry). Then using the move tool and the hand tool get your image where you want it.

From the top bar File -> Export as -> PNG or JPG. Again it will have saved to your downloads folder.

Voila, we have a Glenn card! Hopefully you have a your sim card. I spent hours doing up all the templates so feel free to fill them with your sims for the challenge. All I ask is that you don't claim templates as your own work or shove them behind a paywall because rude and the whole premise of Simblreen is free treats! Obviously you do NOT need the templates to participate in the challenge, the cards are just how I'll be presenting mine. Like CAS challenges the possibilities are most often only limited by your imagination.

[whoify]

photopea gif tutorial!

i recently started learning the craft of gifmaking with the free software photopea. when i first started, i had to piece together several different tutorials as well as extrapolate from some photoshop tutorials because-- no one uses photopea.

but they should! it's free! it can run in your browser! it can do most everything photoshop can do and you don't have to deal with adobe or torrenting. so i'm making a tutorial of my photopea gifmaking process because that's what i needed a couple months ago, and i hope it can be of use to some others. let's go!

1: PREPARING

source the scene you want to gif. it's best to download your video when you can, but screen recording can work in a pinch. this is the video downloader software i use.

once the source video is downloaded, i like to pick out the specific moments i'm going to gif and save them as their own files-- this makes future steps easier. an individual gif shouldn't be more than 4ish seconds, so limit your selections to about that. name your files in a way that makes sense to you:

2: CONVERTING TO .JPG

i like to convert my video clips to .jpg format. it is possible to load video clips directly into photopea, but unless it is a very short <30fps clip, it is likely to freeze or crash in my experience. i use this website as it downloads a higher framerate (~25fps) than others i've used.

convert your video files and download the .zip folder containing your frames. make sure to unzip them and name them something helpful if you need to.

3: OPENING YOUR FRAMES IN PHOTOPEA

photopea looks like this when you open it:

select "open from computer" and select only the first frame of your first gif:

your environment should look like this (ignore the other projects i have open, you should just have 0001.psd or similar):

go to file> open and place, and select ALL of the rest of the frames from your first clip:

they'll load in one by one, and your environment should look like this:

notice how all the frames have a little square in the corner? that means they are smart objects, and we need them to not be for our purposes. select all of your frames, right click, and choose rasterize:

in order to make the series of jpgs move as a gif upon download, select all of your frames and go to layer> animation> make frames:

all your layer names should now start with _a_. you can really do this at any point in the process so it's not a big deal if you forget at the beginning.

finally, you want to limit the frames in individual gifs to around 50 or less. if you find you have more, delete some frames off of the beginning or end by right clicking and selecting delete.

4: CROPPING AND RESIZING

select the crop tool on the left hand panel:

at the top bar, select fixed size:

gifs on tumblr are limited to 540px wide for single column gifs, 268px for two columns, and 178px for three columns. the height is up to you; i like to use 350px height with the 540px width.

enter your values into the W and H fields and do not press enter yet. drag the cropped area to where you want it to be-- try to line up the top and bottom edges so as not to lose too much of your image. once you're satisfied with the selection, press enter. your gif is now cropped and resized to tumblr standards.

5: SHARPENING

(if you are working with low-qual video, check out this tutorial by @hellboys before sharpening. basically filter> filter gallery > grain, select soft and play with the settings. then proceed!)

still making sure all of your layers are selected, navigate to filter> sharpen > smart sharpen:

you should see this dialog box:

these are the settings i like to use, but you can play around to see what you like. here's the before and after of my sharpening settings:

the difference will be more noticeable once we complete the next step-- brightening and coloring.

6: BRIGHTENING & COLORING

navigate to layer > new adjustment layer:

at any time, you can edit your adjustment layers by clicking this button in the right hand panel:

for each edit you make to your gif, you will add a new adjustment layer. always make sure they're at the top of your layer stack. i like to start with adjusting the brightness and exposure, which are both pretty straightforward.

additionally ,you can select a curves adjustment layer, choose the RGB channel, and drag the curve just slightly upwards to further brighten your gif, like so:

here's a before and after:

now for coloring-- i mostly use the saturation/vibrance, curves, color balance, and selective color adjustment layers. just play around with all of these until you find a style you like. i like my gifs to look really bright and colorful, so i push the saturation and try to draw out warmer tones in the color balance:

7: CAPTIONS

the font i like to use for captions is arial bold italic. you can download it (or any font of your choosing) from pretty much any free font website. if you choose to download a font not in photopea, go to file> open and select your font; it will now show up in the list of fonts.

navigate to the text button in the left hand panel:

and type in the captions for your gif. i make the font size 20 for 540px gifs.

next, while only your text layer is selected, navigate to layer> layer style > blending options:

click on drop shadow, and play around with the settings until you get something you like. here's mine:

next, click on stroke and do the same thing:

when you're done, make sure your text is your top-most layer.

8: EXPORTING

you're done! head to file> export as> GIF. you'll be prompted with a dialog that looks like this, with your gif playing (you can also do these steps without saving if you want a preview of your gif during editing):

the only thing you should need to adjust is speed. this is the main difference between photopea and photoshop. the only way to specifically adjust the delay in photopea is to manually enter "_05" (or whatever amount of delay) at the end of every layer name. if you're like me you'll agree that is simply too much and settle for the speed slider.

i don't really know what logic governs the speed slider. it doesn't seem to be consistent across gifs, so play with it until it looks right. i've had it on 200% lately which seems insane but looks visually normal.

once the speed is adjusted, hit save and you're done! here's a final before and after of all the work:

BONUS: SAVING .PSD PRESETS

did you think manually creating and editing all those adjustment layers was a lot of work? here's how to streamline it for next time.

at the very bottom of your screen, below your layers, select the icon that looks like a folder (third from the right).

it will create another layer called folder 1. drag your adjustment layers into this folder, making sure they stay in the same order. your layers should look like this when you're done:

ONLY ONCE YOU HAVE SAVED YOUR GIF, delete all other layers that are not in the folder. then select file> save as PSD. save it somewhere convenient.

next time you're making gifs, after you've cropped and sharpened your frames, select file > open and choose your .psd file. it will open as another project. select the layer that says folder 1, and drag it to whatever project you're working on at the top bar. voila! your adjustment layers are applied to your new gif!

i still like to play with the settings, as coloring and brightness needs will differ from gif to gif.

thanks for reading! here's the gifset i made while making this tutorial :-)

[izicodes]

Convert HTML to Image: A Step-by-Step Guide ✨

Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?

Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!

This is an old tutorial I made 🐼

💛 Set your environment

Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:

We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.

Your page should resemble the following:

As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.

💛 Using the html2canvas JavaScript Library

The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:

The steps to put the library in your project:

Visit the html2canvas website for more information.

Copy the CDN link from here

and include it in a script tag in your project's head tag in the HTML file:

That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.

💛 JavaScript Functionality

Here's the JavaScript code to handle the conversion:

In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.

I also put the button into a variable in const button = document.querySelector("button");

I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!

You can find similar code like this in the documentation of the html2canvas library:

What is happening here is:

We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)

Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc

Created an anchor/link tag, added the href attribute to imageDataURL

The download attribute is where we will give the default name to the image file, I added "dog.png"

Perform the click() function to the anchor tag so it starts to download the image we created

And that's it!

💛 The End

And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.

If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼

[a-salmon-good-time]

How do you nail that movie screencap effect thingamajig?? I'm a sucker for VHS-animation looking stuff but sometimes fiddling with blending modes, gaussian blur, noise, ntscQT etc. just doesn't feel right.

For me, I love experimenting with a mix of using blending modes and using ntscQT, but I definitely get the feeling of it still not feeling right despite using those methods!

I'll do my best with explaining how I go about achieving the look! The art software I use is Paint Tool Sai 2 (but any art software with blending modes + layers will do!). Apologies in advance if this is too wordy haha

1.) I draw the usual setup- a background with a character or so. I usually flatten all the layers into one but, for this case, I just only flattened the layer the character's on:

2.) I duplicate the character layer, blur it, set its blending mode to "Lighten", and adjust the opacity as needed before merging the two layers together. I duplicate again, blur again, set the mode to "Darken", adjust opacity, and merge again!

3.) (1st pic) Once I do that, I duplicate & blur the character layer again, then move it a bit to the side (any direction is fine; for this I moved it to the right). Then I set the moved layer's mode to "Color"! After that, I add a drop shadow behind the character layer to give it the look of a traditional animation cel being used.

(2nd pic) Next, I flatten ALL the layers now into one layer, duplicate it and blur it greatly + set blurred layer mode to "Saturation" & move it in any direction before merging all layers again!! lots of duplicating and merging LOL!!!

4.) OK THE LAYER DUPLICATION + MERGING PROCESS IS FINISHED FINALLY! Now we just adjust the colors!

I like to lower the Contrast and raise the Depth, though the adjustments can vary with each piece, depending on how much of a effect you want! Image on right includes the settings I used for this. (I also added a noise layer, but that's optional)

5.) And for the final step.... make the image a smaller size and save as a JPEG/JPG file!!! This should somewhat achieve the low-quality crunch look!

This step is entirely optional, but you can take the JPEG image and add it to ntscQT to mess around with different settings! Here's one I put together:

[larndraws]

Ylfa Snorgelsson Fun fact about this piece, this was my first corrupted photoshop file in YEARS. By some divine providence I saved a progress image shortly before I lost the whole dang thing, so I finished this on a flat, low res jpg. (I spent a couple hours trying to get the file back to no avail). 

That said, I’m still pretty happy with how it turned out!

[ryanyflags]

Flag Making Tutorial

This will be a more technical step-by-step tutorial on how I make my flags (also a long post because I wanted to be thorough, plus I love flags lol).

The program I use is Inkscape, a free vector (.svg) editor program for pc.

I have templates set up, so the actual flag making process is pretty easy/quick.

Hotkeys/Locations/Other Reference

I'll be mentioning these options, so I thought to put them here all in one list. (They list the keyboard shortcuts first)

Snapping: magnet symbol (top right of screen), or under the adjacent arrow ◀️ symbol.

Document properties: shift+ctrl+D, or under the file menu (top left corner of screen). Display (1st tab) Guides (2nd tab) Grids (3rd tab)

Fill and Stroke: shift+ctrl+F, or under object (top of screen).

Layers and Objects: ctrl+shift+L, or under object (top of screen).

Align and Distribute: ctrl+shift+A, or under object (top of screen).

Import (Images): ctrl+i, under the file menu, or by dragging into the Inkscape window.

Save As: ctrl+shift+S, or under the file menu.

Export: shift+ctrl+E, or under the file menu.

Selector Tool: S, or cursor symbol (left side of screen). Click, or click and drag around the objects, to select them.

Locking a selection: lock symbol between the width and height boxes at the top of the screen.

Transform Selections: the width/height and x y position can be changed by typing in the X,Y,W,H boxes (near top middle of screen), or by dragging the corners/edges (resize) and inside the object (move).

Duplicate: ctrl+D.

Delete: delete key, or right click on the object.

Node Tool: N, or below the selector tool (left side of screen).

Rectangle Tool: R, or square symbol (left side of screen).

Pen Tool: B, or pen symbol (left side of screen).

Gradient Tool: G, gradient square symbol (left side of screen).

Mesh Tool: swirly square symbol (left side of screen).

Dropper Tool: D, or dropper symbol (left side of screen).

Undo: ctrl+Z.

Redo: ctrl+Y.

Creating the Template

Download Inkscape and open it, under the Time to Draw tab, click New Document.

First, snapping needs to be enabled, and under advanced mode enable grids and guide lines snapping. (This is crucial for making the stripes equally sized, spaced, and the overall flag in the right ratio.)

I'll be making a template with a 2:3 flag ratio.

Open document properties. (I like to move these types of windows to the right side.)

Under display, set the width to 42px and height to 28px.

Under guides, just click create guides around the current page.

Under grids, make sure rectangular grid is selected, and click new. (Grid units should be in px.) For the major grid line every option, change it to 2. (I also prefer to change the minor grid line color to be transparent.)

That's pretty much it, your template is done :D ! Just save it wherever you want. I like putting it in an easy-to-access flag folder, as it is needed to open it every time to make new flags.

You can use a different width / height / grid size / flag ratio if you want, these are just the numbers I'm comfortable with / used to.

Also, since this is a vector, the image can be infinitely big or small without any quality loss, so the small dimensions above don't actually translate to a low res image.

Creating the Flag

(I'll be using the rainbow flag to demonstrate.)

Start by having the template open.

You can import images (like .png/.jpg files) to color pick / reference if you want. Said images can be transformed (resized/moved) by selecting and transforming them using the options mentioned in reference. (This is optional, they should just be off to the side so they don't get in the way.)

To create the stripes, use the rectangle tool. Click and drag from one grid corner, to a lower grid corner.

While the rectangle is selected, use the dropper tool to pick a color from a imported image. You can also use the fill and stroke (shown on right) tab to create your own colors / edit colors / etc.

You can make these stripes however you want, they just need to all be equally sized. (They don't have to all have the same height, if you intentionally want that (like the demisexual flag for example).)

Then select all the stripes and transform them so that they fit the page.

All that's left is to save/export it.

To export it, use the export tab, under single file, page, adjust the width and height (in px) to however high res you want your image to be. (I usually do 3000 by 2000.)

Type in the desired file name in the box next to the folder symbol, use the folder symbol to choose its export location (which can also be used to determine the file name and save/export it), the adjacent drop-down-menu to select what to save it as (,png, .jpg, .svg, etc.), and the gear symbol to adjust other settings (I leave it as default, with antialias turned off (set to 0)).

And done, you've made a flag :D 🏳️‍🌈

Extra Notes

Layers and Objects: a menu that can be used to manage objects. Like their layering position (whether they are above or below another object), and other options can also be done here instead of with keyboard shortcuts.

Vertically striped flags: it's very similar to above. You would just make the rectangles taller rather than wider.

Wavy stripes: first use the pen tool to create zigzags. (The pen tool works like a outline, so just click along the grid corners, and join the line at the end. The fill and stroke menu can be used to make it a solid colored shape, and remove/add outlines). The steepness/frequency of the zigzags is up to personal preference, they just need to extend off the page a bit. To create equally sized wavy stripes, have the all side lengths (highlighted in red) be equal except (depending on how you draw your zigzags) the first or last wave, which should have half the side length of the others.

Select everything, and with the node tool, select all the zigzag nodes (the corners don't need to be selected), and click make selected nodes smooth (half circle with point in middle symbol, at top of screen). (It'll likely look like it has weird lines in-between the waves, see glitch section at the end for how to fix that.)

Then resize it all to the height of the canvas. And done :)

This can of course be vertical too.

Gradients: You can use the fill and stroke dialogue, gradient tool, or mesh tool to do this.

To create the gradient, select the object, click the linear gradient symbol (gradient box) under fill and stroke. Or dragging / double clicking with the gradient/mesh tools. (The mesh tool is what I used to create the square gradient.)

To change the colors, click on the arrows or circles under fill and stroke, or by clicking the points on the shape, to select the nodes. Then use fill and stroke to change the colors.

To create new colors/stops, click on the plus+ symbol under stops (under fill and stroke), or double click on the gradient. Edit the new colors in fill and stroke again.

To change the location of stops, use stop offset under fill and stroke, or drag the nodes on the gradient. You can also move the end points on the object to make the gradient slanted or vertical.

Symbols: I make my own when I can (like the demi- triangle can be drawn with the pen tool, and resized to the correct proportions). When the symbol is too complicated, I import a .svg of it. Wikimedia commons is a great resource, and the popular twemoji comes in .svg format too. You could also edit it on over the .png in a rastor program if need be.

The align and distribute tab can be used to center symbols (or any other selected object). Select page for the relative to option, and use the symbols underneath to center/align it however you want. (You can also use different relative to options, like last selected, if you want to align it to an object instead.)

Deleting imported reference images: you can do this before saving it as a .svg, if you don't want to keep them / want to clean up the .svg file.

Antialiasing: an option that blurs things basically. A image with antialiasing off will be sharp pixels, while a image with antialiasing on will have transition colors between the main colors.

Below is an example. The left side is without antialiasing, and the right side is with antialiasing.

I can see why it might be preferable to have it on (like for diagonal shapes), but antialiasing can make recoloring .png (not .svg) files hard. The extra different colors messes with fill tools. I also think it looks cleaner without, so I prefer it off.

Exporting glitch: sometimes an exported image will have a thin line between the stripes, despite the fact the stripes are perfectly next to each other. (This seems to not just be a problem with Inkscape, but with vectors in general.)

Below is a zoomed in example of what it'd look like. The left side shows the stripes are all next to each other, but the right image has a transparent line in-between the stripes.

This can be fixed a number of ways.

You could select all the objects, and duplicate them twice.

Or overlap them. The stripes will still be the same size when overlapped, but they will technically be behind each other, so there will be no gap.

With all the different stuff mentioned, you can basically think of them as building blocks with the grid as reference. They can all be mixed and matched together.

I didn't mention all the options, just because there's that many different things you can do in Inkscape. I'd encourage you to play around with all the different options/tools yourself.

There's also some great Inkscape guides on YouTube, it's where I learned how to do a lot of this from (even if they're not for flags specifically, the concepts in those videos can be applied to flags).

Here's an overly elaborate flag I made, just to demonstrate some (but not all) of the things that can be done.

Anyways what a long post haha. But maybe this will be helpful for anyone interested in making (pride) flags.

[yridenergyridenergy]

On the eve of the seven-year mark for this account, let's address the biggest hate point about me: how I insist that people either ask before, come and say thanks, simply link to or credit this page when they share/repost the content.

Even if I manage to convince a handful of peopIe, I will continually have to argue and work with people on this because it's not inherent. For example, I come from an online community where, decades ago, we were shocked when we learned that Japanese artists were mad that some people had simply copied and pasted their fanart. It's obvious when you stop to put yourself in their shoes, but for a lot of people, it takes some personal effort to accept the realization that: "Oh okay, I see where you're coming from." In no way am I comparing fanart with most of my content, as artists deserve a ton more praise, but the concept of being grateful for where you got stuff and not simply saving and reposting stuff is the same. And guess what? People outside of that aforementioned community, and even probably newcomers to that community, are still sharing uncredited fanart. It's not inherent, I get it.

For almost seven years, I have posted twice daily, at least, and this requires quite a lot of budget, time, innovation and effort. And absolutely, the content comes from the band themselves, I'm not the photographer(s), the live show recorders, the interviewers, etc. However, you also wouldn't have that GIF, JPG, etc. if it wasn't for me. I do it to share the love, the passion. If I don't mention the source in my post, then it's either directly cited on the picture or the band has not mentioned the source either, like for memocas.

Also, each perpetrator thinks of themselves individually, but imagine my perspective too: it's not just one, but dozens of people who keep reposting my content to their own crowd of followers without any context. When you don't mention a source and just display new content out of nowhere, you are indeed claiming it as if you were the benefactor.

So, am I fighting for the "clout" or whatever? Well, maybe in the same capacity as those people are clearly attracted to. Whether we are or not, it's just about the principle behind the whole situation that reposting is not the proper way to show that you are grateful about something. Unless it came from a robot or some big corporation without feelings or humanity. If you don't wish to interact and ask permission or say thanks at all, let alone like or reblog on Tumblr, then the least you can do is to mention where you found stuff. To whom you owe the pleasure of having seen that content and being able to share it.

And it's so stupid because on Twitter, for example, you benefit from 280 characters now, plus a link gives a preview of the images that are on the landing site. There is zero excuse for not mentioning your source right there in the post where you repost an image (or screenshots of a translated interview, mindblowingly enough), in addition to whatever small comment you want to make regarding the content, instead of in a subsequent reply that nobody will bother to check.

A lot of people will still disagree on this and hate me, and that's fine. If you don't like me, then don't engage with what I share, because that's just hypocritical. This really shouldn't be that controversial, it's just that your feathers are temporarily ruffled. People added watermarks on their GIFs and scans etc. way before I did.

And the descent from "Please credit if you repost" to "Do not repost" came because people didn't do even that anyway. But if someone comes to ask me if they can nevertheless, I'm super likely to say 'yes'.

At the end of the day, I want to keep this blog positive, I want to foster a good environment to lift people's mood day by day. We have enough bullshit in our lives. I've heard of the Dir en grey community being toxic at probably more than one stage of its existence, but hopefully we can keep avoiding that.

As for me, I am eternally grateful to those who keep up with my apparently insufferable self.

[thomaszloi]

I'm reuploading one guide on making VHS effect more authentic I guess( I'm not gonna pretend I'm a specialist it's just when I was searching and studying it I noticed some people just apply channel effects or noises and overall pictures look like they're too fresh to be old looking) So first we need to understand how VHS works( I found this through videos on vhs and how nintendo 64 ported resident evil 2) VHS holders needed to save and hold a lot of information using metals that can't handle high resolution. In order to compress images VHS divides them into 2 groups: Tone(Black and White relation) and Chroma(color apply without tone channel type). These two channels are compressed to 1:16 of original resolution then changed into same size as original(by crop) but with less resolution. 1) Create new file in photoshop. Call it whatever you want just 'canvas1' can suffies. Sizes are: 640 px width 374(or any you want just in relation to classic 4:3 or 16:9) height AND printing resolution to 72 ppi. Create 3 other files with same application(canvas2 and canvas3 and canvas4) 2) In canvas2 we add screenshot(I used one I made in Hollow knight) now we're going to extract tone by using ctrl+U and change saturation to 0. Now we need to change image size and divide your width into 2 ( if we divide 640 into 2 we get 320 pixels width) height needs to stay the same so turn off button with proportional changes. After we compressed this file we call it 'tone' and save as jpg image. Now we need to add tone to canvas1 and transform it's width according to file size(don't change image size) this is layer1 now. 3) In canvas 3 we have same original screenshot but we need to apply different color profile in edit window(LAB colors) LAB colors consists of channels Light(this is our tone) and a b(these two makes chroma). We now need to open channel window and turn off Light(L) channel and we can see now e have pretty colors. I didn't find how to extract color from this profile so I made new screenshot of this file and add to canvas4(transformed it according to file size). 4)We can close canvas2 and canvas3. In canvas4 we need to change image size. We need to divide 640 into 16 we get = 40 pixels. Width are 40 pixels, height doesn't need to change. We can see now that this image looks squeeshed and that's right. This file we call 'chroma' and save as jpg. Then we need to add this image into canvas1 and transform it according to gile size without changing image size. This is layer2 now. 5)Change layer2 application from normal to color. If you want you can change oppacity to 65-75 %. Now we basically have broken vhs/low fidelity effect.(if you want you can add horro effect by changing layer mode to any instead of color)

BONUS ROUND: You can add some stuff through layer effect by copying finished image and turning off green and blue channel in it. Move this layer slightly to the left. Made another copy of og vhs image we had and turn off red and green move it slightly to the right. If you want to add logo made same thing with channels as we did previously and blur it a little.

[lauravanarendonkbaugh]

Nightshade

Guys, this is really easy. I just ran my first render on Nightshade, and it's very simple to use.

What is Nightshade?

It's software to "poison" the AI image-"generating" models which scrape your art without permission. It works by telling the AI software that this car is really a cow, or something similarly improbable, so that someone using that scraped art to "generate" a car will get a cow instead. This makes stealing art dangerous and costly and ineffective.

Thieving tech-bro: "That's so mean! They're poisoning our data!"

Hey, you know the absolutely guaranteed way to make sure you don't eat brownies full of laxatives? Don't steal brownies out of someone else's lunch in the break room fridge. This will only poison data that's stolen. Be ethical, be unaffected.

Download Nightshade here.

How To Use Nightshade

First, you can choose how intense to make the poison. :D It does increase render time, but that's okay, we know wars aren't won in a moment.

You can specify a tag for your primary image content ("fire," "rabbit," "forest," etc.) to establish content for the scrapers, and it reminds you to use this tag in the alt text and description, and in the post, for maximum impact.

Nightshade takes a while to download and then again to update libraries on first open, but that's a one-time thing. And then it takes a while to render, but again, we are here to preserve art and save the internet, so I can wait a bit to post.

And the output quality is good! Allegedly there are some image effects, but I'm not good enough to spot the difference when I have the before and after together.

Tips:

The guide says to run Nightshade last, after resizing, watermarking, etc. This will be most effective.

Do Nightshade before Glaze, if you choose to do both.

Render in PNG for best results but it's okay to convert to JPG after.

Remember to use your content tag in alt test, description, and your post! This is exactly where you'd be putting accessibility text anyway, so it's good practice with or without Nightshade.

Please share, please protect!

Note: I'm not an artist, I'm a writer, but I'm using Nightshade on promo images I'm putting together for a future project, because those software companies didn't buy that stock art either and I won't make it available to them for free on the license I purchased.

Please share, please protect!

(Now, speaking as a writer, I wish we had something similar for text!)