resource blog

[mournstera]

Mauve — a responsive, single-column theme

This is a single-column Tumblr theme with a left sidebar and a body font family of your choosing (Google font). Optional dark mode, search bar, and update tab included. Full support of npf posts. You agree to my terms of use by using this theme.

Static previews: left sidebar (1) left sidebar (2)

Download code: GitHub

Read about features and notes below the cut

Customize colours for dark and light mode

Font-size (11-18px)

Post-width (350-540px)

Customizable post margin (set to 130px)

Custom title + description box

Photoset gutter (1-4px)

Toggle between sharp or round corners on content

Toggle between displaying or hiding Tumblr controls behind an icon

Toggle between regular or accented pinned post

Choose between displayed tags or upon a toggle

Choose to display post info as text or icons (reblog + like)

Optional sidebar icon image

Optional update tab

Optional dark/light mode

Search bar: The search bar will automatically be hidden if you have the option to discourage searching your blog from search results enabled. Go to your blog’s settings to do so.

Navigation: An unlimited display of native Tumblr pages within a dropdown. Learn how they work in my FAQ here. Custom home + ask + navigate links as well as their icons - learn about how to change them further down under icon change.

Sidebar Icon: Choose a size between 40px/55px/70px, with shapes square, rounded, circle or blob. Separate icons for light and dark mode! But If you want the same icon, simply upload it twice.

Dark Mode: If you decide to offer dark mode, it detects if visitor’s operating system is on dark mode, and displays that choice at the first visit - of course with the option to toggle the other mode on/off.

Update tab: to hide the update tab completely delete the text in the Update Tab title text-field. To hide an activity, delete the text in the activity field you want to hide. Learn about how to change them further down under icon change.

Icon Change: To change icons in either the menu or update tab, find the text field for the icon you want to change, go to Lucide.dev/icons and copy the code for the icon like I've highlight below:

Notes:

Via/source links are on permalink pages

to hide the archive link, simply delete the text in the field.

Submit-link and ask-link only shows if toggled on in your blog settings.

Credits

Basecode by @eggdesign ❤️

[marissources]

— » Compact Ship Template [ download ]

A single-page template to introduce or showcase your ship. The bottom part consists of different modules you can mix and match as depicted in the gif above. The modules include; History (length of relationship), Tropes, One Song Player (long or short), Text Box, Contacts, Kids or Pets, Statistics (2 different types), and Images.

Example can be found here.

—  RULES

Like or Reblog if you plan on using.

You may edit as much as you like, it is fully customizable.

Do not use as a base and/or claim as your own.

This is a free template, do not use this for profit.

Credit is very much appreciated but not necessary.

—  NOTES

Font used is Montserrat.

Added guides specifically for version 1 of the Statistics. You can turn them off with Ctrl + H or under 'View' -> 'Show Extras' -> 'Guides'.

Easy to navigate, all layers are labeled.

Requires basic Photoshop knowledge. 

Photopea friendly.

[yeoli-thm]

Pixelution

A simple pixelated theme.

preview ⬩ install [ github code ]

Main features:

540px post sizes

4 body fonts and font sizes

Custom colors

Supports new post types

Like and reblog buttons

Optional post notes on index page

Optional custom scrollbar

Optional box shadows

Sidebar Features:

Left / right positioning

Left / right / center text align

Auto link pages with 3 additional custom links

Search bar

Custom sidebar image text

Choose between heart or circle sidebar image shape (dimensions: 140px by 140px)

Choose between message box or classic style pagination

[usergif]

HOW TO: Make Animated Neon Text

Hi! No one asked for this tutorial, but this is one of my favorite typography effects as of late — so I thought I'd share how I do it. You can see this effect in the first gif of this *NSYNC Celebrity set and the last gif of this Anthony Bridgerton set. Disclaimer: This tutorial assumes you have a basic understanding of gif-making in Photoshop. It's also exclusively in Timeline and uses keyframes for the fading effect seen on the blue text.

PHASE 1: PREP YOUR BASE GIF

1.1 – Choose a dark scene. This effect looks best contrasted against a dark background. You can definitely do it with a bright background, but just like a neon sign irl, you only turn it on in the dark/at night — so keep that in mind! 

1.2 – Determine the length of your clip. Depending on how much you want your text to flash or fade in, you'll want to make sure you have a scene long enough to also allow the text not to flash — reducing the strain it takes to actually read the text. For reference, my gif is 48 frames.

1.3 – Crop, color, etc. as you would. New to gif-making? Check out my basic tutorial here!

PHASE 2: FORMAT YOUR TEXT

Before we animate anything, get your text and any vectors laid out and formatted exactly as you want them!

2.1 – Finding neon sign fonts. It's easy as going to dafont.com and typing "neon" into the search bar!

2.2 – Fonts I used. Neon Glow by weknow | Neon by Fenotype | Neon Bines by Eknoji Studio

And to not leave my fellow font hoarders hanging, the font for "tutorial by usergif" is Karla (it's a Google font) 🥰

2.3 – Group your text layers. (Conditional) If you plan on having multiple text layers like I did and you want them to appear connected (like how the last letters of "NEON" and "sign" intersect with the wand icon), I suggest putting the layers into groups according to color (the shortcut to group layers is Command+G). If you don't group your text and just apply the outer glow settings to each individual layer, you'll end up with something like this:

—where you can see the glow overlap with the line, instead of the smooth connection you see in my final example gif. I'm using 2 colors for my text, so I made a group for red and a group for blue.

2.4 – Apply Outer Glow. Right-click your text layer (or your group if you have several layers) and select "Blending Options" to open the Layer Style menu. Check "Outer Glow" and feel free to play around with the settings until you like the way your text looks!

Your outer glow color should be darker and more vibrant than the color of the text itself. The text should be within the same color family but much brighter and, sometimes, almost white (see Step 2.2 again for my text colors).

Here are the settings for the Red Glow (the glow color is #FF3966) and Blue Glow (#00F0FF):

These aren't always my exact settings but they're pretty close to my standard. I always set the blend mode to Hard Light and usually have the opacity at 100%.

For every gif I use this effect on, I like to play around with Spread and Size. Spread will make the glow look denser and "expand the boundaries" (source: Adobe) and Size will diffuse the glow and blow it out so it covers a larger area (Adobe says it "Specifies the radius and size of blur").

2.5 – Duplicate your text layer/groups and remove glow. We're only going to be animating the glow on our text, and since doing this affects its opacity/visibility, we want to preserve the base text by creating a duplicate.

I just hit the Command+J shortcut to duplicate my groups and delete the Outer Glow effects, making sure that the "No Glow" version is above the "Glow" version:

I also put all these groups into one group called "Text" for organization and so I could apply a drop shadow to all the elements for better visibility.

PHASE 3: CREATE THE FLASHING EFFECT

This is for the effect you see on the RED text in my gif!

3.1 – The 0.03-Second Rule If you've read any of my animation tutorials before, you're probably already familiar with this rule. In my experience (and for reasons I can't explain), Video Timeline pauses every 0.03 seconds (try clicking the forward button a few times, you'll probably find a "duplicate" or paused frame). So, keep all your layers a duration of 0.03-second increments (e.g. 0.06 or 0.09 seconds can also work) and align them on the Timeline at 0.03-second intervals. If you don't follow this rule, you'll get duplicate frames when you export, resulting in a choppy final gif.

3.2 – Trim and arrange your text layers. Only on the layers/groups WITH the Outer Glow effect, trim them into several segments of varying lengths where the glow will be "on" (visible) and leaving spaces where the glow should be "off."

Typically, I'll have a mixture of 0.06 and 0.03-second text. That's when the glow will be visible. Between each "flash" of visibility, I've got a 0.03-second blank space, baby *pen clicks* and I'll write your name:

The layers shown above are arranged with a few flashes and two long segments of no flashing. This is the order and duration of each segment shown above (purple = visible segments):

0.06 blank, 0.06 visible, 0.03 blank, 0.03 visible, 0.03 blank, 0.03 visible, 0.03 blank, 0.24 visible (the long bit where "FLASHING" doesn't flash at all), 0.03 blank, 0.03 visible, 0.03 blank, 0.12 visible

(I only did this for the text that says "FLASHING" to give it a glitching effect. The other red text keeps the glow visible starting at the first long segment.)

PHASE 4: CREATE THE FADE-IN EFFECT

This is for the effect you see on the BLUE text in my gif!

4.1 – Animate using the Opacity Keyframe. Again, we're only touching the layers/groups WITH the glow effect. If you only have one layer of text, you'll find the Opacity Keyframe by clicking the film reel icon:

If you're working with groups like me, you'll find it in the Timeline panel under the group when it's expanded:

As you can see, I already added my keyframes (lil diamond babies). And luckily, it's super easy to do!

4.2 – Add the ending Keyframe first. We're starting at the end because our layers/groups are already at 100% opacity. Drag the playhead (the blue arrow attached to the red vertical line) to a spot where you want the glow to be 100% opaque — this is where the glow will be fully "on" or visible. [Again, follow the 0.03-Second Rule. You will get duplicate frames regardless when using keyframes (this will be explained in the note in Phase 5), but abiding to the rule will mitigate the amount of dupes you get.]

Then, click the clock icon by "Opacity" to place a keyframe:

4.3 – Add the starting Keyframe. Go backward from the ending Keyframe you just placed (I went back 0.12 seconds — but you can play around with the duration of the fade, just keep it a multiple of 0.03):

And drop another keyframe, this time by clicking the diamond icon by "Opacity":

4.4 – Reduce the opacity on the starting Keyframe. Keeping that keyframe you just placed selected, go to the layers panel and reduce your layer's/group's opacity to 0%:

Now, this Outer Glow will slowly fade from 0% to 100% opacity.

And just for a visual aid, here's where my fade-in keyframes are in relation to my flashing segments:

To refresh your mind, the 0% Opacity Keyframe starts when "FLASHING" is visible for 0.24 seconds (the first long segment of visibility).

With these keyframes, you'll get a smooth fade-in à la ✨light switch with a dimmer✨

PHASE 5: EXPORT

Yay, we're finished! Convert from Timeline back to Frames and export your gif!

NOTE: If you only did the flashing effect and followed my 0.03-Second Rule, you shouldn't have any duplicate gifs. BUT if you included the fade-in effect using keyframes, you WILL have duplicate frames. 'Tis the nature of keyframes. 🤷‍♀️ I had 4 extra frames where the fade-in starts, which I deleted. So, as always, I recommend checking your frames when you convert from Video Timeline back to Frame Animation — and manually delete any duplicate frames.

Sorry this tutorial is so long 🙈 I over-explain so you're not just mechanically copying steps, but understanding the WHY behind each step! Thanks for bearing with me

If you have specific questions about this tutorial, feel free to send a message to usergif and I'll try my best to help! :)

More USERGIF tutorials • More resources by Nik • USERGIF Resource Directory

[themesbypale]

Page 04: POKÉDEX 98 

Preview  | Code

An about page that is also a Pokédex mini web application, based on the Pokémon Yellow interface design. Why? Because is having a Pokédex in your blog is cool! (｡◕‿‿◕｡)

Read the customization guide here.

Features:

A full functional Pokédex. You can search any of the current 1000+ existing pokémon. 

Set your dream team easily.

Change the language of the Pokédex.

About section.

Tags/Links section.

Extra section that can be used for more information, terms of use, FAQ, etc.

Toggle Light/Dark Mode and customize it, too.

Add background music and switch on/off.

Select between ultra retro or modern sprites for your team.

Responsive on mobile.

More info:

This page retrieves all the pokémon information through the services of the Poke API. The Poke API is a full RESTful API linked to an extensive database detailing everything about the Pokémon main game series. This means this page does not have coded any information of the pokémon, instead every time you search a pokémon the app connects to the API and gets the information back.

Notes:

This is the first version of the page, but in the future I will add more functionalities! Recommendations are always welcome.

The Pokémon nformation is dependant of the Poke API database, so if there is some information missing or wrong the Pokédex page can’t control that.

Make sure you have Javascript enabled on your blog.

Credits on code.

Inspiration came from Pokémon first generation games and also the page was inspired by @nyctothemes beautiful first generations themes! Check them out!

Please reblog/like if using! :3

[liohnelmessi]

Font Pack 16 by liohnelmessi

Happy belated 2023! This is my long-delayed 16th font pack, which contains 30 high quality fonts that I have collected over the past calendar year. I hope you enjoy! {More fonts}

This pack contains 30 high quality fonts

Like / Reblog if you’re downloading

Download Links: {Dropbox} / {Mediafire}

[phantomcodes]

strawberry | theme by sage

get the code: static preview / version 2 a sidebar (left or right) theme with sticky buttons for permalink & reblog — free through the month of april!

features (more info below the cut):

toggle: tags on click, music player, updates, right or left sidebar

headerbar includes blog icon/home link & search bar | (optional) music player & updates buttons | day/night & tumblr controls buttons

sidebar includes links for home, ask, archive, & up to 5 extras, an uploadable image, and custom description

customizable: blog title, description, colors, body & title fonts, and font size

responsive design, jumpination, scroll to top, 4 corner options, 3 post margin options, phosphor icons

nothing needs to be changed in the code, everything can be changed in the customize panel!

terms:

reblog if using

do not touch the credit

all terms / faq

credits listed in the code / credits page

please consider supporting me ♡

Keep reading

[wolfes]

[Caption: a yellow and green gif of Alina from Shadow and Bone; the first gif of her looking away from Mal fades into her crying over him. End caption.]

TRANSITION TUTORIAL by v @shangs

I got some questions about how I did the glitch effect in this set, and I think because the glitch sets with green and magenta/red and cyan protrusions like this one are more complex that the effect seems like it’s hard, but it’s deceptively simple! I’ll show you how to do transitions like this with an effect buffer in between, whether it’s a glitch effect or a light leak or anything else. 

What you’ll need:

Photoshop with timeline (I use 2022)

A transition video for the effect 

Preferably, a good knowledge of how to use the timeline for gifs

Two or more gifs

Tutorial under the cut!

Keep reading

[ricecodes]

Winter Storm: Page Pack #02

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!

[phantomcodes]

seashell navi | tags page by sage

preview & code / a navigation page made to go with my seashell theme

features:

unlimited links

customizable: colors, body & title fonts, font size, border radius (corners)

header with blog icon, title, url and day/night, tumblr controls, & scroll to top buttons

footer with search bar & home/ask/archive links

responsive design, optional glow effect, this page uses tabler icons

instructions for how to edit are in the code!

terms:

reblog if using

do not touch the credit

view all terms

credits listed in the code / credits page

please consider supporting me ♡

[senj0ugahara]

I use these colour textures pretty often in my graphics and decided to upload them due to demand ( ´ ▽ ` )ﾉ These textures were created by me using photoshop. Pack includes 50 colour textures, containing aquas, blues, browns, greens, greys, magentas, oranges, pinks, purples, reds, tans and yellows. Likes and reblogs are greatly appreciated if taking. Please feel free to use as you’d like, no credit necessary. However, do not redistribute anywhere as your own, thanks! [ Download ]

[zephyrine-gale]

Your art is so pretty!!!!!!! How do you pick colors and color!!!! All your works are so vibrant yet cohesive hhhh so nice to look at <33

thank you!! I made a little guide :> it's mostly about hair color picks but this is how I choose my colors in general!

i tend to stick to a similar value with all my colors! the only colors that get a higher saturation tend to be the highlights

and a way to make your colors pop is contrasting your warm and cool tones :> with yaoyao, I have a warm-tone base with a cool-tone shadow and kazuha's is a little more messy, but the bright teal pops in contrast with the red and warm tones.

this chart is helpful too if you're stuck on what kind of color scheme you'd like to go with!

I tend not to use pure white/black in my base color or lineart either my whites will either be warm/cool grays depending on the character! and I tend to have cool blue/purple blacks color has so much personality so I love adding lots of it :>

I'm physically incapable of base coloring as a solid color to save my life... it takes a while and most of it is intuitive at this point so it's a bit difficult to explain for bigger pieces, but I hope this helps!!

[polyships-moved]

aryu: a character page / preview (+ code)

a three or four-column character page that showcases the original characters you’ve come up with. you can also use it for biases or favorite characters, if you want.

features: - 50 x 50 image, name, and subtitle - statistics with icons from phosphor icons - a biography that scrolls when it overflows - three links at the bottom

credits are in the code

[saeitoshi]

photoshop tutorial: how to remove “gradient” background

if you ever have an issue with your color adjustments causing this weird gradient on a solid color, this tutorial will hopefully provide you with an answer!

this is a case-by-case issue, but here’s the general formula on how to get rid of it! feel free to drop any questions if anything’s unclear ^^

Keep reading

[kosmique]

lunar: a header-sidebar theme with with multiple customization modes.

previews: version one // version two // live preview

code: pastebin // github

features:

left/right sidebar.

notes on index.

background image or gradient.

full width header option and optional header image.

dark mode.

400px, 450px, 500px and 540px posts.

optional about section.

up to five custom links + unlimited pages.

responsive.

custom font and font size.

custom sidebar description.

notes:

if you don’t want the links to appear, leave the links titles fields empty; same for the sidebar description.

you can use any font from google fonts. just enter the site, copy the name of the font you want and paste in the appropriate field.

dark mode colors are not directly editable from the panel. however, if you want to modify the colors, just search for /*—– dark mode —–*/.

decimal format only

if you want to use a solid background color, just set the two gradient colors to a single color.

if you want to use an image as a background, enable the option first.

credits:

header image | notes on index | full list

[stewlate]

Music Player Gifs

I noticed that the stereo gif used in Ixora’s drop down music tab only comes in black, rainbow, and a soft rainbow. I realized that it isn’t very useful when neither black or rainbow go with the palette being used on your blog.

I don’t normally post things resource related, but I figured I’d give it a shot. I made different coloured versions of that stereo gif for your liking. Including white, but you probably won’t be able to see it unless you highlight it with your cursor. For your convenience I’ve placed an asterisk (*) directly before the white gif.

The medium & light rainbow ones, as well as the black one are not mine!

Neutrals

    *

Light

      Medium

      Dark

        Neon

         LGBTQ

                   Have fun!

[glenthemes]

Music Player Tab #03 by glenthemes

A slide-up music list on hover that sits at the bottom left of your screen. Serves as an alternative option to players like Billy, SCMPlayer, Wikplayer, etc.

► Preview + Codes + Customization