#photoshop advanced tutorial

[tofupixel]

⭐ So you want to learn pixel art? ⭐

🔹 Part 1 of ??? - The Basics!

Edit: Now available in Google Doc format if you don't have a Tumblr account 🥰

Hello, my name is Tofu and I'm a professional pixel artist. I have been supporting myself with freelance pixel art since 2020, when I was let go from my job during the pandemic.

My progress, from 2017 to 2024. IMO the only thing that really matters is time and effort, not some kind of natural talent for art.

This guide will not be comprehensive, as nobody should be expected to read allat. Instead I will lean heavily on my own experience, and share what worked for me, so take everything with a grain of salt. This is a guide, not a tutorial. Cheers!

🔹 Do I need money?

NO!!! Pixel art is one of the most accessible mediums out there.

I still use a mouse because I prefer it to a tablet! You won't be at any disadvantage here if you can't afford the best hardware or software.

Because our canvases are typically very small, you don't need a good PC to run a good brush engine or anything like that.

✨Did you know? One of the most skilled and beloved pixel artists uses MS PAINT! Wow!!

🔹 What software should I use?

Here are some of the most popular programs I see my friends and peers using. Stars show how much I recommend the software for beginners! ⭐

💰 Paid options:

⭐⭐⭐ Aseprite (for PC) - $19.99

This is what I and many other pixel artists use. You may find when applying to jobs that they require some knowledge of Aseprite. Since it has become so popular, companies like that you can swap raw files between artists.

Aseprite is amazingly customizable, with custom skins, scripts and extensions on Itch.io, both free and paid.

If you have ever used any art software before, it has most of the same features and should feel fairly familiar to use. It features a robust animation suite and a tilemap feature, which have saved me thousands of hours of labour in my work. The software is also being updated all the time, and the developers listen to the users. I really recommend Aseprite!

⭐ Photoshop (for PC) - Monthly $$

A decent option for those who already are used to the PS interface. Requires some setup to get it ready for pixel-perfect art, but there are plenty of tutorials for doing so.

Animation is also much more tedious on PS which you may want to consider before investing time!

⭐⭐ ProMotion NG (for PC) - $19.00

An advanced and powerful software which has many features Aseprite does not, including Colour Cycling and animated tiles.

⭐⭐⭐ Pixquare (for iOS) - $7.99 - $19.99 (30% off with code 'tofu'!!)

Probably the best app available for iPad users, in active development, with new features added all the time.

Look! My buddy Jon recommends it highly, and uses it often.

One cool thing about Pixquare is that it takes Aseprite raw files! Many of my friends use it to work on the same project, both in their office and on the go.

⭐ Procreate (for iOS) - $12.99

If you have access to Procreate already, it's a decent option to get used to doing pixel art. It does however require some setup. Artist Pixebo is famously using Procreate, and they have tutorials of their own if you want to learn.

⭐⭐ ReSprite iOS and Android. (free trial, but:) $19.99 premium or $$ monthly

ReSprite is VERY similar in terms of UI to Aseprite, so I can recommend it. They just launched their Android release!

🆓 Free options:

⭐⭐⭐ Libresprite (for PC)

Libresprite is an alternative to Aseprite. It is very, very similar, to the point where documentation for Aseprite will be helpful to Libresprite users.

⭐⭐ Pixilart (for PC and mobile)

A free in-browser app, and also a mobile app! It is tied to the website Pixilart, where artists upload and share their work. A good option for those also looking to get involved in a community.

⭐⭐ Dotpict (for mobile)

Dotpict is similar to Pixilart, with a mobile app tied to a website, but it's a Japanese service. Did you know that in Japanese, pixel art is called 'Dot Art'? Dotpict can be a great way to connect with a different community of pixel artists! They also have prompts and challenges often.

🔹 So I got my software, now what?

◽Nice! Now it's time for the basics of pixel art.

❗ WAIT ❗ Before this section, I want to add a little disclaimer. All of these rules/guidelines can be broken at will, and some 'no-nos' can look amazing when done intentionally.

The pixel-art fundamentals can be exceedingly helpful to new artists, who may feel lost or overwhelmed by choice. But if you feel they restrict you too harshly, don't force yourself! At the end of the day it's your art, and you shouldn't try to contort yourself into what people think a pixel artist 'should be'. What matters is your own artistic expression. 💕👍

◽Phew! With that out of the way...

🔸"The Rules"

There are few hard 'rules' of pixel art, mostly about scaling and exporting. Some of these things will frequently trip up newbies if they aren't aware, and are easy to overlook.

🔹Scaling method

There are a couple ways of scaling your art. The default in most art programs, and the entire internet, is Bi-linear scaling, which usually works out fine for most purposes. But as pixel artists, we need a different method.

Both are scaled up x10. See the difference?

On the left is scaled using Bilinear, and on the right is using Nearest-Neighbor. We love seeing those pixels stay crisp and clean, so we use nearest-neighbor. 

(Most pixel-art programs have nearest-neighbor enabled by default! So this may not apply to you, but it's important to know.)

🔹Mixels

Mixels are when there are different (mixed) pixel sizes in the same image.

Here I have scaled up my art- the left is 200%, and the right is 150%. Yuck!

As we can see, the "pixel" sizes end up different. We generally try to scale our work by multiples of 100 - 200%, 300% etc. rather than 150%. At larger scales however, the minute differences in pixel sizes are hardly noticeable!

Mixels are also sometimes seen when an artist scales up their work, then continues drawing on it with a 1 pixel brush.

Many would say that this is not great looking! This type of pixels can be indicative of a beginner artist. But there are plenty of creative pixel artists out there who mixels intentionally, making something modern and cool.

🔹Saving Your Files

We usually save our still images as .PNGs as they don’t create any JPEG artifacts or loss of quality. It's a little hard to see here, but there are some artifacts, and it looks a little blurry. It also makes the art very hard to work with if we are importing a JPEG.

For animations .GIF is good, but be careful of the 256 colour limit. Try to avoid using too many blending mode layers or gradients when working with animations. If you aren’t careful, your animation could flash afterwards, as the .GIF tries to reduce colours wherever it can. It doesn’t look great!

Here's an old piece from 2021 where I experienced .GIF lossiness, because I used gradients and transparency, resulting in way too many colours.

🔹Pixel Art Fundamentals - Techniques and Jargon

❗❗Confused about Jaggies? Anti-Aliasing? Banding? Dithering? THIS THREAD is for you❗❗ << it's a link, click it!!

As far as I'm concerned, this is THE tutorial of all time for understanding pixel art. These are techniques created and named by the community of people who actually put the list together, some of the best pixel artists alive currently. Please read it!!

🔸How To Learn

Okay, so you have your software, and you're all ready to start. But maybe you need some more guidance? Try these tutorials and resources! It can be helpful to work along with a tutorial until you build your confidence up.

⭐⭐ Pixel Logic (A Digital Book) - $10 A very comprehensive visual guide book by a very skilled and established artist in the industry. I own a copy myself.

⭐⭐⭐ StudioMiniBoss - free A collection of visual tutorials, by the artist that worked on Celeste! When starting out, if I got stuck, I would go and scour his tutorials and see how he did it.

⭐ Lospec Tutorials - free A very large collection of various tutorials from all over the internet. There is a lot to sift through here if you have the time.

⭐⭐⭐ Cyangmou's Tutorials - free (tipping optional) Cyangmou is one of the most respected and accomplished modern pixel artists, and he has amassed a HUGE collection of free and incredibly well-educated visual tutorials. He also hosts an educational stream every week on Twitch called 'pixelart for beginners'.

⭐⭐⭐ Youtube Tutorials - free There are hundreds, if not thousands of tutorials on YouTube, but it can be tricky to find the good ones. My personal recommendations are MortMort, Brandon, and AdamCYounis- these guys really know what they're talking about!

🔸 How to choose a canvas size

When looking at pixel art turorials, we may see people suggest things like 16x16, 32x32 and 64x64. These are standard sizes for pixel art games with tiles. However, if you're just making a drawing, you don't necessarily need to use a standard canvas size like that.

What I like to think about when choosing a canvas size for my illustrations is 'what features do I think it is important to represent?' And make my canvas as small as possible, while still leaving room for my most important elements.

Imagine I have characters in a scene like this:

I made my canvas as small as possible (232 x 314), but just big enough to represent the features and have them be recognizable (it's Good Omens fanart 😤)!! If I had made it any bigger, I would be working on it for ever, due to how much more foliage I would have to render.

If you want to do an illustration and you're not sure, just start at somewhere around 100x100 - 200x200 and go from there.

It's perfectly okay to crop your canvas, or scale it up, or crunch your art down at any point if you think you need a different size. I do it all the time! It only takes a bit of cleanup to get you back to where you were.

🔸Where To Post

Outside of just regular socials, Twitter, Tumblr, Deviantart, Instagram etc, there are a few places that lean more towards pixel art that you might not have heard of.

⭐ Lospec Lospec is a low-res focused art website. Some pieces get given a 'monthly masterpiece' award. Not incredibly active, but I believe there are more features being added often.

⭐⭐ Pixilart Pixilart is a very popular pixel art community, with an app tied to it. The community tends to lean on the young side, so this is a low-pressure place to post with an relaxed vibe.

⭐⭐ Pixeljoint Pixeljoint is one of the big, old-school pixel art websites. You can only upload your art unscaled (1x) because there is a built-in zoom viewer. It has a bit of a reputation for being elitist (back in the 00s it was), but in my experience it's not like that any more. This is a fine place for a pixel artist to post if they are really interested in learning, and the history. The Hall of Fame has some of the most famous / impressive pixel art pieces that paved the way for the work we are doing today.

⭐⭐⭐ Cafe Dot Cafe Dot is my art server so I'm a little biased here. 🍵 It was created during the recent social media turbulence. We wanted a place to post art with no algorithms, and no NFT or AI chuds. We have a heavy no-self-promotion rule, and are more interested in community than skill or exclusivity. The other thing is that we have some kind of verification system- you must apply to be a Creator before you can post in the Art feed, or use voice. This helps combat the people who just want to self-promo and dip, or cause trouble, as well as weed out AI/NFT people. Until then, you are still welcome to post in any of the threads or channels. There is a lot to do in Cafe Dot. I host events weekly, so check the threads!

⭐⭐/r/pixelart The pixel art subreddit is pretty active! I've also heard some of my friends found work through posting here, so it's worth a try if you're looking. However, it is still Reddit- so if you're sensitive to rude people, or criticism you didn't ask for, you may want to avoid this one. Lol

🔸 Where To Find Work

You need money? I got you! As someone who mostly gets scouted on social media, I can share a few tips with you:

Put your email / portfolio in your bio Recruiters don't have all that much time to find artists, make it as easy as possible for someone to find your important information!

Clean up your profile If your profile feed is all full of memes, most people will just tab out rather than sift through. Doesn't apply as much to Tumblr if you have an art tag people can look at.

Post regularly, and repost Activity beats everything in the social media game. It's like rolling the dice, and the more you post the more chances you have. You have to have no shame, it's all business baby

Outside of just posting regularly and hoping people reach out to you, it can be hard to know where to look. Here are a few places you can sign up to and post around on.

/r/INAT INAT (I Need A Team) is a subreddit for finding a team to work with. You can post your portfolio here, or browse for people who need artists.

/r/GameDevClassifieds Same as above, but specifically for game-related projects.

Remote Game Jobs / Work With Indies Like Indeed but for game jobs. Browse them often, or get email notifications.

VGen VGen is a website specifically for commissions. You need a code from another verified artist before you can upgrade your account and sell, so ask around on social media or ask your friends. Once your account is upgraded, you can make a 'menu' of services people can purchase, and they send you an offer which you are able to accept, decline, or counter.

The evil websites of doom: Fiverr and Upwork I don't recommend them!! They take a big cut of your profit, and the sites are teeming with NFT and AI people hoping to make a quick buck. The site is also extremely oversaturated and competitive, resulting in a race to the bottom (the cheapest, the fastest, doing the most for the least). Imagine the kind of clients who go to these websites, looking for the cheapest option. But if you're really desperate...

🔸 Community

I do really recommend getting involved in a community. Finding like-minded friends can help you stay motivated to keep drawing. One day, those friends you met when you were just starting out may become your peers in the industry. Making friends is a game changer!

Discord servers Nowadays, the forums of old are mostly abandoned, and people split off into many different servers. Cafe Dot, Pixel Art Discord (PAD), and if you can stomach scrolling past all the AI slop, you can browse Discord servers here.

Twitch Streams Twitch has kind of a bad reputation for being home to some of the more edgy gamers online, but the pixel art community is extremely welcoming and inclusive. Some of the people I met on Twitch are my friends to this day, and we've even worked together on different projects! Browse pixel art streams here, or follow some I recommend: NickWoz, JDZombi, CupOhJoe, GrayLure, LumpyTouch, FrankiePixelShow, MortMort, Sodor, NateyCakes, NyuraKim, ShinySeabass, I could go on for ever really... There are a lot of good eggs on Pixel Art Twitch.

🔸 Other Helpful Websites

Palettes Lospec has a huge collection of user-made palettes, for any artist who has trouble choosing their colours, or just wants to try something fun. Rejected Palettes is full of palettes that didn't quite make it onto Lospec, ran by people who believe there are no bad colours.

The Spriters Resource TSR is an incredible website where users can upload spritesheets and tilesets from games. You can browse for your favourite childhood game, and see how they made it! This website has helped me so much in understanding how game assets come together in a scene.

VGMaps Similar to the above, except there are entire maps laid out how they would be played. This is incredible if you have to do level design, or for mocking up a scene for fun.

Game UI Database Not pixel-art specific, but UI is a very challenging part of graphics, so this site can be a game-changer for finding good references!

Retronator A digital newspaper for pixel-art lovers! New game releases, tutorials, and artworks!

Itch.io A website where people can upload, games, assets, tools... An amazing hub for game devs and game fans alike. A few of my favourite tools: Tiled, PICO-8, Pixel Composer, Juice FX, Magic Pencil for Aseprite

🔸 The End?

This is just part 1 for now, so please drop me a follow to see any more guides I release in the future. I plan on doing some writeups on how I choose colours, how to practise, and more!

I'm not an expert by any means, but everything I did to get to where I am is outlined in this guide. Pixel art is my passion, my job and my hobby! I want pixel art to be recognized everywhere as an art-form, a medium of its own outside of game-art or computer graphics!

This guide took me a long time, and took a lot of research and experience. Consider following me or supporting me if you are feeling generous.

And good luck to all the fledgling pixel artists, I hope you'll continue and have fun. I hope my guide helped you, and don't hesitate to send me an ask if you have any questions! 💕

My other tutorials (so far): How to draw Simple Grass for a game Hue Shifting

[hob28]

Advanced Photoshop Techniques: Elevate Your Design Skills

Introduction

Once you've mastered the basics of Photoshop, diving into advanced techniques can significantly enhance your creative projects and workflow. These advanced skills will allow you to push the boundaries of your creativity, creating professional-grade designs that stand out. In this guide, we'll explore a variety of advanced Photoshop techniques to help you elevate your work.

1. Mastering Layer Styles and Blending Modes

Understanding and utilizing advanced layer styles and blending modes can create stunning effects and bring your designs to the next level. Layer styles like Bevel & Emboss, Drop Shadow, and Gradient Overlay can add depth and dimension to your designs. Experiment with blending modes such as Multiply, Screen, Overlay, and Soft Light to blend layers creatively and achieve unique visual effects.

2. Advanced Masking Techniques

Mastering advanced masking techniques allows for precise control over image adjustments and compositions. Using layer masks, you can seamlessly blend multiple images or selectively apply adjustments to specific areas. Refine Edge and Select and Mask tools help create intricate selections for complex subjects like hair or transparent objects, ensuring smooth and realistic composites.

3. Non-Destructive Editing with Smart Objects

Smart Objects offer a powerful way to apply transformations and filters non-destructively, preserving the quality of your original images. Convert layers to Smart Objects before resizing, warping, or applying filters. This way, you can make changes without degrading the image quality, and you can always revert to the original state if needed.

4. Creative Use of Filters and Effects

Applying creative filters and effects can transform your images and add unique artistic touches. Use the Liquify filter for surreal distortions, the Oil Paint filter for a painterly look, or the Tilt-Shift filter for miniaturization effects. Combine multiple filters and effects to develop your own signature style, and use the Filter Gallery to preview combinations.

5. Advanced Retouching and Healing Techniques

Advanced retouching and healing techniques can help you achieve professional-quality results in portrait and product photography. The Healing Brush and Clone Stamp tools are excellent for removing blemishes, imperfections, and unwanted elements. Frequency Separation is a technique that separates texture and color, allowing for precise and natural-looking skin retouching.

6. Using Actions and Scripts to Automate Workflow

Automating repetitive tasks with actions and scripts can streamline your workflow and save valuable time. Photoshop Actions record a sequence of steps that you can apply to multiple images with a single click. Scripts, written in JavaScript, offer even more advanced automation possibilities, such as batch processing and complex adjustments.

7. Creating Complex Selections with Channels

Channels provide a powerful method for creating complex selections, especially when dealing with intricate details like hair or fur. By isolating the color information in different channels, you can create precise masks. Use the Alpha channel to store and refine selections, combining them with layer masks for detailed compositing work.

8. Advanced Typography and Text Effects

Elevate your text designs with advanced typography techniques and text effects that stand out. Use Layer Styles to add shadows, glows, and textures to your text. Explore the capabilities of the 3D Text tool to create dynamic and realistic text effects. Combine text with clipping masks and layer blending modes for creative and impactful typography.

9. 3D Effects and Compositing

Explore the world of 3D in Photoshop to create immersive effects and complex composites. Use the 3D workspace to build, texture, and light 3D objects. Integrate 3D elements with 2D images to create realistic scenes. Experiment with depth maps, extrusions, and 3D layers to add an extra dimension to your designs.

10. Leveraging the Power of Camera Raw

The Camera Raw filter offers advanced tools for photo editing, providing greater control over exposure, color, and detail. Use Camera Raw to make global adjustments, such as correcting white balance, enhancing contrast, and sharpening details. The local adjustment tools, like Graduated Filter and Adjustment Brush, allow for precise, targeted edits to specific areas of your image.

Conclusion

By incorporating these advanced Photoshop techniques into your skill set, you can push the boundaries of your creativity and produce professional-grade designs. Mastering layer styles, blending modes, and advanced masking techniques will refine your compositing skills, while non-destructive editing and automation will streamline your workflow. Embrace the power of Photoshop's advanced features, and watch your design capabilities soar.

[shaunashipman]

i told my friend i would find him some beginner’s giffing tutorials, but all the one’s i could find were either years out of date, used a method that made me go “huh”, or incorporated ready-made actions. all perfectly fine, but if i’m sending someone a tutorial i’d rather it be one for a method i understand enough to help with.

so, here is a beginner’s guide to giffing, as told by cleo, a neurotic, detailed, and organization happy individual. there will be many pictures.

this tutorial will strictly cover the gif making portion of the process, from getting your screencaps to importing in photoshop, resizing/cropping, and sharpening. i was going to briefly go over colouring, but tumblr only allows 30 images and i ran out of space, so i'll have to do a separate colouring tutorial (which also means i can go into more detail, yay).

downloading the videos, whether direct downloads or t*rrents, is also another tutorial. but make sure you’re using at least 1080p, and the bigger the file the better. a single episode of a ~45 minute show should ideally be 2gb at minimum. a full length movie should ideally be at least 5gb. imo 2160p/4k files are not really necessary; the quality increase is negligible, and it takes a lot longer to screencap them. if you do use 2160p/4k files, try and make sure it is not HDR, as those videos are often washed out and require a different screencapping program to fix.

Programs

I am using a cracked version photoshop 2022, but whichever version you use should be pretty much the same

Actions. not a program but a function inside photoshop, where you essentially record a series of steps, and then you can simple play that action when needed and those steps will repeat, which saves considerable time when giffing. I will note which parts of the tutorial are best saved as actions, and explain how to create actions at the end.

For screencapping i use kmplayer it’s free and very simple to use

not at all a necessary program, but i use freecommander instead of the regular windows file explorer as i find the dual panels very helpful when moving the frames around

Screencapping

there are many programs you can use to get the screencaps from a video, a lot are basically the same, some are better suited for particular video file types. kmplayer is a very simple program to use, but afaik the capture function only works on mkv. files (the only other file type i’ve tried is mp4, which plays but does not capture)

once you open your video file in kmplayer, we’re going to open the advanced capture window, found under capture→advanced capture, or alt+v

the window should look like this

A-this is where all your screencaps will save to. i recommend making a specific folder for all your screencaps

B-make sure this is set to png for best quality

C-this is the number of screencaps you want to take, guesstimate how many you will need, keeping in mind that most videos are approx. 25 frames per second, and you should always cap a bit more than you think just in case

D-make sure “every/frame” is selected and set to 1

E-make sure “original” is selected, resizing will be done in photoshop

F-make sure “correct aspect ratio” is unselected

go to the part of the video you want to gif, and pause it just slightly before that part starts, then select ‘start’. the screencaps will start to save to the file, no need to play the video, and will automatically stop once it has capped the number of frames you have chosen

and here is how they look inside freecommander. i have already made a folder for this gifset, which is on the left. now you’re going to make a folder for each individual gif. i’ve decided this one will have four gifs, so create four folders (i just label them gif 01, gif 02, etc) and then move the frames for each gif into their respective folder

while you can always delete frames once the gif is made if it’s too big, i prefer to make sure i have the correct number of frames before i start. the gif limit on tumblr is 10mb, so it’s good to look at the scene/shots you’re giffing and decide approx. what dimensions your gif will be. full size gifs have a width of 540px and your choice of height. if you go for a square gif (540x540) you can usually fit 40-50 frames. if you’re planning for a smaller height (such as 540x400) you can usually fit more around 50-60 frames.

and here are the caps inside the folders. another reason i like freecommander is it’s ability to “multi-rename” files. the default file explorer can do so as well, but you have to do each folder individually and you can’t customize the new names as much. either way, i prefer to rename the files to each gif just to scratch my organization itch.

Introduction to Photoshop

NOTE: i have changed many of my keyboard shortcuts in photoshop to ones i prefer, so any you see listed in the menus of these screenshots are likely not the original shortcuts. you can see and change them yourself under edit→keyboard shortcuts

quick run-down of the photoshop interface. i have adjusted placement of some things from the default so this isn’t exactly how your photoshop will look when you open it, but everything is labelled, either on top or by hovering over the element. once you’re more familiar and have your process down i would recommend adjusting the workspace to suit your process.

A-your main tools and colour selector. almost all the tools have either several tools in one, or have alternate options which can be accessed by right-clicking the tool. you can also hover over each tool to get a pop-up with a quick explanation of the tool

B-additional “windows” such as history, properties, actions etc. can be opened from the window menu at the top and moved around with click-and-drag. history and properties should already be there by default, but probably on the right hand side instead. each window opens and closes with a click

C-the timeline window where the gif is made. the white square is a single frame of a gif, and on the row below is the play controls. this will not be there by default and will need to be opened from the window menu

D-adjustment layers for colouring

E-layers box. this is where the screencaps will show, along with adjustment layers, text layers, etc.

Opening Screencaps in Photoshop

go to file → open navigate to the folder for your first gif, select the first screencap, and check the image sequencing, and click open

a window will open labelled frame rate. set it to 23.976 and select ok

the screencaps will open in the timeline view, seen as the blue panel line at the bottom, and the screencaps are combined into video layer in the layer panel on the right.

Creating Frames

technically, you could go right into your cropping/resizing and sharpening from here, however if you do that directly then you have to keep the screencaps in the folders you have, otherwise if you save and re-open the gif it won’t move.

this next part should be made into an action.

at the top right of the timeline window, click four vertical lines to open the menu and select convert frames → flatten frames into clips. depending on how long the gif is, this can take a minute.

the layers panel should now look like this, each frame of the gif is now its own layer.

the very bottom layer will be the video group. this can be deleted as we’ve made the frames from it

in same timeline menu as before, right under “flatten frames into clips”, select “convert to frame animation” and the screen should now look like this. this will be the end of this action.

Cropping and Resizing

with widescreen footage, sometimes it’s just shorter than 1080p, but most of the time it will have the black bars on the top and bottom, and frustratingly, they’re not always the same size. it’s good to save the most common sizes as actions.

to find the size of the actual screen you turn on the rulers under view→rulers and check the height. then open your canvas size dialogue box under image→canvas size and change the height, making sure pixels are selected in the dropdown. yellowjackets is what i call “xtra wide” which is 800px. “normal” widescreen is 960px.

next we’re going to resize the caps. i also make actions for this, one for each potential gif size. open the image size dialogue box under image→image size and change the height of the image to your desired height plus 4 pixels. these extra pixels are to prevent a line at the top and/or bottom of your completed gif. now re-open the canvas size box, change the width to 540px, and the height to the desired, removing those 4 extra pixels. i have set this one to 540x540. this is where you would end the resizing action.

and as you can see she is off-screen. select the top layer, hold down shift and select the bottom layer to select them all, and with the move tool (the very top one) activated, click and drag to move it left to right as needed to centre the figure/s. as you move it a box will appear telling you how far you are moving it in any direction. make sure you are only moving it left or right, not up or down. to be certain of that, open the properties tab.

the y axis is your up/down, x is left/right. for this gif the y needs to stay at -98. you can also manually change the x axis number instead of dragging the image. also helpful for making sure multiple gifs of the same shot are all positioned the same.

the layer are currently ordered with the 1st at the top and the last at the bottom. with all layers still selected, go to layers→arrange→reverse. the last layer will be on top now. if there is movement in your gif, check if you need to alter the position again to make sure the movement properly centred. but once you are satisfied with the position, the layers should be in “reverse” position, of last layer on top. this is to ensure that the gif plays forwards.

Converting Gif

this should also be made into an action, going through sharpening process

in the timeline menu, select “make frames from layers”

the frames are now populated in animation window. in timeline, click select all frames. go to any of the frames on the bottom and click the little arrow beneath it, select other, and enter 0.07 seconds. this is not a necessary step, as we will have to adjust the frame rate at the end, most likely to 0.05, but if we don’t change the frame rate here, then when we play the gif while working on it to check how it looks, it will play very fast.

in the same menu at the right of the timeline box, select “convert to video timeline”

then, making sure all layers in the panel on the right are selected, go to filter→convert for smart filters. this turns all the layers into a single smart object.

but if you look where i’ve circled, it says the gif is 99 frames long*, when in fact there are only 47. if you are making regular “scene” gifs, basic colouring and maybe a caption, this is fine and does not need to be fixed, it will play at the same speed. if you want to change it to display (approx.**) the correct number of frames, go to the timeline menu on the right, select “set timeline frame rate” and change it from 30 to 15

*if it does not list a frame number by 4 digits but instead says 5f, 10f, 15f, etc. go to the timeline menu on the right, select panel options, and change timeline units to “frame number”

**the reason why this is only approximate is because the actual frame rate is not a a whole number, so when changing the frame rate it isn’t a 1:1, and 47 frames becomes 50 frames. the extra frames are removed at the very end, but if you are not doing any edits that require working frame by frame, there’s no need to change the frame rate here at all

Sharpening

this is, as it sounds, making the gif look sharper. to start go to filter→sharpen→smart sharpen and this window opens. play around with the dials to see what each ones does. the below settings are good for most high quality footage.

Amount-basically, how sharp do you want it

Radius-hard to explain, but this essentially sets how deep the lines of the sharpness are

Reduce Noise-smooths the pixels

once you click okay your single layer should look like this.

you’re going to then right click the layer and select duplicate layer. with the top layer selected, go to filters→blur→gaussian blur and set the radius to 1.0 pixels.

then change the opacity of the top layer to 10%. this is to essentially soften the sharpening a bit, as if it’s too sharp it can make the colouring wonky. this opacity level can also be changed depending on need.

finally, select both layers, right click, and click “group from layers”. your gif is now fully made and sharpened.

Colouring

yeah. ran out of image space. but this is where you would do your colouring and add a caption or any other text.

Converting & Exporting

when all your colouring is done, you’re ready to start saving your gif. you can do it directly from your current file, but that means essentially losing your colouring, as all those layers will be merged together. i am someone who likes to save my psd’s (photoshop files), at least until i’ve posted the gifs, in case i need to fix something in the colouring. if you’d like to keep yours as well, open the history tab and select the first icon at the bottom “create new document from current state”. this will open a copy of the file in a new tab. save the original file and you can close it, continuing all work on the copy file.

select your all your layers, convert them into a smart object from filter->convert for smart filters, then follow the same steps from Creating Frames above. once you're back in frame animation, select Create Frames From Layers, and once again set the frame animation speed.

most people set the speed to 0.05. i personally set it to 0.05 or 0.06 depending on the length of the gif. check how it looks at 0.05, if it seems too fast, try 0.06.

now to save. go to file->export->save for web (legacy). the number is the lower left corner is your gif size, it needs to be under 10mb or else you'll have to delete some frames.

the right panel is your save options. the preset dropdown has some built-in settings, but you won't use them because (at least on my version) the presets only go up to 128 colours, instead of the full 256. the 3 i've highlighted in green are the only one's you'll adjust as needed. the settings below i use for i'd say 90% of my gifs. i'll sometimes change the adaptive dropdown to one of the other options, ocaissionaly the diffusion, and rarely the no transparency dither, but play around with them and see how they change the look of the gif.

when you're satisfied with the look of your gif, click save at the bottom right of the window.

voilà! you now have a gif.

Actions

this is your actions panel. the triangle on the left side is the button to open it. remember, if it's not already there, go to windows->actions to open it.

the buttons on the bottom, left to right, are stop recording, record action, play action, new folder, new action, and delete.

as you can see, i have different folders for my resizing, sharpening, captions, saving, and my 1 step (temporary) actions. to run an action is very simple; click the action, and click play.

to create an action, click the new action button, a box will pop up, give the action a name, and click record. the record button at the bottom of the action window will turn red. now perform all the steps you want it to record, and click stop recording. keep in mind it will record every single thing you do, including in other open files, so if the action you plan to record will have a lot of steps, it might help to write them down first.

to modify an action, select the step in the action above where you'd like the new step to be, hit record, perform the step, stop recording. select the step you'd like to delete, and click the delete button.

steps within the actions can be clicked and dragged, both within that action and moved to other actions. actions can also be moved between folders.

[ozzgin]

Ozz! I'm trying to get into drawing, but I'm absolutely horrid at it and have no idea where to begin. Do you have any tips for beginners? Also, what program do you use? I've heard Krita is good, have you heard of it?

Also, also, remember to hydrate properly and get a good amount of sleep and do lots of self-care! <33 we love you and your content; you make the world a brighter place ^^

~ 🐇

If you want to start from the very bottom, there's a website where the first lesson is drawing a line, quite literally. It builds your confidence with basic shapes, then moves on to more complex topics like textures, shapes in space, construction of real life objects and so on.

I've had it in my bookmarks for...gosh, years now. I should definitely pick it up again, haha.

I also follow Alphonso Dunn on YouTube, he has hundreds of art tutorials and exercises.

As for software, I briefly used Krita years ago and it was nice! It had a very easy interface and the brushes worked well if you wanted to reproduce traditional art. The only reason I didn't stick to it was because I already had PaintTool SAI and Photoshop at the time. When I got my first graphic tablet, I started with Paint.NET, though it was very simplistic.

The general consensus online seems to be Krita for painting or MediBang if you're into drawing anime. In terms of paid software, I think Clip Studio Paint is very popular and has a lot of resources, from brushes to 3D models. Photoshop is classic, but it can be overwhelming if you're new to digital art.

I personally use Procreate because it came with my iPad and it has a very simple menu. Some professional illustrators say it lacks the advanced options you'd find in other programs, and I do agree it may not be enough if you want to go beyond merely drawing. To add text and make small edits, I'll put the doodle through Photoshop, for example.

Free software: Krita, MediBang, Gimp, KRESKA.art (no installation required)

Paid software: PaintTool SAI, Adobe Photoshop, Procreate, Clip Studio Paint

If anyone has more suggestions or tips, feel free to drop them in the comments!

[rejamart]

DISCLAIMERS:

1. This is done in Photoshop but most art programs can approximate, especially just the transform > duplicate > move around steps, which is 90% of the technique.

2. There are ways to do this that are:

quicker

more precise

more accurate in 3d space

less clonky

but this is the laziest way that I have yet found, so I thought I'd make a tutorial.

3. Sorry the UI text got so shrunk, I didn't notice. You can tell what I'm doing anyway hopefully, the only confusing part should be the grouping in the advanced method.

TLDR you can apply layer styles to an entire GROUP, so you can have layer styles on an individual image, and THEN put that in a group and put a layer style on that and it applies to that image and everything else in there with it. This is extraordinarily useful once you start using it a lot.

[nanalite]

𓈒༷♪˚.✧ How to make a mockup like this for smaus, ocs, etc. (step-by-step tutorial ☆ no Photoshop, easy, free) (requested by @lovebittenbyevans) ✿

guys this took me two hours to make and you could probably get this done in like, 30 minutes :) I hope this is coherent <3 Please look back this image for comparisons, if my explanation is not well explained, etc.

first of all, if you dont already have one, make a free canva acount. once you're signed in, hit the purple "create design" button on the sidebar. A pop-up will appear with different design template options. For this design, we want the dimentions to be 1080 x 1080, so you can either make a custom size or choose the instagram post (square) template by either searching or scrolling through the list.

2. Now you have a blank page. Zoom in with the slider at the bottom of the page if you need to (Mine is currently zoomed in 41%). Click on the page and change the color to an off black (hex code #111111).

3. Now that the color is changed, click the "elements" tab and search "line". Click the shape and it will add it to the page automatically. These line are particularly hard to navigate and hard to get it at the right angle and length so this part might take a little longer than the rest.

4. stretch it from top to button and turn in a 90 angle so its straight on the left side of the page. Change the color of this as well to a grey tone (hex code #2F2F2F).

5. Now we'll add the Instagram logo. Click the "text" tab then click the purple "add text box" button. Write "Instagram" in the box and change the font to "apricots". This is the closest font I could find that resembled the logo font but if you find a better one, feel free to use that instead. Make the font size 19.3 (you can do this manually or do it in the text options). Change the color to grey color (hex code #707070). Add it to the upper left corner of the page like this:

6. now we're adding icons and a menu inside the border we just made. Click the "elements" tab again and search for "instagram home icon" and add the element by sketchify to the page. Click the home icon, an options icon with pop-up above the page. Look for the "Position" button and click it. Scroll to find the advanced options and you can manually type in the width and height at 26.6 and 28.7.

Move it inside the border, under the logo (photo below). Change the color again (the hex code is #707070).

7. Open the text tab and add a text box. Change the font to Canva Sans and write "Home" in the box. Change the font size to 18.1 and align with with the house icon. It will look something like this,

8. Go into the elements tab again and search "instagram search icon". Scroll until you find the one by sketchify and add it to the page.

9. Shrink it so the W and H is at 36.6 and 31.3. Move it below the home icon until a purple "67" pop ups and aligns under it. Change it to the same color as the Home text and icon (#707070). Go ahead and Duplicate the the "Home" text box and clicking it and a pop-up will show up then edit the text so it says "Search" and align with the searcch icon we just added.

10. You know the drill. We are continuing to search up more icons in the "elements" tab. Search "instagram compass icon" and choose the one by sketchify (are u seeing the pattern?). Add it to the page and change the width and heigth to 33.1. align it under the search icon just like how we did before and change it to the say colors as the other icons.

11. Do the same as before and write "Explore" in a text box and align it with the icon. We're doing the same thing for all of these.

We'll be using the same search prompt for all of these icons so just change the type of icon you're looking for like we've done before hand. Next look for the Instagram reel icon and add the outlined one by sketchify and change the W and H to 31.2 x 30.9. Change the color to the ones we've used before, align it underneath the icons above and add your text ("Reels").

12. The next icon is an outlined, "sent" one. W and H is 31.1 x 27. The text will say "Send". Then an heart outline by sketchify; W and H is 34.2 x 29.1 and the text is "Likes". Next is the "create" outline icon by sketchify, W and H is 36.8.

(p.s if you are struggling to align the icons and text correctly, shoot me a message and I'll send you the X and Y positions ;D)

If you followed it through, it should look like this,

13. Now onto step 13, we'll be adding the Threads logo. You don't have to add this but to make it look more like the actual website, I will be adding it. Open the "text" tab and add a text box. Write an "@" symbol in the box and change the font to Nanum Sqaure and the size to 24.9. Add in the bottom corner below all the icons we just added to our page. We need another text box now (Color is still #707070), write "Threads" and align it to the "@" symbol.

14. We're adding another icon now. Search "Instagram menu icon" and find a wireframe menu icon by sketchify. the W and H are 42.5 x 24.6. Add a text box that says "More". It will look like this:

We are a quarter way done now :D

15. Search in the elements tab "circle frame" and look for the one with a little border around it.

At first, the circle will be green and inside the circle will be white. Change the white to color of the background of the page (hex code #111111) then change the green to a grey color (#8D8986).

16. Add a new text box, change the font to Canva Sans and the size to 22.8 and the color is white. I just wrote "user.name" in the box. the W and H will be 153.3 x 35.7.

Enter the "elements" tab and search for a blue checkmark and find the icon by Victor Aguiar. The W and H is 28.1 by 28.

17. Search in the search box for a rectangular shape and add it to the page. Place it next to your username and checkmark icon and make the W and H to 149.6 x 38. Add another and place it next to the other rectangle shape. the W x H is 111.4 x 36.7.

Change the color of both boxes to #2F2F2F. Add a text box and write "following" then change the W and H to 82.6 x 21.8 and fit it inside the first box. Add a second text box and write "message" in it then change the W and H to 77.8 x 21.8. Change both text colors to #7A7A7A

18. Add another text box. Write "<" and turn it upside down and place it beside the "following" text inside the rectangle. Adjust the size as you need to. I also like the round the corners to around 8 so its not so pointy and square.

19. Add 3 new text boxes. Write the amount of posts, the amount of accounts you're following and the amount of followers your have. Write "20 posts", "30 following" "40 followers". Bold the numbers and change the text W and H to 116.4 x 32.7. These are just place holders that I use.

20. Open the "elements" tab again and search "frame". Choose the first one.

We want the height and width to be 268 x 252.4. Place it at the bottom of the page but we want some space between the frame and the page.

Now we'll duplicate the frame we just placed (the icon between the comment and trash can on the pop up above the frame). Place it next to the previous frame but we want to leave a bit of space between them like this:

If its a little wonky, don't worry. You can always adjust it so it looks right.

Duplicate the frame again and place it next the second frame you just placed, same distance between. Make sure they're even. Now we have a row.

Select all three frames and duplicate them. Move them above our original frames but leave a little space between them.

Again, if they're uneven, adjust them as you need to.

21. Select the line again from the elements tab. Stretch starting from the top frame to the last frame and make the color grey (#2F2F2F).

Because the line is stupid hard to navigate, use something like a text box to mark where you want it to end like this:

Delete the text box and the line with be where we want it.

22. On to the highlight reels. Seach for "add button" and find the one by Barudak Lier.

Change the heigh and width to 81.1 and move it above the border.

Search for circle frames now and add this one to the page (The same one we used for the pfp), change the width and height to 85.4 and move it next to the add button. Since this is a generic, blank template, I add about 4 of these highlight frames but you can do however many you want. You can change the border color to a gradient or leave it grey.

Add a text box now. The font will be Canva Sans, the size will be 18.1 and the color will be white. Change the text to "Add" and place it under our add button. Make more of these text boxes to place under the circle frames. Depending on which frame its under, write "Highlight 1", "Highlight 2", etc. etc. or you can give them different names and such.

23. Add another text box, write "name" and bold it, change the size to 19.1 and the W and H to 69.2 x 28.8. The font will be Canva Sans and the color will be white. It will go under the amount of posts, followings and followers.

Add another box. The font is Canva Sans, font size to 20.1, the W and H is 40.8 x 31.3 and the color is white as well. This is our "bio". Place it under "name".

Yay!🎉🎉🎉 You're halfway done!

24. Search for a shape in the elements. Look for the rectangle again and add it. Change the width and height to 460 x 760.4 and the color to an off black/grey color (#191919), placing it like this:

Get the same kind of square frame we used before to make the profile grid and make it the same size as the rectangle we just added. Place right up against the rectangle like it's its other half. Add another line like before and span across the upper half of the black rectangle as a border then add a circle frame inside the border.

Add a text box, "user.name" and align it with the frame. The text is white and the W and H is 111.5 x 25.9

25. Add more circle frame along the inside of the rectangle to resemble the comment section. Make sure the W and H of the frames are 46.1.

Add more text boxes that align with the frames you just made and write "username" again and bold them. Add even more text boxes that align with the usernames and write "comment". These are place holders for when you decide to use this template.

Add another rectangle on the lower part of the rectangle and make the color black. and search for "instagram heart icon", "instagram comment icon" and "instagram send icon". Make sure the lines are thick. Find the heart icon by sketchify, and the the comment and send icon are by Mirazz Creations. Make the lines white and make sure the W and H are the following:

Heart icon: 38.7 x 32.9

Comment icon: 35.2 x 35. 8

Send icon: 35 x 32

Next, look for "instagram bookmark icon" and find the one by Adricreative. Change the color to white and the W and H to 29.7 x 40.2. Move it to the other end of the rectangle.

26. Now add three circles frames and change the W and H to 37.2. Move them below the heart icon and have them overlap each other some. Then, add a text box and write "liked by username and 1000 others". Change the font size to 13.6 and change the font to Canva sans. the color will be white. Align this with the three overlapped frames.

27. Look in the elements tab for an emoji icon and choose the one by Soni Soukell from Noun Project. The W and H will be 32.8 and the color is white.

Now add a another text box and write "Write a comment". The color will be white, the font size will be 14.2 and align with the emoji icon you just placed.

Search for "next arrow button" by Pixeden and make the W and H 42.8 then add it to both sides of the post.

And you're all done with your template! All that is left to do is fill it but before doing that, duplicate the page so you always have an extra blank mockup if you want to use it again.

To fill the frames, upload an image (or use a Canva stock photo), drag and hover it over the frame and it will fill the frame.

Hope this was helpful and you you successfully made one :D <3

[anyataylorjoys]

Someone asked me how I created the fade transition in this gifset which I’ll try to explain in the most comprehensive way that I can. If you've never done something like this before, I suggest reading through the full tutorial before attempting it so you know what you'll need to plan for.

To follow, you should have:

basic knowledge of how to make gifs in photoshop

some familiarity with the concept of how keyframes work

patience

Difficulty level: Moderate/advanced

Prep + overview

First and foremost, make the two gifs you'll be using. Both will need to have about the same amount of frames.

For ref the gif in my example is 540x540.

I recommend around 60-70 frames max total for a big gif, which can be pushing it if both are in color, then I would aim for 50-60. My gif has a total of 74 frames which I finessed using lossy and this will be explained in Part 4.

⚠️ IMPORTANT: when overlaying two or more gifs and when using key frames, you MUST set your frame delay to 0.03 fps for each gif, which can be changed to 0.05 fps or anything else that you want after converting the combined canvas back into frames. But both gifs have to be set to 0.03 before you convert them to timeline to avoid duplicated frames that don't match up, resulting in an unpleasantly choppy finish.

Part 1: Getting Started

Drag one of your gifs onto the other so they're both on the same canvas.

The gif that your canvas is fading FROM (Gif 1) should be on top of the gif it is fading INTO (Gif 2).

And here's a visual of the order in which your layers should appear by the end of this tutorial, so you know what you're working toward achieving:

Part 2: Creating the grid

Go to: View > Guides > New guide layout

I chose 5 columns and 5 rows to get the result of 25 squares.

The more rows and columns you choose, the more work you'll have to do, and the faster your squares will have to fade out so keep that in mind. I wouldn't recommend any more than 25 squares for this type of transition.

To save time, duplicate the line you've created 3 more times, or as many times as needed (key shortcut: CMD +J) and move each one to align with the guides both horizontally and vertically. You won't need to recreate the lines on the edges of the canvas, only the ones that will show.

After you complete this step, you will no longer need the guides so you can go back in and clear them.

Follow the same duplicating process for the squares with the rectangle tool using the lines you've created.

Align the squares inside the grid lines. The squares should not overlap the lines but fit precisely inside them.

This might take a few tries for each because although to the eye, the squares look all exactly the same size, you'll notice that if you try to use the same duplicated square for every single one without alterations, many of them will be a few pixels off and you'll have to transform the paths to fit.

To do this go to edit > transform path and hold down the command key with the control key as you move one edge to fill the space.

Once you're done, put all the squares in their separate group, which needs to be sandwiched between Gif 1 and Gif 2.

Right click Gif 1 and choose "create clipping mask" from the drop down to mask it to the squares group. This step is super important.

After this point, I also took the opacity of the line groups down to about 40% so the lines wouldn't be so bold. Doing this revealed some squares that needed fixing so even if you aren't going dim the lines, I recommend clicking off the visibility of the lines for a moment to make sure everything is covered properly.

Part 3A: Prep For Key framing

I wanted my squares to fade out in a random-like fashion and if you want the same effect, you will have to decide which squares you want to fade out first, or reversely, which parts of Gif 2 you want to be revealed first.

In order to see what's going on underneath, I made Gif 1 invisible and turned down the opacity of the squares group.

If you want text underneath to be revealed when the squares fade away, I would add that now, and place the text group above Gif 2, but under the squares group.

Make a mental note that where your text is placed and the order in which it will be revealed is also something you will have to plan for.

With the move tool, click on the first square you want to fade out. Every time you click on a square, it will reveal itself in your layers.

I chose A3 to be the first square to fade and I'm gonna move this one to the very top of all the other square layers.

So if I click on D2 next, that layer would need to be moved under the A3 layer and so on. You'll go back and forth between doing this and adding key frames to each one. As you go along, it's crucial that you put them in order from top to bottom and highly suggested that you rename the layers (numerically for example) which will make it easier to see where you've left off as your dragging the layers into place.

Part 3B: Adding the Keyframes

This is where we enter the gates of hell things become tedious.

Open up the squares group in the timeline panel so you can see all the clips.

Here is my example of the general pattern that's followed and its corresponding layers of what you want to achieve when you're finished:

So let’s try it!

Expand the control time magnification all the way to the right so you can see every frame per second.

As shown in Part 3A, select your first chosen square.

Where you place the time-indicator on the panel will indicate the placement of the keyframe. Click on the clock next to opacity to place your first keyframe.

Move the time-indicator over 3 frames and place the next key frame.

Things to consider before moving forward:

Where you place your very first keyframe will be detrimental. If you're using a lot of squares like I did, you may have to start the transition sooner than preferred.

If you're doing 25 squares, the key frames will have to be more condensed which means more overlapping because more frames are required to finish the transition, verses if you're only using a 9-squared grid. See Part 4 for more detailed examples of this.

The opacity will remain at 100% for every initial key frame, and the second one will be at 0%.

Instead of creating two keyframes like this and changing the opacities for every single clip, you can copy the keyframes and paste them onto the other clips by click-dragging your mouse over both of them and they'll both turn yellow. Then right click one of the keyframes and hit copy.

Now drop down to your next clip, move your time-indicator if necessary to the spot where the first keyframe will start and click the clock to create one. Then right click it and hit "paste".

Tip: When you have both keyframes selected, you can also move them side to side by click-dragging one of them while both are highlighted.

Your full repetitive process in steps will go as follows:

click on square of choice on the canvas

drag that square layer to the top under the last renamed

in timeline panel: drop down to next clip, move time-indicator tick to your chosen spot for the next keyframe

create new keyframe

right click new keyframe & paste copied keyframes

repeat until you've done this with every square in the group

Now you can change the opacity of your squares layer group back to 100% and turn on the visibility of Gif 1. Then hit play to see the magic happen.

PART 4: Finished examples

Example 1

the transition starts too soon Cause: initial keyframe was placed at frame 0

the squares fade away too quickly Cause: overlapping keyframes, seen below. (this may be the ideal way to go with more squares, but for only 9, it's too fast)

Example 2

more frame time for first gif

transition wraps up at a good point Cause: in this instance, the first keyframe was placed 9 frames in, and the keyframes are not overlapping. The sequential pair starts where the last pair ended, creating a slower fade of each square.

Part 5: Final Tips and Saving

You can dl my save action here which will convert everything back into frames, change the frame rate to 0.05 and open the export window so you can see the size of the gif immediately.

If it's over 10gb, one way to finesse this is by use of lossy. By definition, lossy “compresses by removing background data” and therefore quality can be lost when pushed too far. But for most gifs, I have not noticed a deterioration in quality at all when saving with lossy until you start getting into 15-20 or higher, then it will start eating away at your gif so keep it minimal.

If you've done this and your gif is losing a noticeable amount of quality and you still haven’t gotten it below 10mb, you will have no choice but to start deleting frames.

When it comes to transitions like this one, sometimes you can't spare a single frame and if this is the case, you will have to return to the timeline state in your history and condense the key frames to fade out quicker so you can shorten the gif. You should always save a history point before converting so you have a bookmark to go back to in case this happens.

That's pretty much it, free to shoot me an ask on here or on @jugheadjones with any questions.

[antoniosvivaldi]

Neural Filters Tutorial for Gifmakers by @antoniosvivaldi

Hi everyone! In light of my blog’s 10th birthday, I’m delighted to reveal my highly anticipated gifmaking tutorial using Neural Filters - a very powerful collection of filters that really broadened my scope in gifmaking over the past 12 months.

Before I get into this tutorial, I want to thank @laurabenanti, @maines , @cobbbvanth, and @cal-kestis for their unconditional support over the course of my journey of investigating the Neural Filters & their valuable inputs on the rendering performance!

In this tutorial, I will outline what the Photoshop Neural Filters do and how I use them in my workflow - multiple examples will be provided for better clarity. Finally, I will talk about some known performance issues with the filters & some feasible workarounds.

Tutorial Structure:

Meet the Neural Filters: What they are and what they do

Why I use Neural Filters? How I use Neural Filters in my giffing workflow

Getting started: The giffing workflow in a nutshell and installing the Neural Filters

Applying Neural Filters onto your gif: Making use of the Neural Filters settings; with multiple examples

Testing your system: recommended if you’re using Neural Filters for the first time

Rendering performance: Common Neural Filters performance issues & workarounds

For quick reference, here are the examples that I will show in this tutorial:

Example 1: Image Enhancement | improving the image quality of gifs prepared from highly compressed video files

Example 2: Facial Enhancement | enhancing an individual's facial features

Example 3: Colour Manipulation | colourising B&W gifs for a colourful gifset

Example 4: Artistic effects | transforming landscapes & adding artistic effects onto your gifs

Example 5: Putting it all together | my usual giffing workflow using Neural Filters

What you need & need to know:

Software: Photoshop 2021 or later (recommended: 2023 or later)*

Hardware: 8GB of RAM; having a supported GPU is highly recommended*

Difficulty: Advanced (requires a lot of patience); knowledge in gifmaking and using video timeline assumed

Key concepts: Smart Layer / Smart Filters

Benchmarking your system: Neural Filters test files**

Supplementary materials: Tutorial Resources / Detailed findings on rendering gifs with Neural Filters + known issues***

*I primarily gif on an M2 Max MacBook Pro that's running Photoshop 2024, but I also have experiences gifmaking on few other Mac models from 2012 ~ 2023.

**Using Neural Filters can be resource intensive, so it’s helpful to run the test files yourself. I’ll outline some known performance issues with Neural Filters and workarounds later in the tutorial.

***This supplementary page contains additional Neural Filters benchmark tests and instructions, as well as more information on the rendering performance (for Apple Silicon-based devices) when subject to heavy Neural Filters gifmaking workflows

Tutorial under the cut. Like / Reblog this post if you find this tutorial helpful. Linking this post as an inspo link will also be greatly appreciated!

1. Meet the Neural Filters!

Neural Filters are powered by Adobe's machine learning engine known as Adobe Sensei. It is a non-destructive method to help streamline workflows that would've been difficult and/or tedious to do manually.

Here are the Neural Filters available in Photoshop 2024:

Skin Smoothing: Removes blemishes on the skin

Smart Portrait: This a cloud-based filter that allows you to change the mood, facial age, hair, etc using the sliders+

Makeup Transfer: Applies the makeup (from a reference image) to the eyes & mouth area of your image

Landscape Mixer: Transforms the landscape of your image (e.g. seasons & time of the day, etc), based on the landscape features of a reference image

Style Transfer: Applies artistic styles e.g. texturings (from a reference image) onto your image

Harmonisation: Applies the colour balance of your image based on the lighting of the background image+

Colour Transfer: Applies the colour scheme (of a reference image) onto your image

Colourise: Adds colours onto a B&W image

Super Zoom: Zoom / crop an image without losing resolution+

Depth Blur: Blurs the background of the image

JPEG Artefacts Removal: Removes artefacts caused by JPEG compression

Photo Restoration: Enhances image quality & facial details

+These three filters aren't used in my giffing workflow. The cloud-based nature of Smart Portrait leads to disjointed looking frames. For Harmonisation, applying this on a gif causes Neural Filter timeout error. Finally, Super Zoom does not currently support output as a Smart Filter

If you're running Photoshop 2021 or earlier version of Photoshop 2022, you will see a smaller selection of Neural Filters:

Things to be aware of:

You can apply up to six Neural Filters at the same time

Filters where you can use your own reference images: Makeup Transfer (portraits only), Landscape Mixer, Style Transfer (not available in Photoshop 2021), and Colour Transfer

Later iterations of Photoshop 2023 & newer: The first three default presets for Landscape Mixer and Colour Transfer are currently broken.

2. Why I use Neural Filters?

Here are my four main Neural Filters use cases in my gifmaking process. In each use case I'll list out the filters that I use:

Enhancing Image Quality:

Common wisdom is to find the highest quality video to gif from for a media release & avoid YouTube whenever possible. However for smaller / niche media (e.g. new & upcoming musical artists), prepping gifs from highly compressed YouTube videos is inevitable.

So how do I get around with this? I have found Neural Filters pretty handy when it comes to both correcting issues from video compression & enhancing details in gifs prepared from these highly compressed video files.

Filters used: JPEG Artefacts Removal / Photo Restoration

Facial Enhancement:

When I prepare gifs from highly compressed videos, something I like to do is to enhance the facial features. This is again useful when I make gifsets from compressed videos & want to fill up my final panel with a close-up shot.

Filters used: Skin Smoothing / Makeup Transfer / Photo Restoration (Facial Enhancement slider)

Colour Manipulation:

Neural Filters is a powerful way to do advanced colour manipulation - whether I want to quickly transform the colour scheme of a gif or transform a B&W clip into something colourful.

Filters used: Colourise / Colour Transfer

Artistic Effects:

This is one of my favourite things to do with Neural Filters! I enjoy using the filters to create artistic effects by feeding textures that I've downloaded as reference images. I also enjoy using these filters to transform the overall the atmosphere of my composite gifs. The gifsets where I've leveraged Neural Filters for artistic effects could be found under this tag on usergif.

Filters used: Landscape Mixer / Style Transfer / Depth Blur

How I use Neural Filters over different stages of my gifmaking workflow:

I want to outline how I use different Neural Filters throughout my gifmaking process. This can be roughly divided into two stages:

Stage I: Enhancement and/or Colourising | Takes place early in my gifmaking process. I process a large amount of component gifs by applying Neural Filters for enhancement purposes and adding some base colourings.++

Stage II: Artistic Effects & more Colour Manipulation | Takes place when I'm assembling my component gifs in the big PSD / PSB composition file that will be my final gif panel.

I will walk through this in more detail later in the tutorial.

++I personally like to keep the size of the component gifs in their original resolution (a mixture of 1080p & 4K), to get best possible results from the Neural Filters and have more flexibility later on in my workflow. I resize & sharpen these gifs after they're placed into my final PSD composition files in Tumblr dimensions.

3. Getting started

The essence is to output Neural Filters as a Smart Filter on the smart object when working with the Video Timeline interface. Your workflow will contain the following steps:

Prepare your gif

In the frame animation interface, set the frame delay to 0.03s and convert your gif to the Video Timeline

In the Video Timeline interface, go to Filter > Neural Filters and output to a Smart Filter

Flatten or render your gif (either approach is fine). To flatten your gif, play the "flatten" action from the gif prep action pack. To render your gif as a .mov file, go to File > Export > Render Video & use the following settings.

Setting up:

o.) To get started, prepare your gifs the usual way - whether you screencap or clip videos. You should see your prepared gif in the frame animation interface as follows:

Note: As mentioned earlier, I keep the gifs in their original resolution right now because working with a larger dimension document allows more flexibility later on in my workflow. I have also found that I get higher quality results working with more pixels. I eventually do my final sharpening & resizing when I fit all of my component gifs to a main PSD composition file (that's of Tumblr dimension).

i.) To use Smart Filters, convert your gif to a Smart Video Layer.

As an aside, I like to work with everything in 0.03s until I finish everything (then correct the frame delay to 0.05s when I upload my panels onto Tumblr).

For convenience, I use my own action pack to first set the frame delay to 0.03s (highlighted in yellow) and then convert to timeline (highlighted in red) to access the Video Timeline interface. To play an action, press the play button highlighted in green.

Once you've converted this gif to a Smart Video Layer, you'll see the Video Timeline interface as follows:

ii.) Select your gif (now as a Smart Layer) and go to Filter > Neural Filters

Installing Neural Filters:

Install the individual Neural Filters that you want to use. If the filter isn't installed, it will show a cloud symbol (highlighted in yellow). If the filter is already installed, it will show a toggle button (highlighted in green)

When you toggle this button, the Neural Filters preview window will look like this (where the toggle button next to the filter that you use turns blue)

4. Using Neural Filters

Once you have installed the Neural Filters that you want to use in your gif, you can toggle on a filter and play around with the sliders until you're satisfied. Here I'll walkthrough multiple concrete examples of how I use Neural Filters in my giffing process.

Example 1: Image enhancement | sample gifset

This is my typical Stage I Neural Filters gifmaking workflow. When giffing older or more niche media releases, my main concern is the video compression that leads to a lot of artefacts in the screencapped / video clipped gifs.

To fix the artefacts from compression, I go to Filter > Neural Filters, and toggle JPEG Artefacts Removal filter. Then I choose the strength of the filter (boxed in green), output this as a Smart Filter (boxed in yellow), and press OK (boxed in red).

Note: The filter has to be fully processed before you could press the OK button!

After applying the Neural Filters, you'll see "Neural Filters" under the Smart Filters property of the smart layer

Flatten / render your gif

Example 2: Facial enhancement | sample gifset

This is my routine use case during my Stage I Neural Filters gifmaking workflow. For musical artists (e.g. Maisie Peters), YouTube is often the only place where I'm able to find some videos to prepare gifs from. However even the highest resolution video available on YouTube is highly compressed.

Go to Filter > Neural Filters and toggle on Photo Restoration. If Photoshop recognises faces in the image, there will be a "Facial Enhancement" slider under the filter settings.

Play around with the Photo Enhancement & Facial Enhancement sliders. You can also expand the "Adjustment" menu make additional adjustments e.g. remove noises and reducing different types of artefacts.

Once you're happy with the results, press OK and then flatten / render your gif.

Example 3: Colour Manipulation | sample gifset

Want to make a colourful gifset but the source video is in B&W? This is where Colourise from Neural Filters comes in handy! This same colourising approach is also very helpful for colouring poor-lit scenes as detailed in this tutorial.

Here's a B&W gif that we want to colourise:

Highly recommended: add some adjustment layers onto the B&W gif to improve the contrast & depth. This will give you higher quality results when you colourise your gif.

Go to Filter > Neural Filters and toggle on Colourise.

Make sure "Auto colour image" is enabled.

Play around with further adjustments e.g. colour balance, until you're satisfied then press OK.

Important: When you colourise a gif, you need to double check that the resulting skin tone is accurate to real life. I personally go to Google Images and search up photoshoots of the individual / character that I'm giffing for quick reference.

Add additional adjustment layers until you're happy with the colouring of the skin tone.

Once you're happy with the additional adjustments, flatten / render your gif. And voila!

Note: For Colour Manipulation, I use Colourise in my Stage I workflow and Colour Transfer in my Stage II workflow to do other types of colour manipulations (e.g. transforming the colour scheme of the component gifs)

Example 4: Artistic Effects | sample gifset

This is where I use Neural Filters for the bulk of my Stage II workflow: the most enjoyable stage in my editing process!

Normally I would be working with my big composition files with multiple component gifs inside it. To begin the fun, drag a component gif (in PSD file) to the main PSD composition file.

Resize this gif in the composition file until you're happy with the placement

Duplicate this gif. Sharpen the bottom layer (highlighted in yellow), and then select the top layer (highlighted in green) & go to Filter > Neural Filters

I like to use Style Transfer and Landscape Mixer to create artistic effects from Neural Filters. In this particular example, I've chosen Landscape Mixer

Select a preset or feed a custom image to the filter (here I chose a texture that I've on my computer)

Play around with the different sliders e.g. time of the day / seasons

Important: uncheck "Harmonise Subject" & "Preserve Subject" - these two settings are known to cause performance issues when you render a multiframe smart object (e.g. for a gif)

Once you're happy with the artistic effect, press OK

To ensure you preserve the actual subject you want to gif (bc Preserve Subject is unchecked), add a layer mask onto the top layer (with Neural Filters) and mask out the facial region. You might need to play around with the Layer Mask Position keyframes or Rotoscope your subject in the process.

After you're happy with the masking, flatten / render this composition file and voila!

Example 5: Putting it all together | sample gifset

Let's recap on the Neural Filters gifmaking workflow and where Stage I and Stage II fit in my gifmaking process:

i. Preparing & enhancing the component gifs

Prepare all component gifs and convert them to smart layers

Stage I: Add base colourings & apply Photo Restoration / JPEG Artefacts Removal to enhance the gif's image quality

Flatten all of these component gifs and convert them back to Smart Video Layers (this process can take a lot of time)

Some of these enhanced gifs will be Rotoscoped so this is done before adding the gifs to the big PSD composition file

ii. Setting up the big PSD composition file

Make a separate PSD composition file (Ctrl / Cmmd + N) that's of Tumblr dimension (e.g. 540px in width)

Drag all of the component gifs used into this PSD composition file

Enable Video Timeline and trim the work area

In the composition file, resize / move the component gifs until you're happy with the placement & sharpen these gifs if you haven't already done so

Duplicate the layers that you want to use Neural Filters on

iii. Working with Neural Filters in the PSD composition file

Stage II: Neural Filters to create artistic effects / more colour manipulations!

Mask the smart layers with Neural Filters to both preserve the subject and avoid colouring issues from the filters

Flatten / render the PSD composition file: the more component gifs in your composition file, the longer the exporting will take. (I prefer to render the composition file into a .mov clip to prevent overriding a file that I've spent effort putting together.)

Note: In some of my layout gifsets (where I've heavily used Neural Filters in Stage II), the rendering time for the panel took more than 20 minutes. This is one of the rare instances where I was maxing out my computer's memory.

Useful things to take note of:

Important: If you're using Neural Filters for Colour Manipulation or Artistic Effects, you need to take a lot of care ensuring that the skin tone of nonwhite characters / individuals is accurately coloured

Use the Facial Enhancement slider from Photo Restoration in moderation, if you max out the slider value you risk oversharpening your gif later on in your gifmaking workflow

You will get higher quality results from Neural Filters by working with larger image dimensions: This gives Neural Filters more pixels to work with. You also get better quality results by feeding higher resolution reference images to the Neural Filters.

Makeup Transfer is more stable when the person / character has minimal motion in your gif

You might get unexpected results from Landscape Mixer if you feed a reference image that don't feature a distinctive landscape. This is not always a bad thing: for instance, I have used this texture as a reference image for Landscape Mixer, to create the shimmery effects as seen in this gifset

5. Testing your system

If this is the first time you're applying Neural Filters directly onto a gif, it will be helpful to test out your system yourself. This will help:

Gauge the expected rendering time that you'll need to wait for your gif to export, given specific Neural Filters that you've used

Identify potential performance issues when you render the gif: this is important and will determine whether you will need to fully playback your gif before flattening / rendering the file.

Understand how your system's resources are being utilised: Inputs from Windows PC users & Mac users alike are welcome!

About the Neural Filters test files:

Contains six distinct files, each using different Neural Filters

Two sizes of test files: one copy in full HD (1080p) and another copy downsized to 540px

One folder containing the flattened / rendered test files

How to use the Neural Filters test files:

What you need:

Photoshop 2022 or newer (recommended: 2023 or later)

Install the following Neural Filters: Landscape Mixer / Style Transfer / Colour Transfer / Colourise / Photo Restoration / Depth Blur

Recommended for some Apple Silicon-based MacBook Pro models: Enable High Power Mode

How to use the test files:

For optimal performance, close all background apps

Open a test file

Flatten the test file into frames (load this action pack & play the “flatten” action)

Take note of the time it takes until you’re directed to the frame animation interface 

Compare the rendered frames to the expected results in this folder: check that all of the frames look the same. If they don't, you will need to fully playback the test file in full before flattening the file.†

Re-run the test file without the Neural Filters and take note of how long it takes before you're directed to the frame animation interface

Recommended: Take note of how your system is utilised during the rendering process (more info here for MacOS users)

†This is a performance issue known as flickering that I will discuss in the next section. If you come across this, you'll have to playback a gif where you've used Neural Filters (on the video timeline) in full, prior to flattening / rendering it.

Factors that could affect the rendering performance / time (more info):

The number of frames, dimension, and colour bit depth of your gif

If you use Neural Filters with facial recognition features, the rendering time will be affected by the number of characters / individuals in your gif

Most resource intensive filters (powered by largest machine learning models): Landscape Mixer / Photo Restoration (with Facial Enhancement) / and JPEG Artefacts Removal

Least resource intensive filters (smallest machine learning models): Colour Transfer / Colourise

The number of Neural Filters that you apply at once / The number of component gifs with Neural Filters in your PSD file

Your system: system memory, the GPU, and the architecture of the system's CPU+++

+++ Rendering a gif with Neural Filters demands a lot of system memory & GPU horsepower. Rendering will be faster & more reliable on newer computers, as these systems have CPU & GPU with more modern instruction sets that are geared towards machine learning-based tasks.

Additionally, the unified memory architecture of Apple Silicon M-series chips are found to be quite efficient at processing Neural Filters.

6. Performance issues & workarounds

Common Performance issues:

I will discuss several common issues related to rendering or exporting a multi-frame smart object (e.g. your composite gif) that uses Neural Filters below. This is commonly caused by insufficient system memory and/or the GPU.

Flickering frames: in the flattened / rendered file, Neural Filters aren't applied to some of the frames+-+

Scrambled frames: the frames in the flattened / rendered file isn't in order

Neural Filters exceeded the timeout limit error: this is normally a software related issue

Long export / rendering time: long rendering time is expected in heavy workflows

Laggy Photoshop / system interface: having to wait quite a long time to preview the next frame on the timeline

Issues with Landscape Mixer: Using the filter gives ill-defined defined results (Common in older systems)--

Workarounds:

Workarounds that could reduce unreliable rendering performance & long rendering time:

Close other apps running in the background

Work with smaller colour bit depth (i.e. 8-bit rather than 16-bit)

Downsize your gif before converting to the video timeline-+-

Try to keep the number of frames as low as possible

Avoid stacking multiple Neural Filters at once. Try applying & rendering the filters that you want one by one

Specific workarounds for specific issues:

How to resolve flickering frames: If you come across flickering, you will need to playback your gif on the video timeline in full to find the frames where the filter isn't applied. You will need to select all of the frames to allow Photoshop to reprocess these, before you render your gif.+-+

What to do if you come across Neural Filters timeout error? This is caused by several incompatible Neural Filters e.g. Harmonisation (both the filter itself and as a setting in Landscape Mixer), Scratch Reduction in Photo Restoration, and trying to stack multiple Neural Filters with facial recognition features.

If the timeout error is caused by stacking multiple filters, a feasible workaround is to apply the Neural Filters that you want to use one by one over multiple rendering sessions, rather all of them in one go.

+-+This is a very common issue for Apple Silicon-based Macs. Flickering happens when a gif with Neural Filters is rendered without being previously played back in the timeline.

This issue is likely related to the memory bandwidth & the GPU cores of the chips, because not all Apple Silicon-based Macs exhibit this behaviour (i.e. devices equipped with Max / Ultra M-series chips are mostly unaffected).

-- As mentioned in the supplementary page, Landscape Mixer requires a lot of GPU horsepower to be fully rendered. For older systems (pre-2017 builds), there are no workarounds other than to avoid using this filter.

-+- For smaller dimensions, the size of the machine learning models powering the filters play an outsized role in the rendering time (i.e. marginal reduction in rendering time when downsizing 1080p file to Tumblr dimensions). If you use filters powered by larger models e.g. Landscape Mixer and Photo Restoration, you will need to be very patient when exporting your gif.

7. More useful resources on using Neural Filters

Creating animations with Neural Filters effects | Max Novak

Using Neural Filters to colour correct by @edteachs

I hope this is helpful! If you have any questions or need any help related to the tutorial, feel free to send me an ask 💖

[xiaolanhua]

Hello!

I absolutely love your edits and gifs. I was thinking about making edits/gifs too but I'm not sure where to start : ( Would you be able to share some resources? Or any tips you have for someone that's just starting out? I'm not even sure where to download the videos from :/

Thank you in advance!

hello!! omg thank you so much for liking my gifs 🥹🫶🫶

Of course! In this post I'll share some tips that I think are helpful when making gifs, specially from asian dramas (mostly chinese and korean)!

Where to download k/cdrama videos?

dramaday (korean media only)

mkvdrama (korean, chinese, japanese, thai etc)

avistaz.to (they have the most complete catalog of asian dramas but you can only have access to the files if you register and they open for registration only every now and then so if you want to join, you have to have a invite or wait till they open)

2. Where to make gifs?

Mostly, the gifs on this website are done using Adobe Photoshop but I think for the past few years there is a lot of users who use Photopea which is an online (and free) version of photoshop.

3. How to make gifs?

Well, I think there's a some ways of making gifs but the 2 most common are through screencapping and using vapoursynth. Before I knew how to use and install vapoursynth I used the screencap method a LOT so I totally recommend you to begin giffing using the screencap method before you try other ways of giffing. Also, with this method, you can use on both Photoshop and Photopea.

In this gif tutorial made by @kylos you can learn how to install the program mpv to take screencaps and how to make gifs using the captures.

There's this complete guide on how to gif made by @cillianmurphy that is very helpful.

Also, this comprehensive giffing tutorial by @redbelles is great!

But if you want to know how to gif using vapoursynth (if you are an MAC user), i totally recommend this how to install post and COMPREHENSIVE GIFFING TUTORIAL (vapoursynth + ps cc 2018) post, both from my beloved @dingyuxi 🫶

If you don't have Photoshop and want to make gifs using Photopea, I think this and this tutorials will be great for you.

4. How to color?

Coloring gifs is something very personal to each gifmaker but if you want to know how to start doing it, i recommend you these tutorials:

becca’s mega coloring tutorial by @nataliescatorccio

coloring tutorial by @magnusedom

simple gif colouring for beginners by @kinnbig (specially focused on east & south east asian skin tones)

Finally, I recommend you looking at the resource directory from @usergif because they have a collection of tutorials and resources that are very handy when making gifs!

If you have any particular question from how I gif, I will gladly answer!

[thewisewill80sbyers]

HOW TO MAKE GIFS

DISCLAIMER: I am NOT an expert, my whole process is more sheer luck and a few mental breakdowns, followed another tutorial that I can't find again and just learned the rest by messing around in photoshop, but I'll try to explain what I do when I make gifs because people have asked me to! Hopefully it will be understandable lol if there's a better way to do things I simply do not know

First, to make GIFs you have to have a program like Photoshop installed in your pc, I use Adobe Photoshop 2024 - to download that you need to either buy it or just google how to do it because I do not wish to take on the responsibility of explaining how to do that in the wrong way and messing up your pc... when you have that, you need the file from which you are going to take the frames that you're going to transform into our gifs, basically a video is a group of pictures that are in sequence and move really, really fast, so they appear as a video in our brains - the frames are the singular pictures! When you want to make gifs always search for files video that have at least 1080p or higher as the resolution (basically the quality of the image, full HD - idk the specifics, google it lol)

once you have the file video in your pc you need a video player that takes very fast screenshots/stills automatically, I use this one called GOM player which is free, but you can use whatever you like, you just need to check if they have the option to screencapture...

Once you have opened the video in your player:

-> right click on the video -> video -> advanced screen capture

click on that and it will open the option to take the screencaps, make sure the parameters are these ones and choose a folder in your pc where you're going to save all the images we're using to make the gif - you can choose from the ''custom'' option with those 3 points you see - basically that's the ''adress/location'' where you're telling your pc to put all the frames, make a folder for that specifically

then go to the part of the video that you want to GIF and click play a bit before that starts, then click on '' burst capture'' and it will start saving them - oh also you can change the '' burst interval'' depending on what you need, if you increase it you have fewer images to process and the GIF goes faster basically, if you choose a lower number like 3 etc. you get more pictures, anyway I usually keep it around 7 more or less...

once we have the frames saved, I go look in that folder and organize them in smaller files with the frames that I want to use for the gifs like this:

you can also just upload them all if you want and cut them after but it will probably crash photoshop and for me it takes more time than what it's saving!

okay now, put that aside and open photoshop, then go in file -> script -> load files into stack

it opens this (sorry I have it all in italian and can't change it) - make sure you open a folder instead of single files by changing from ''files'' to the other option which should be folder I think idk the translation in english now I hope it's correct lmao - then go in ''browse'' and find the folder inside your pc where you saved the screencaps - select the folder and click ok, it opens them up inside the little square - then you click ok again here, and it will open them inside photoshop

you need to make sure you have the ''timeline'' window enabled, go in ''windows'' (finestra) and find where timeline is and click it so that photoshop will show it, you also need to have the layers enabled (livelli)

(then after you can also create actions so you can do stuff faster because you just need to record it once, and you can then click that and Photoshop does it for you)

once you have that, you need to click ''create frame animation'' that you can find where you see the ''create video timeline'' just click on the little arrow down and change it, then click on ''select all layers'', you can find that option in the part of the options up near where the window option is - it should say select -> all layers

then go down again and go where the arrow says here:

open that and click ''make frames from layers'' and it will open the frames in sequence inside the timeline, once you have that click on ''select all frames'' and ''invert'' them - you find both options inside the same place where the red arrow is pointing in the previous screenshot I put here... now you have them in order and you can play the preview if you want - with the play options, but you need to choose the speed - select all the frames again and then open the little arrow near the 0 sec - which will open this where you can change the speed - I use either 0,1 sec or 0,05 - to put 0,05 you open the ''altro'' and personalize it how you want - try to see what looks the best by trying with the preview of the animation

once you have the speed you want, make sure you have the loop enabled with '' forever'' - then I crop the image how I want the gif to be, use the crop option, decide how you want your gif to be etc and then click the ok button, and it crops the whole gif

okay after this I do the sharpening of the gif, select all the frames again - then go here

click that and then select all the layers again like before, then go in '' filter'' right next to select - always in the section up on the left of the screen - open filter and then convert in smart object (filtro -> converti per filtri avanzati - sorry I'm not sure if my translation is the same as photoshop so hopefully you find it )

click that, then go in filters again then in ''sharpen'' -> smart/advanced sharpen -> then I do this 2 times

the first time I use these parameters

the second time I use these (basically repeat the process - sharpen - advanced sharpen - and copy the numbers you see here etc )

you can save these so you don't have to put them every time - after you put all the numbers click on the little arrow where you see ''SH1'' and do the ''save '' option and name it as you wish - so the next time you go to sharpen you have it saved already -

anyway do this ''sharpen 1'' and then ''sharpen 2'' - you can also mess around with the values and see in the preview what looks the best to you, sometimes these are not the best depending on the quality of the images, there are other ways to sharpen, I found this tutorial here too if you want to check it out (again my own knowledge comes more from trial and error)

okay now that we have sharpened our Queer Mike Wheeler gif we can modify the size of the image, if you want to post it on tumblr I use 540px, but you can make them smaller if you want - look up the best size for tumblr gifsets on google

so go in ''image'' -> modify size -> and put 540px

basically change whatever number is in there to 540 then do ok, and it will resize your GIF

then we can start the coloring, I found this tutorial already made, it's always the same thing anyway, you just have to mess around with the options and see what looks the best in your opinion, this is like completely personal, you do what you want!

once you're done with that you can see them there

and you can even copy them to the other GIFs you will make if you want to have the same exact coloring for all of them, you just drag them to the other GIF file, keep them both open and drag (for example ''valori tonali 1'') them in the ''layers''(livelli) square of the other file, and it copies them on top of your GIFs doing the coloring again - or you can save them with the actions too if you want -

now to save the GIF go in file -> export -> save for web

put these parameters (I'm sorry, I do not know the translation for this ç_ç )

make sure it's not bigger than 9.7 M - make sure that you have the loop enabled on forever, test the preview and then save it, name it as you wish and keep the .gif format

IF your GIF is bigger than 10mb you can trim it after, basically save it anyway then open the GIF in a new Photoshop window by dragging it inside the program, you have all the frames on the timeline, every few frames delete one frame, then skip a few and delete another etc - then save the GIF again with the same process as before and check if the MB has reduced, make sure to check the animation because if you eliminate too many frames the GIFs speeds up too much, and it looks superfast like a hamster on drugs, and you don't want that, usually to avoid this try to not have too many frames when you're starting to make the GIF, I try to use less than 80 frames, or cut the GIF if the scene is too long, and it usually stays under 10mb - basically you can't upload it on Tumblr if it's bigger than that -

anyway... that's it!! here's our sus Mike Wheeler gif

Let me know if you need help with anything and if you use this, tag me in the comments because I want to see the GIFs you made!!

I'm sure you can find better tutorials online, but I tried my best lol enjoy and happy editing!!

[valdevia]

Sorry if you've been asked this before but do you have/know any good tutorials for photoshop art like yours? Your stuff looks so cool!! (And I'm always looking to add another creative project to the rotating selection my brain takes turns latching onto lol)

I do have 5+ hours of tutorials on my Patreon! Goes from the very basics of Photoshop to more advanced techniques, how I find photos...

It's available at any tier, so you only need to subscribe once to get full access to it! And I should also mention that at the 2nd and 3rd tier you also get collectible photo cards, so it's a pretty sweet deal! Look:

[usergif]

RESOURCE DIRECTORY 2.0 + HOW TO NAVIGATE USERGIF

Hello! We hit 10k followers! I want to take this moment to thank all our wonderful followers and the talented members of usergif! We created this blog less than 2 years ago and are constantly blown away by your support and beautiful creations. As a thank-you, we're proud to announce our new and improved resource directory!!! Shout out to arithemes' custom page which allowed us to create a more streamlined and organized directory for everyone to use. Under the cut, you'll find a guide to help you find exactly the resource you're looking for on our blog. Happy gifmaking! :)

THE UPDATED DIRECTORY

All resources are in alphabetical order first by the creator's URL (at the time of entry), then by the resource's title. Each title is a clickable link that'll redirect you to the original post. Beneath that, you'll find the creator's URL and the resource's relevant filter tags:

As always, whenever I add new entries to the directory, you'll see the last date listed on the right side of the blog here:

If you don't see one of your recent tutorials listed there, please be patient. I update the directory on a monthly basis, but only add resources that have already exited our queue.

THE FILTERS

Please note: the Source section has exclusive filters, meaning you can only select one at a time. In the Type and Effects sections, you can select as many filters as you want. However, if you select 2 filters in one section, like "animated" and "blending," it'll show results for any resource with either of those tags, not necessarily resources that include both of those tags.

Here's a breakdown of how we categorize our resources:

Source: ↳ all: posted by any creator ↳ usergif: posted by usergif

Type: ↳ all: click this to reset filter selections ↳ action: pre-recorded photoshop functions that can be replayed ↳ basics: non-effects-related resources to help new gifmakers get their feet off the ground (please remember usergif is not a resource for beginner-level gifs and focuses on intermediate to advanced gif effects. however, we thought it would be helpful to keep some basic resources available) ↳ brush: various brush shapes like ripped paper edges or intricate textures ↳ fonts: names and links to fonts or font packs ↳ template: pre-made, downloadable layouts and designs ↳ texture: overlays that add a different finish to a gif such as Ben Day dots (retro comic dots) or glitter ↳ tutorial: any post that provides an explanation for a gif effects process ↳ other

Effect: ↳ all: click this to reset filter selections ↳ animated: an effect that applies movement to an element such as rotating text or wiggling shapes ↳ blending: aka double exposure, this effect combines two or more gifs layered on top of each other ↳ color: specifically for color manipulation, an effect in which the original colors are completely different (e.g. a blue sky colored to look pink) ↳ glitch: an effect where color channels are toggled and layered over the original gif to give a flickering effect ↳ layout: multiple gifs on one canvas like a collage (e.g. hexagon layout) or poster-style templates ↳ overlay: an added element layered above a gif (excluding text) such as a shape, another gif confined to a shape, a texture, etc. ↳ transition: an effect that stylizes the passage from one scene/clip into another, such as a fade, glitch, linear wipe, or motion blur transition ↳ typography: any kind of stylized text added over a gif (does not include basic captions)

You can find examples of all these gif effects via their respective tags on our Nav!

THE SEARCH BAR

This search bar functions the same way as the search bar in the upper right corner of our main blog and the search function on Tumblr's mobile app.

Tumblr search allows you to generate results using keywords found in the body of the post or the tags. So, if you're looking for a post but can only remember it having the word "rotoscoping," you can type that in either in the directory's search or blog's search and find any post on our blog that mentions the exact keyword "rotoscoping."

THE NAV & TAGS

Tags function differently from search keywords as these relate to exact words and phrases found only in the tags, not the body of the post. Our members use tags to categorize original posts and reblogs. Some of our most frequently used tags are listed on our Navigation Page and saved in the mobile search function pictured below:

But if you ever want to quickly navigate a tag, simply add /tagged/word to the end of our url to find that tag! For example, if you want to see all the posts we've tagged as a #tutorial, just go to usergif.tumblr.com/tagged/tutorial.

BROKEN LINKS

Whether it's due to a creator frequently changing their url, the absence of an automatic blog redirect, or my own mistakes when coding the directory — you may stumble upon a broken link. Here's what to do:

If a creator has changed their username but their blog doesn't automatically redirect you to the new blog, check if they listed their new user name in the title of their old blog like I did:

In this case, simply replace the url you landed on with this new url. For example, https://sith-maul.tumblr.com/post/692130400398704640/how-to-make-an-animated-google-search-overlay-a → would become → https://cal-kestis.tumblr.com/post/692130400398704640/how-to-make-an-animated-google-search-overlay-a

However, if you can't figure out the creator's new url or in the case that I messed up the link due to human error, feel free to send us a message so I can help find the source or correct the mistake!

WHERE TO FIND THIS INFO AGAIN

If you ever need to access this guide while using the directory, simply click the "i" button here:

And that's it! We hope this revamped directory is a lot more efficient and helpful. Thank you again for all your support and for helping us reach this follower milestone!

[mikelogan]

hi! i love your gifs and your tutorials, you explain things very well and i was wondering if you could explain how you colour gifs that are already black and white? thank you so much in advance if you're able to do this :)

hi! first of all, thank you so much! i really appreciate it :) as always, i'm more than happy to help however i can! below the cut, i'll show you my coloring process for roman holiday!

step 1: bring your source material into photoshop however you prefer. i work with video clips rather than screen caps, so i'll go to file > import video frames to layers and select the portion of the clip i want to make a gif of. from there, i get rid of any extra frames and crop my gif to the desired dimensions (in this case, it's 540x540) then sharpen and convert to timeline.

on its own, there's really nothing wrong with the gif. if anything, it could be brightened up. with black and white source material, i prefer to go with the bare minimum.

step 2: time for the adjustment layers!

as always, i start with a blank (meaning i leave the values unchanged) brightness/contrast layer set to screen. you may need to play with the opacity on this layer as it could really blow out the image if your scene is already fairly bright. for this scene, i dropped it down to 60%.

i do still add a curves layer, just to keep things looking balanced. using the black eye dropper, i click on the blackest part of the image and then use the white eyedropper to select the whitest part. after these two layers, i'm left with this:

in my opinion, you could leave it like this and be good, but for roman holiday specifically, i did add two more adjustment layers: selective color and a gradient map. here are my settings:

and that's all she wrote! i just like greater contrast and really deep blacks. this is the final product on the left and the original on the right:

if you have any questions about this tutorial or anything else, let me know!

[kinnbig]

this is going to sound like a dumb question, but hi! i happened to stumble over your coloring tutorial from back in february, and i was wondering how did you managed the linear transition to show the difference between the of scene and the one you edited. thank you so much for your time.

✨ gif transitions using clipping masks and keyframes ✨

hi!! it’s not a dumb question at all, thank you for asking! I think this is the gif you mean, from my gif colouring tutorial. to do the transition I used clipping masks and keyframes - full explanation beneath the cut!

(I apologise in advance if any of this is confusing - to be honest I worked this out by just fucking around and guessing on photoshop, so it took me a little while to reverse-engineer my steps to work out what I did lol - but I hope it makes sense!)

so the first step is to make your gifs. you need two - one coloured and one uncoloured, saved separately. make sure that they are both the exact same number of frames, and that they're both running at the same frame-rate.

load both gifs into photoshop and put them in timeline mode. then copy the uncoloured gif and paste it onto the same timeline as your coloured gif, with the uncoloured gif on top. like this:

next, add a layer that is just a white rectangle of the same size and shape as your gif. my rectangle tool is hidden in a secret pop up menu attached to my line tool, for some reason:

put this rectangle layer between the coloured and uncoloured gif layers, and then clip the uncoloured gif layer to this rectangle by right-clicking on the uncoloured gif in the layers panel and selecting 'create clipping mask'. this will automatically clip the gif to the rectangle layer beneath it.

now your layers panel should look like this:

at this point I personally hide the visibility of my uncoloured gif layer, just to make it easier to see what I'm doing. like this:

which should mean your gif just looks like a white rectangle. this seems wrong but it's not!!

and now we need to fuck around with keyframes. basically what we're doing is telling the rectangle to move out of the way while the gif is running.

to start using keyframes, click the little arrow on the left hand side of your rectangle layer in the timeline panel -

which should bring up this drop-down menu.

now, with the red timeline bar set to the very beginning of the gif, click on the little stopwatch button next to 'Position' and also 'Vector mask position'. it should put some little diamonds on the timeline, like this:

next, take your white rectangle layer and move it just off the right edge of the gif canvas, like this:

(you can't see it because it's not in the canvas, but photoshop still knows it's there!)

then move your timeline bar to about 4/5 of the way through your gif, and click on the stopwatch icons next to 'position' and 'vector mask position' again. like this:

now, if you slide your timeline bar back and forward between those two points you marked, you should see the white box moving across the gif - from its first position covering the gif, to its second position just off the canvas.

now you can make your uncoloured gif visible again - and it should look like a transition between an uncoloured and a coloured gif when you move the timeline bar around.

save as normal!!

you might want to mess around a bit with where you put those second keyframe markers depending on how long you want the completed coloured gif visible before the gif replays - just play with it and see what works for you.

sometimes I find using keyframes makes the frame-rate a bit weird when you save the gif - if that happens just save as usual and open the saved gif to fix the frame-rate afterwards.

I hope this was helpful!! lmk if you have any more questions :D

[novella-november]

So uh, how are you planning to enforce the "no AI" rule? What do you plan to do if a participant is accused of using unacceptable software?

There's no submissions and no enforcement.

If someone is posting the in #Novella November & #NovellaNovember tags:

clearly-AI generated content (such as AI-generated book covers)

bragging about using AI

Talking about how they used x AI program to make X part of the book

etc

Then I can guarantee you they're going to simply be blocked by a few thousand writers en masse.

Probably they will get at least a few people trying to talk to them about the harm that AI does, and better alternatives that don't mass-steal from a few million unconsenting people--

alternatives like:

finding someone to partner with to discuss your ideas for brainstorming instead of asking an AI chatbot

.

Joining a "secret gift" group where everyone digitally "pulls a name out of a hat" or is randomly selected to make a cover for someone else's book idea

.

commissioning an actual artist for a cover

.

youtube tutorials on how to use GIMP as a free Photoshop alternative to make your own cover, with links to sites such as Pexels that have free stockphotos for anyone to use

.

Choosing a lower, more manageable daily word count goal if 1k or 500 is too out of line with your work schedule/ability to write on your own instead of resorting to AI generation to try to make up the difference out of anxiety

.

finding alternative medias to 'write' with, such as using an app on your phone or the in-built accessibility features on Windows that let you use your voice to type, so if you can't physically type or write with your hands or other limbs, you can instead dictate your novel outloud, which would also work if you are often away from home or can't actively use your phone but *can* record your voice passively as you work with your hands on another task :)

so...... yeah.

Literally the only things that would happen if someone tries to use AI in the #Novella November and #NovellaNovember tags would be the writing community collectively:

attempting some outreach; education is key to realizing the harm being done, after all! Maybe the person just doesn't know any better, and felt like that was their only option to reach their goal.

blocking the person, and if they're actively malicious in their AI use (such as fully knowing how much it harms writers/artists, how much of it is based on plagarism, or actively going out of their way to steal other people's work) people will probably start warning others about them as well so they can be blocked in advance, the same as other people who are harmful to communities.

This is a community initiative, spearheaded by this blog purely because I came up with the idea first and want to make sure that, at least to start out and as long as I can manage it, the community is the key part of being supporting and caring of each other, because billion dollar tech companies and those who are swayed by their money sure as heck aren't going to stand with us.

If someone is ""accused of using unacceptable software"" ..... they're just gonna get blocked if they're posting AI generated content, like everyone else who posts AI generated content get blocked by the community at large as they're encountered.

I'll repeat again: this is a community initiative, not an organization. There's no submissions people are sending anywhere to "confirm" word counts; --

Only:

people posting their celebrations and woes in the tag,

posting their frustrations and questions,

receiving answers and advice from the community,

sharing art and snippets, making covers, making decorative goal cards,

No AI is allowed in Novella November -- if people are posting or bragging about using AI generated content, they're simply going to be announcing themselves to thousands of writers (plus everyone who follows those writers) that they're a good person to block and never interact with 🤷

[tau1tvec]

Hello! I was wondering if you can share a mini tutorial on how you are able to capture full body pics of your sims in ts3, without them looking so awkward. Thank you in advance! :)

I don’t think I do anything really special enough to put into a tutorial.

Mainly I just use the TAB camera and SHIFT+A or SHIFT+D keys, until everything’s sideways, screenshot at a buncha different angles, then I rotate them in Photoshop to get longer pictures, and pick the best ones.

There’s a ton of keys you can use in TAB ( Movie Making Mode ) that can pan and zoom the camera. Try and mess around with them, while pulling inspiration from your favorite fashion editorials, print ads, and films even. There really isn’t a wrong or awkward way to take full body pictures imo, so don’t hesitant to experiment with the tools that’re available to you.