a responsive theme with sidebar and support for npf posts.
preview and install / preview + code
features:
responsive.
support for npf posts.
450px, 500px, 540px and 600px post widths.
optional: update and menu tabs, toggle tags, sidebar icon and image, dark mode.
custom sidebar description.
notes:
by leaving "custom description" blank, the original blog description will automatically appear (for this to work, the show description option must be turned on).
the search bar will not appear if the "hide from search" option is checked.
tf you leave the "update text", "currently…" and "link title" fields blank, the space allocated for them will not appear.
sidebar image credits | sidebar icon credits | full credits
This is part 2 of my own personal gifmaking guide. Please read Part 1 to learn about how I capture the sequential screencaps to make my gifs.
Once you have your screencaps, open Photopea. They have a very simple guide on how to make animations in their help guide. I will be going into much more detail.
Note: ***Tumblr has a limit of 10mb for the filesize of each gif, and recommends no wider than 540 pixels. If your gif is wider than 540 pixels Tumblr will resize it, and it will cause the quality to be reduced, and also take much longer for the gif to load in your post.***
1. RENAME CAPS:
First things first. Rename all of your caps that you will be using for a gif to have the prefix _a_ on your computer. Select all and right-click on the FIRST file and select Rename (windows) and type _a_. Windows will add the numbers.
For most gifs, try not to have more than 60 frames as it will make the gif too large to upload to Tumblr. I usually aim for 45-50 frames max for most of my gifs.
2. IMPORT FRAME #1:
Drag and Drop _a_ (1).png into Photopea. Rename the layer from Background to _a_ (1)
3. IMPORT IMAGES:
Select all the rest of your images from the folder on your computer, and drag and drop ON TOP OF the image (not the layers section). Make sure the file you grab to drag/drop is the next one in the sequence (so _a_ (2).png in this case. Otherwise they will be out of order. If you do it right, you will see the layers section on the right get populated with your caps in reverse order, with 1 at the bottom and the last one at the top.
4. RASTERIZE:
Next, select all of the layers (on the right, by holding CTRL and clicking on each layer), go to Layer > Rasterize. They are currently Smart Layers, and if you keep them this way the sharpening will not apply (for some reason, I have no idea why that is)
5. CROP:
Next, crop your gif. This tool is on the left menu. You do not have to have all the layers selected for this, it will crop all layers together. Move the blue lines at the edges until the frame is cropped how you like. Be mindful of the character moving in other frames; you may want to check your other layers to make sure nothing important gets cropped off in another frame. Once the blue lines are where you want them, click the checkmark at the top right to finish the crop.
6. RESIZE:
Resize your gif so that it is 540 pixels wide. Go to Image > Image Size in the top menu. Make sure you choose "Bicubic Sharper" as the resample mode. Once this is done, you will see your image is tiny, so go to the Zoom tool (on the left menu, the magnifying glass near the bottom) and select Fit the Area at the top of the screen so you can see what you are doing.
7. SHARPEN:
Next is sharpen. Select all your layers again (on the right), then go to the top menu: Filter > Sharpen > Smart Sharpen. The default settings here are for 150%, and that is good for most things.
8. ADJUSTMENTS
This is the tricky part. You now need to adjust the brightness, contrast, exposure, color balance, and saturation. This will vary from gif to gif how much to adjust these values. I will show how I adjusted this one and you can apply that to whatever gif you are making.
For starters, since this show is SO DARK, you will need to brighten it. There are many ways to do this, but I found the method that works best for me is adjusting the Levels.
First off, in order to make adjustments, make sure you scroll all the way to the top of your Layers panel and make sure only the TOP LAYER is selected. Otherwise the adjustments will only be applied to whatever is BELOW the selected layer. You want all of them.
8a. ADJUST LEVELS
Next, go to Layer > New Adjustment Layer to pull up all your adjustments. For this first example we will use Levels, which is the second from the top.
You will see a histogram like this one:
This is a lot of information about the image, but pay attention to where the curve starts and stops. On the left, you see a "0". That is your dark point. This image is slightly washed out so I need to move that adjustment to the right so that the little square is just below where the curve starts. The third number is "255" and this is your bright point. The images are very dark so most of the graph is shifted to the left (dark) so in order to brighten, move the third square (the white one) so that the second square (grey one) is just at the edge of where the curve drops off on the right.
You can now see the numbers changed. Moving the first dark square will enhance your contrast, and moving the THIRD square will enhance your brightness. It is usually not necessary to move the second square, but you can experiment with this by moving things around and seeing how it affects your image. After this, it may be necessary to also increase the Exposure and Brightness if it is still not bright enough, but most of that can be done here.
8b. ADJUST COLOR BALANCE
Again go to your Layer > New Adjustment Layer > Color Balance to get this tool. This is a neat one with A LOT of variables, so play around with it to get the colors to look how you want. A lot of the raw video tends to have a bluish or greenish cast to it, so you just move the sliders to get rid of the cast and make the colors look how they are SUPPOSED to.
In this case there is a very slight greenish cast to the pictures so I will adjust that slider to compensate. The Range (at the top) you can select Shadows, Midtones, or Highlights, depending on where the color cast is located. Usually I stick to Shadows but sometimes will use Midtones if the color cast is really bad. Make sure Preserve Luminosity is checked.
8c: ADJUST SATURATION
Layer > New Adjustment Layer > Hue/Saturation. This will brighten up your colors. This tool is VERY COOL in that you can select color families to selectively increase or decrease the saturation of. Under Range you can choose Master, which is all colors, or choose only Red, Yellow, Green, Cyan, Blue or Magenta. The slider at the very bottom (when a single color is selected) allows you to set the range of colors to. I chose Master and increased the saturation of all colors, but be careful as this can make skintones look VERY orange. So select other colors in the Range to adjust single colors only.
With this tool you can also change the HUE (which is changing the overall colors to a different color, like shifting all the reds to orange) and Lightness (which may or may not be necessary if you did the Levels correctly)
If you need to go back and change something in your adjustment layers, you can do so by clicking on the white box in the Layers section next to whatever you need to adjust.
There are many other Adjustment Layers you can play with, so have fun and experiment!
9. ADD YOUR WATERMARK AND TEXT
Next, you can add a watermark if you have a premade file, by dragging and dropping it on the image. Then move it around to where you want it, resize it if needed, and change the opacity if it is too bright. Make sure this layer is the TOP layer.
To add text (for subtitles or effects) simply click on the Text icon in the left menu (the T) and click anywhere on the image and start typing. You can change the font, color, size, and style in the menu on the top. Move the text around by using the Select tool (arrow on the left) Again make sure this is the TOP LAYER so that it will be present over the entire gif.
10: EXPORT YOUR GIF
File > Export as > GIF
A pop up dialog will appear and you can change some settings here if you want. I usually don't. Pay close attention to the filesize (at the bottom) and make sure it is under 10mb. Keep the quality at 100%. And most importantly MAKE SURE DITHER is checked! This will prevent compression artifacts from ruining your gif.
a responsive theme with sidebar and support for npf posts.
preview and install / preview + code
features:
responsive.
support for npf posts.
450px, 500px, 540px and 600px post widths.
optional: update and menu tabs, toggle tags, sidebar icon and image, dark mode.
custom sidebar description.
notes:
by leaving "custom description" blank, the original blog description will automatically appear (for this to work, the show description option must be turned on).
the search bar will not appear if the "hide from search" option is checked.
tf you leave the "update text", "currently…" and "link title" fields blank, the space allocated for them will not appear.
sidebar image credits | sidebar icon credits | full credits
This is a single-column Tumblr theme with an an accordion-like sidebar (left or right option), with a body font family (Google font) of your choosing. Optional dark mode and update tab included. Supports NPF posts.
literally most things that people write off as just ‘textures’ to use in graphics are stolen & unsourced material created by artists or photographers NOT meant to be used as elements in projects without royalty payments. you can say ‘it’s just random tumblr posts they don’t care’ but you wouldn’t want someone to take your work and edit into their work so they can be praised for their beautiful style and creativity even if they just post it on social media w/o profit, would you?? so maybe if you browse pinterest or google images for pictures without finding the original source, you’re using images that you’re not allowed to use without realizing it.
you see it on here a lot especially in (i won’t link anything but i’m sure you know what i mean) those album track ‘aesthetics’ posts, au ‘aesthetic’ posts (you see these less in kpop, but where people use non-royalty free images to kinda craft a visual au), and even just rather typical graphics that have a lot of ‘texture’ elements. and texture packs too!! that’s often where the problem starts; people just collect images (often literal art), compile them in a folder w/o sources, then insist no one can repost those images w/o crediting the person who compiled them. what???
SO may i suggest some of my fave places you can get FREE, ROYALTY-FREE elements that are totally legal to use
creativemarket has 6 free high-quality resources (textures, brushes, fonts, etc), different every week! wow awesome i check it every week
search ‘freebie’ on behance. awesome stuff!!! lots of v nice templates textures and fonts
mockup zone freebies
unsplash: tons of very nice free photographs, not shitty stock photos
pexels: same idea. + they have an adobe plugin so you can get photos without closing your editor damn nice
pixelsquid is a super cool free program (again w a ps plugin that i love) with lottts of super cool hq 3d elements!
as to not make this too long: spoongraphics, lostandtaken (textures galore), pixeden, freebiesbug.
All pages have the day and night feature. Much like my themes that have this feature, it will stay in night mode until you turn it off.
You can customize the colors, font size, etc. with variables in each page! This essentially means that most of what you’ll have to edit is in the HTML.
Notes:
Each page includes instructions on how to edit it to your liking, however, basic knowledge of HTML is needed. If you need additional help, please feel free to ask or message me!
A page pack to match my theme, Lowlife! Each page has additional instructions on how to customize them in the code.
[ About Page #02: Frostbite ]
Preview + Install
Frostbite is an about page with 7 sections: a quote, a biography, details about you, likes & dislikes, current projects or hobbies, skills, and social media.
[ F.A.Q. Page #01: Ice Cap ]
Preview + Install
Ice Cap is my first F.A.Q. page! It matches the ask posts in Lowlife and comes with an optional ask guidelines. The askbox is also provided.
[ Navigation Page #02: Below Zero]
Preview + Install
Below Zero is a navigation page. There are sections divided into tags and links, and each section provides sub categories if needed.
[ Blogroll Page #02: Hail]
Preview + Install
Hail is a blogroll page. This page can only be used on main blogs and only if you have enabled the option to share your following with others.
Notes:
Each page is responsive and comes with a day and night toggle button that will stay in the selected mode until it is turned off. A dark mode option is available for those who prefer a dark color scheme on their pages instead of the defeault light colors. The day and night mode button will also change according to the scheme you are using.
You can customize the colors, font size, etc. with variables in each page! This essentially means that most of what you’ll have to edit is in the HTML.
Like Lowlife, you can also choose between a left or right sidebar. Instructions are provided in the code!
page six: poppy — media page with isotope filtering and a slide-in description for each item.
preview / code: pastebin, github
features and options:
isotope filtering with space for multiple filter groups and the ability for users to select multiple filters from the same group.
space for a one to five rating for each media item.
slide-in description with space for links.
responsive for small screen sizes and mobile devices.
notes:
this page uses CSS variables for easier customization and includes instructions on how to edit within the HTML, but you will need basic HTML knowledge to use this page.
images for each media item are 250px x 375px, but will resize automatically without stretching.
credits:
tippy.js tooltips by atomiks
feathericons by Cole Bemis
isotope combination filtering by metafizzy / tutorial by magnusthemes
i’ve had a couple of people ask about how i’ve coloured the pocket dimension scenes so i thought i’d just do a run-through tutorial kind of thing to show it, rather than going through it with everyone separately.
No matter how many times we cry, we will laugh again.
Live Preview (Temporary) / Static Preview: [Index] [Permalink] / Get the code: [pastebin] [github]
This theme was conceived around the idea of having a SVG element as a decorative element. Turns out better than I expected honestly, am quite proud of myself. Suitable for all kinds of blogs, but will also do well with image-heavy blogs.
Features:
Customizable post width and font size. The live preview uses 600px posts and 13px font size.
Three custom links.
A 64 x 64px icon.
Customizable photoset gutter.
Built-in lightbox for photoset posts.
Built-in light/dark mode which persists once toggled.
Mostly NPF friendly.
Toggle-able tags.
Notes:
Usual disclaimer and discretion on NPF posts apply.
Customizations for both the search entry and the custom link icons will be below read more.
Credits:
Icon: @acuite
NPF v3.0 fix, minify spotify player, AA Icon fonts: @glenthemes
Toggle tumblr control: @seyche
Minified soundcloud player: @shythemes
Fonts: Noto Sans, Noto Serif @ Google Fonts
Responsive video script: @nouvae
customAudio.js: @annasthms
photoset.css with lightbox: @annasthms and @eggdesign
Please like and reblog if you like this and or are using it!
Neon is a contained theme which features animated floral features and other decorative elements, creating a maximalist, scrapbook-like design — Perfect for those who want a more artistic blog theme!
Features: contained theme, decorative elements, animated flowers (3 different petal shapes), big title, user profile (icon + status + another title), searchbar, 250px/400px/500px posts, styled search & tag pages
fixed header with a circle icon, title, four+ custom links and an optional description which automatically scrolls
an image, description that shows upon hover over the image, a title, a subtitle and space for a link - other formats of the boxes are in the code
unlimited media boxes stacked with masonry
changeable number of columns - directions are in the code
custom colours for background, border, header, boxes and more
this is page can be used for books, movies, tv shows, music and even fic recs. thanks to the anons who suggested this when I was asking for code suggestions!
everything needs to be edited in the code, therefore basic coding knowledge is required. if there are any issues or glitches, don’t be afraid to send me an ask here.
reblog/like if using and please do not repost or steal!
