#gradient tutorial

[adornedwithlight]

💫 HTML for pretty colors tutorial 💫

Hello sweet beans! Since my last tutorials have been yeeted into oblivion with deactivating my previous blog @/benkeibear I figured I repost them onto here! (Mind you, my old blogs are ahead)

I'm lowkey shocked to see blogs gatekeeping this knowledge but yeah. Make your blog pretty! Match your text to dividers or just have it as colorful as you'd like!

First of all, you can not do this on the mobile app! You need to either use a laptop or your phone / tablet's internet browser (in my case safari)

You start by logging into your account and either you make a post or you edit a post. I recommend making the post on the app first because editing is certainly faster & easier!

This is our starting point! For the fancy fonts you can use messletters

1. I will now log into tumblr on my web browser and click on "edit this post".

2. You then have to click on the little gear icon in the top right corner to change the settings on your post.

3. There you have to click on "rich text" to change it to "HTML"

Your post should now look like this:

A quick rundown on html.

You always start with a letter or code in brackets. to end what you're doing it's </>. The slash signals the end.

P= paragraph <p> and to end </p>

I= italics <i> and to end </i>

b= bold <b> and to end </b>

Now tumblr will automatically do this for you if you made a text bold/in italics on your mobile post but to keep this tutorial simple i left that out here. You can always edit your text in the app after! Just not the color.

And as you see, the fancy text is now in coding. But we get to that later!

To colorize your text it's easiest to just use this website as it gives you lots of options!

1. First i will be choosing the option of "solid color" and you can then put in the hex code of your desired color into the color box.

2. In the top box you will have to put the text you will color - for this tutorial it's "Testing"

3. Then you copy the box HTML code and paste it into tumblr where your word(s) are. Do not remove the <p> and </p> in front and after your word/ sentence!

4. For the sake of this tutorial I marked the html code for colors in pink and the words in blue

Your code will now look like this:

For the gradient you can simply choose horizontal gradient or three colored gradient on the website above and copy/paste the html text.

Mind you that every single letter will get its own color code now so the word gradient suddenly looks very long in html.

If you save the post it will now look like this!

Important to know is that you can color the fancy text only solid as the website can not color it as it is and putting the letter codes in the box above does not work either.

To color the fancy letters you simply copy the color code instead of the whole text - which looks like this:

Don't forget to add </span> behind the word/the codes you're coloring to signal that this is where the color stops! If you forget to add it, nothing will be colored.

If you decide you still want to have the fancy lettering in multiple colors you have to color letter code by letter code manually like this:

(I made a very poor choice on 2 different greens but oh well)

If you'd like to change your text, you can always do that on the mobile app like you usually would. You just can't change the color unless it's into a default color. But you can still change the size or make it bold for example.

Anyhoot, this is the whole magic behind html. It's a lot and might be very complicated at first but you will eventually get the hang of it! Took me weeks and hours until someone sat me down and went through it step by step.

If you have any questions or something doesn't work as you thought it would please don't hesitate to reach out - I'm always happy to help!

[peytonsawyers]

This quick tutorial will go over how to make gradients, from simple gradients to multicolor ones.

give this tutorial a like/reblog if it helped you out

end result & tutorial under the cut

if questions should arise, feel free to send a message!

Chapters:

how to make a basic gradient

adding colors with brushes

softening & adjustments

What you´ll need:

any version of photoshop (I use CS6, mine is in german because I bought it years ago in germany) 

very basic photoshop knowledge 

i.  how to make a basic gradient

Open a new document in your desired size. 

There are several ways to make gradients. I always use the new fill layer option, right next to the new layer or new group buttons on the right side.

Click on it and select the second option.

Adjust the angle however you wish, and then click on the gradient to bring up the next window

Select any colors you want by clicking on the little droppers highlighted above. I used #ff27f2 on the left and #d58dfa on the right. Once you´re done click OK until your new gradient is on your document.

ii. add colors with brushes  

add a new layer & select a big brush with no hardness and low opacity.

select any color to paint with, I´ll be using  #e50051 &  #770dfa & plain white. Start painting on that new layer in slow strokes. You can add as many colors as you want. Mine now looks like this:

Now we merge our layers by selecting them, then righ click and selecting merge 

iii. softening & adjustments 

Go to filters -> blur > motion blur 

Depending on the gradient you´ll have to select different variables, but for this one I used the numbers below:

Sometimes I add Gaussian Blur too to blend it even more, but didn´t do that for this gradient. 

Now for the adjustments I only added a brightness and vibrance layer. This is the finished gradient:

[leonw4nter]

I hope you don’t mind me asking but how do you do the gradient colors for your titles they’re so pretty

HELLOOOO!!! No, I don't mind! Here's how I usually format my gradient titles :)

#1 - Go to the settings icon on the post and click on that. Scroll down and look for "Text Editor".

#2 - It should say "Rich Text". Click that and choose "HTML" from the choices.

#3 - Then go to this site and on a field that says "Your text here!", place your title and then set the colors you want for your text using the two things beside the field where you put your title.

#4 - Click "generate" and if you scroll down, you'll see the HTML code for your text. Click that and copy.

#5 - Go to the HTML part of your post and paste the code. Switch back to the preview part and you're free to adjust the gradient text (regular, chat, Lucille) and you're done!

I hope this was easy to understand anon! :))

[beanswithbones]

So you wanna make gradient text?

this was originally made just to help a friend but she suggested I post this publicly to help bcs the other tutorials out there aren't very straight forward. with that said pls ignore typos:

↓↓ Site Link ↓↓

↓↓ Site Link ↓↓

Note: you can still continue typing in the preview

Hope some peeps find this helpful

[kiwinatorwaffles]

HOW I PAINT WITH GRADIENT MAPS

the post by arcanescribbles where i learned this technique! check out their works!

an even simpler version of this is to just lightly brush colors over a base color in the background and then go off of that. otherwise, i hope this can help!

a full version of my example piece here

[amberluvsbugs]

Question: From your progress shots you seem to do everything in greyscale then add color. How do you do that? Is it a layer effect you apply so the colors take their place or something else? (gradient maps also confuse me so i have no idea if thats what your doing)

Sorry for the very odd question, its just that your art is so wonderful and amazing to look at that i was curious how/why you do the greyscale to color way.

Also thank you!!

[astrolavas]

Random question, but how did you do the rainbow thing in your pinned post? Is it from something you buy on Tumblr?

the gradient, yes!!! no, it's completely free.

so, i don't remember where exactly i got the instructions as to how to do it, but this is basically how the word "welcome" from my pinned looks like in html:

since it's a gradient, every letter is a sliiightly different hue, but i remember there was a website where you could basically write any word/sentence that you'd like gradiented, choose the starting and ending colors, and it'd automatically give you the html code for the gradiented text. i think it was this one?

and that's what you get!

you just gotta copy the code, start editing your post, make it so you're editing it as html, paste the code in, and it SHOULD work. hopefully!

[novy2sirius]

GRADIENT TEXT TUT

how to get ombré colored text on tumblr <3

꧞ i get a lot of dms and comments asking about how to change the color of your text to colors that tumblr doesn’t have or to an ombré text. this is how

꧞ sites you can use: the one i use // two // three

꧞ you have to use your computer for this

one: copy the text you want to color from your tumblr post then paste it into the websites text box

two: change the color of the text to whatever color you want. with the website i use it allows you to pick presets or you can also customize your own then click generate

three: click the “select all” button and copy the code

four: go over to tumblr and click the edit button on your post

five: click the settings button and change the text editor to "html" then find the html section at the top and click on it

six: paste the code from the color fader website in the html where you want it to go (i paste it at the top and just edit it on my phone by holding text down and moving it)

[gradifizz]

custom colors tutorial

begin

1. ok create a Tumblr post

2. go to settings

3. change Text Editor to Markdown

it might also work set to HTML but I haven't tried it

4. decide your message. time to play with markdown html stuffs!

gradients (easy way)

1. go here: https://patorjk.com/text-color-fader/. (it lets you do multiple colors. imo this is the best working tool. but you can totally look up text gradient makers for forums/email, or make ur own if u want)

2. find the options u want :)

3. you might have to replace o with &#111; and O with &#79; or they may disappear. dunno why

4. make sure u keep the Output Code: HTML (span tags) option the same

5. press generate! copy the text from the second text box, with the funky text with a lot of <span>

6. paste into the post editor

7. repeat as desired :)

solid colors (hard ish way)

1. paste this into the post editor:

<span style="color: ">message here</span>

2. if you know the hex codes of the colors you want, skip to end

3. look up "color picker". change the color until it's how u want

4. copy the hex code (it should look like # followed by numbers or letters). if I want this cool shade of blue, it looks like this: #22405e

5. paste the hex code into the text you already have like so

<span style="color: #22405e">message here</span>

6. repeat as desired :)

end

now u can switch to the preview tab or back to the text editor, and keep making ur post! don't switch back and forth, or you'll lose the color and have to do it again

yes you can make the colored text bold and stuff

yay colors

hey guys

i found out how to do colors

[glossysoap]

gradient text & blended in header tutorial!

all of this can be done on mobile!

gradient text:

1. first you’ll go to patorjk.com/text-color-fader/

there’s a box where you can input your desired text, so like your bio text or masterlist text etc etc. whatever you want honestly, put it in that box.

2. find a color combo.

the list is longggg as fuck. you can click through each color and the little boxes below will show you the color scheme so you can decide which selection to go with. for the sake of an example, i’m using the same selection that’s in my pinned.

it’s called “WittyxxGirlxx - Deep Dark Water” but i made some minor changes to it which i’ll detail below. (feel free to ignore below if you’re not looking for the exact color gradient that i have lol)

adjust the # of colors to be 5 instead of 3, and then edit the color boxes to be like this.

basically, make the additional two shades match the first two shades. so have the second to last shade match the second shade, and the very last shade matching the first shade so it’s a dark to light to dark gradient.

3. once you have your color combo all ready, click generate color gradient. you’ll be taken to this page with your text all gradient and you’ll click select all, and then copy the coding.

4. open a new tab and log in to your tumblr on the website. that is what makes it able to be done on mobile.

open a new post (or edit an existing post, the same rules apply) and click edit settings of that post.

change the text to html (as seen on the low part of this screenshot) and then click on the black box above the custom url part. that will bring you back to the post you want to edit, except it will all be in html text.

5. paste the coding into the post and it’ll look something like this!

6. click save and here’s your result!

blended in header:

1. pick a header. again, for the sake of an example, i’m going to use the same header as i have now. you can use pretty much any image, even one with a harsh cut off as long as you’re okay with making your background match that color.

2. use an image color picker to find the exact hex code of the header that you picked. if the header you pick has multiple colors in it, try and pick the color at the veryyy bottom edge so it blends in as close as it can. you’ll see what i mean later.

i always use htmlcolors.com/image-color-picker#google_vignette

3. you’ll be able to choose a file and you’ll choose whatever header pic you’re going with. tap on the bottom of your selected pic and it’ll give you a hex code which you can then copy and paste.

4. go to your tumblr (can be done on the app or website, doesn’t make a difference) and start editing your profile.

edit the background color and it’ll give you an option to input a hex code and you’ll go ahead and paste the one you just copied.

it’ll match like this 😁

5. optional, but if you want to make your accent color (like your bio/title texts) match something in the header (like a text that you like the color of), the same rules apply.

use the color picker for the text (or whatever) you want to match, copy the hex code it gives you. go into tumblr and edit the accent color on your profile and paste the hex code you just copied. then your accent color should match whatever thing you liked in your header.

voila <3

[adornedwithlight]

Hello sweet beans! Since my last tutorials have been yeeted into oblivion with deactivating my previous blog @/benkeibear I figured I repost them onto here!

💫 gradient line divider tutorial 💫

This tutorial uses my simple line divider tutorial as a base. Please familiarize yourself with it first since this is just additional steps!

I use various apps and sites for gradients. The apps I mainly use Canva or Gradient+ occasionally I use GradientDaze (for when I don't have specific colors in mind)

As websites I can recommend browsing through uiGradients or Webkima if you'd like animated gradients.

I'm a little oldschool and don't use photoshop but there's plenty tutorials on how to animate gradients there on YouTube!

Starting with Canva:

1. You first open your divider template. Mine is as in the previous tutorial the simple 1000x40.

2. Next you will click on the color button and choose a color like the little arrow shows

3. Then you select "Gradient" and Canva will give you a second color option. You can change both colors here or add many more if you'd like more colors. Here you can also choose what kind of gradient you want

Just play around here and continue to resize the images you saved as explained in the previous tutorial via ezgif or any other way you found for yourself.

Next we have Gradient+

This app is built pretty simple and there's not much to explain. You choose your two colors by tapping on the colored circle at the"Color A" and "Color B" and continue further down to navigate where color A starts and color B ends.

For the classic gradient you use the settings as above.

The app also offers radial and angular gradients so you can just play around with what you like!

Make the gradient big by tapping the expansion arrows and take a screenshot - then you may resize your divider.

The last app is GradientDaze

Again, a very simple app but this time you can't enter hex codes. Instead you can move 2 circles around on a little color card and find pretty gradients you like

If you found two colors you like, you can click on the little + and then on "info" to see the color names and hex codes. In the menu after clicking + you also have the option to save the gradient

Once saved you can resize your dividers.

Onto the web pages.

At uiGradients you can browse through popular gradients users have made. Once you find one you like you can use the hex codes to make a gradient divider for example in Canva or you take a screenshot and resize it.

Using Webkima for animated dividers is a little inconvenient because you need to record your screen and make a gif out of if (you can do this at ezgif where you can immediately resize your animated gradient)

On Webkima you can choose up to three colors, the direction and speed at which the colors move. Personally I haven't used this yet except for a few custom dividers since it takes quite some time for one divider.

(Left: uiGradients / Right: Webkima)

Using these apps / sites is optional and I'm sure there's plenty other options out there but these are the ones I personally use and find easy to navigate, especially canva since you can do all this in the free version.

If you have any questions or something doesn't work as you thought it would please don't hesitate to reach out - I'm always happy to help!

[dqmeron]

「 Gradient Text Tutorial for Captions 」

i'm sure there's several of these already out there, but here's a rundown of how i make the gradient text for my gifset captions! (example)

𖥻 tutorial below cut <3 | screenshots + bold/italic/small/color text included for my fellow adhders who can't sit through long blocks of text

websites used: color picker, text colorizer, text replacement

step #1: pick your colors (optional) when making gradient text for a caption, i usually use an image color picker to get exact hex codes! this just helps me match everything even better than i could when manually inputting colors! (this is completely optional, but i like doing it, so i thought i'd include it here!)

step #2: making your gradient now the fun begins! open the text colorizer linked above, and enter the text you want to be a gradient into the text box:

(all caps is by no means necessary! i'm just doing it to make the gradient stand out even more, since i'm going to have a decent amount of text in my caption.) after entering your text, choose the type of color effect you want using this drop-down menu! color effect is essentially the type of gradient/how many colors it uses, etc. play around with this to find the one you like best!

i'm sticking with horizontal gradient, but you can choose whichever one you like! (there's also a solid color option if you want to just use a color that isn't available in the tumblr text options.) after color effect, you can choose your colors using this section - if you did use the color picker from step one, you can just paste the hex codes into the boxes.

if not, click on the colored bars, and this hue picker will pop up:

drag your mouse around in the left box to choose your color. the bar on the right can be used to modify shade.

(these are the colors i'm using)

skip over the "additional text settings" section (these options mess with the html code and cause issues when you try to use it on tumblr) and check the preview to make sure you like how your gradient looks.

if you're having a bit of trouble seeing the gradient properly, you can scroll back up to "additional text settings" and turn on bold to see it better. just make sure you turn it back off before copying your code.

now you're ready to copy your code!

after making sure any additional text settings are returned to their default/unchecked states, scroll down and copy the HTML code (NOT the BBcode). select the text and copy it using command/ctrl + C or right click and click "copy".

step #3: replacing

the text colorizer used here is great, but it does add unneeded semicolons to the html code that mess with tumblr's settings and cause formatting problems.

open the text replacement site (linked at top), and paste the code you copied into the text box:

in the "replace this:" box, type ; (leave the "with this:" box blank)

click "replace text". skim over the new code to make sure the semicolons are gone (sometimes you've got to click "replace text" a couple of times for it to work), and then either click "copy to clipboard" or select and copy the text manually.

step #4: writing your caption now that you've got your code, open tumblr and make a new photo post. look in the top right-hand corner of your screen, and make sure "legacy editor" is turned on. if it isn't, click the toggle to turn it on.

next, you need to make sure your text editor is set to html. to do this, click the little gear in the top right corner of the new post. select "html" from the drop-down menu next to "text editor", and then close the settings. [07.27.23 update: if, like me, you're stuck using the new editor, you can still set your post type to html, and gradient text will still work. the post editor will just turn your files into code when you're editing, and you'll have to fix the spacing in between your gifs (if you're using this for a gifset caption) in the preview tab. it looks super weird and alarming at first, but it does still work with the new post editor.]

upload your gifs and then move down to the caption. open the html tab and then paste your code! once you've done that, click on the preview tab to check how it looks.

my gradient looks pretty good, but i'm going to bold the text to make it more visible. here's how to use html to do that:

<strong>code goes here</strong>

here is a list of other html codes you can use to stylize your text! (they use <;b> for bold text, this is another way to do it, either method works fine!)

if you want to have another line of text under/above your code you need to add <br> at the end of the top line to create a line break (just pressing enter won't work). here's an example of how to format that:

text text text<br> text text text&lt;br> text text text

write the rest of your caption, and then you're done! here's my end result and my final code:

i hope this was helpful! feel free to send me an ask if you have any questions! happy giffing <3

[kaiserouo]

(prev)

i colored that

[definitelynotshouting]

girls (gender neutral) when they decide to get a little sillay with texturing

[biscuitdolly]

how do you add the color gradient thingy to your text? i've been trying to look up tutorials but i cant find anything :(

GRADIENT TEXT TUTORIAL ꣑ৎ

hii!! i made a video cause idk how to explain!!!

here's the code website i used !!!

hopefully this makes sense!!!

enjoy jacqueline taieb in the background too lol

[townofcrosshollow]

HOW TO USE THE "MAKE ART GOOD" BUTTON TO MAKE YOUR ART GOOD

HEY, YOU! Yeah, you, amateur artist! Have you ever seen a digital artist with really good fucking colours and wondered "HOW DID THEY GET THOSE REALLY GOOD FUCKING COLOURS?!" Is it experience, talent, and an eye for colour? FUCK NO. I'm here to tell you what the pros don't want you to know, which is that right within your very art program (assuming you're using Clip Studio Paint) is a single button that will MAKE YOUR ART GOOD*

* or like, marginally better than it was before most of the time

Let me show you how I took this BORING, UNGOOD Slime Rancher painting I did as a final project for my traditional art course from BORING...

TO RAD AS FUCK

IN APPROXIMATELY FIVE MINUTES

THIS IS IT. THIS IS THE BUTTON.

You'll have to put everything on the same layer (I recommend putting it in a folder, duplicating the folder, and then collapsing all the duplicate layers together so your original work is still untouched), but after that, you can open the Gradient Map menu and go hog fucking wild.

This is what you're gonna see:

Basically, what gradient maps do is they map the darkest colour in your piece to the darkest colour in a gradient, and the lightest to the lightest, and then VOILA. All of your colours have been changed to the colours of the gradient. Neat!

You can use this to do things like automatically change skin tones or hair colours, or in our case, colour the whole painting!

You can download sets off the asset store and load them into your program by selecting the wrench icon and picking "Add gradient set."

All you need to do is load a gradient in the tool and voila...

...okay actually that looks like shit. (The gradient I'm using is #11 from the Yunywave set on the asset store! Go download it! It's a good set!)

So, our solution here is going to be different depending on the goal, the gradient, and whether it's a colour piece you're trying to zhuzh up or a B&W piece like this.

For this one, I duplicated the original layer and set the second one to Overlay at 100% opacity, then applied the gradient map to it.

INCREDIBLE! PERFECT!

Here are some other examples of how I've used gradient maps...

See, Overlay is a really good blending mode to use for this kind of thing, especially if you painted it with "normal" colours and just want to give it a little kick! But you should experiment with other modes, too. For a pastel piece, try Screen. For a subtle change, try Soft Light. For a moody or dark piece, try Multiply.

And you can also add even more details over the gradient layer to add that extra punch to it! In the example painting, I wasn't happy with the foreground tree's highlight being so dark, so I painted over it with an orange colour picked from the background, duplicated it, recoloured it to a dull yellow, and set the layer to 60% Glow Dodge.

Digital art gives us so many tools to make SICK FUCKING ART with, and gradient maps are like, the most powerful tools of all! USE THE SHIT OUT OF THEM AND GO MAKE COOL STUFF!