#2px outline

[glittergroovy]

[twitter-sakuranokaze]

FF14 Battle Portrait Tutorial

For the past few weeks I was trying to find a way to recreate the battle portrait from FF14 as there was a few characters that I want to see in that style but don't officially have one yet. I think I got it down more or less (see image below) so I thought it's a good time to share what I did.

First of all, I made a few files that would help make life a little easier. They can be grabbed here .

Note: I did use Reshade to do a bit of work at the screenshot stage to help speed up the process but the same effect can be recreated in Photoshop with a vanilla screenshot. There are a lot of tutorials on how to do comic/cartoon effect in photoshop and those would make good bases to work off of.

Step 1: Take the screenshot with the PortraitBase Shader on. I usually take two screenshots. One with "Comic" on and one with it turned off. This is so that I have more to work with if needed.

Step 2: Drag all the screenshots into photoshop and remove the background. In photoshop, arrange the layer so that the screenshot with the Comic lines visible is on top of the one with the effect off.

Step 3: Duplicate the the layer with the "comic" effect and apply Blur->Gaussian blur (radius 0.5)

Step 4: Take a look at the hair. In Eric's case, It still doesn't look blur enough to me so I used the blur tool and blurred it a bit more

Step 5: Create a new layer above the layer in the previous step and use the brush tool to start outlining the edges. Where to outline is up to you but the idea is to make edges defined so that it looks more like a drawing.

Step 6: Duplicate the outline layer and then hide that layer. Step 7: Merge everything under the outline layer. Step 8: Drag and drop the "Texture.png" into the project and Clip it to your character layer. Set the blending of the texture to "soft light". Step 9: Drag and drop the "stroke Texture.png" into the project and Clip it to your character layer. Adjust the size till you are happy then set the blending to "overlay". Step 10: Adjust the opacity settings of both texture layers until it looks good to you.

Step 11: Click on your character layer and go to image->Adjustments->Hue/Saturation (note: you will see I dragged in the official Hades portrait as a point of reference to work off of). Adjust the saturation till you are happy.

Step 12: Go to image->Adjustments->Color Balance and adjust the color till you are happy. In this example, since Eric is also wearing the Sophist robe, I tried to match that color to Hades' Sophist robe color.

Step 13: Once you are happy, drag the "Template.png" into the project and scale that to the size you want. Make sure it is completely covering the character. If it's not, you can just use paint more of it with the brush tool to extend it till it covers everything.

Step 14: Hide the "template.png" layer and select your character layer. Use the magic wand tool to select the outside of the character.

Step 15: With the selection still selected, click on the "Template.png" layer and press delete on your keyboard. You should now be left with a blank in the shape of your character.

Step 16: Drag the"Template.png" layer to be below your character layer. Then click on your character layer and clip it.

Step 17: Click on the "Template.png" layer and add a 2px stroke and shadow to it.

Step 18: Drag "Back_Deco.png" into the project and place it behind your character. Scale it till you are happy with it.

And that's it! Now you can recreate portraits for any NPCs that you want (in theory). A lot of it is also fine tuning to what you want but this should at least give you a decent base to work off of :)

[mspaesthetic]

what brush did hussie use to draw everything

He used the default hard round brush preset in Photoshop with the Pencil tool. Some newcomers to digital art might hear the word "pencil" and get confused, thinking it refers to a literal pencil texture brush, but it's a distinct tool from the typical Brush tool. In other programs, similar brushes might also be called the Binary brush or Pixel brush.

The Pencil tool is basically the same as the Brush tool, but draws the strokes with pixelated hard edges. The Brush tool on the other hand draws strokes with anti-aliasing, smoothing the outline of the strokes. This is done with semi-transparent pixels, something that the Pencil tool specifically does not use (hence why it could be called a Binary brush, because a pixel is either fully opaque or not).

Something to note is the version of Photoshop Hussie used: CS3. In CS3, if you had pen pressure enabled, the minimum brush size the strokes could go down to was 2px only (if the brush diameter was set to at least 3px). Setting it to 1-2px would not net you any benefits out of having a pressure-sensitive drawing tablet. In other words, brushstrokes can't taper off to 1px thin ends.

(Bear with me since I currently don't have a computer with Photoshop installed so I'm using these kinda shitty old demo gifs that weren't supposed to be used)

Photoshop CS3 brush engine

The brush engine changed slightly in versions after Photoshop CS3, however. Starting from Photoshop CS4, setting the brush size to 2px with pen pressure enabled would make the 2px brush size invert and jump up to 3px as the minimum brush size, while only going back down to 2px if you applied pressure or drew at an angle or something. (I unfortunately don't have any images on hand demonstrating this clearly.) Only setting the diameter to 3px makes the ends 2px, as you can see below.

Photoshop CS4 brush engine

You can still see this shitty behavior in Photoshop CC versions to this day:

Photoshop CC 2024 brush engine

Maybe this doesn't really matter too much if you're normally drawing hero mode panels, but it does produce slightly different results when drawing sprites.

Also if anyone tries to sell you on using a square brush, disregard them. They're an idiot, plain and simple.

[lacebird]

THE GIFMAKER'S GUIDE TO SUBTITLES

Ever thought about subtitles? Want to learn how to make them? Look no further 'cause here's a tutorial all about them! I'm gonna show you my process of making subtitles on Photopea, but these tips can also be useful for Photoshop users as well. I hope you find this helpful!

FONT

I use a font that's already in Photopea (yaay no need to download anything!) called Open Sans. It's a pretty neutral font and I really love using it for subtitles. I always set the font to Extrabold Italics. Looks the nicest in my opinion!

Here's how it should look like at the top of your workspace:

Locate the font on the left tab, then find the extra bold setting on the right tab.

SIZE

The font size will depend on the width of your gif. For a full-width gif (540px) you can get away with something bigger, but if you have a two-column gifset for example, you'll need to make it smaller. For big gifs, my go-to is either 20px or 25px. Depends on how I'm feeling.

Here's an example to better show you.

Something you also want to keep in mind when subtitling is to have a nice gap between the bottom of the gif and the text itself. "Oh, but how can I find that?" I hear you asking. By turning on distances!

By turning on distances, you can see how big the gap is between the bottom and the text. In this example, I have it set to 15.

If you don't want to forget, you can always add a ruler and line it up with the bottom of the text. Then the rest of your subtitles (if you're making more), all go in the same place. To turn on the ruler function (if you haven't already, go to View > Rulers. You'll now see numbers on the top and the left side of your workspace. Simply drag from the top and a blue appears.

Now any text or shape will snap to that line automatically if you move it around. Now that's neat!

To finish this section off, here are the distances I use for each gif size. As you'll notice, I move the text down a little bit the smaller the gif becomes. But in the end, it's all up to you.

540px — 15

268px — 12

177px — 10

SPACING

What I like to do is increase the tracking so that there is a bit of space between the letters. I put it at 81%, but if you want the spacing to be wider that's cool too!

SHADOWS & OUTLINES

Shadows.... Very scary. But they don't have to be!

Here we have plain text. On its own, can be kinda hard to read. What we need to do in order to fix that is to add some shadows to make the text pop more.

Right-click on the text layer and open up blending options. Then check the drop shadow box and click on it. Set everything to 0, except for opacity (100%) and size (10px). Now you have a shadow all around the text.

Next to the drop shadow, click on the + sign to duplicate it. Change the angle to 137° and set the distance to 1px. Make sure to lower the size to 0.

Now duplicate that layer by clicking the + sign. Everything is exactly the same here, but change the distance to 2px.

Do this once again, changing the distance to 3px. Don't go over 3px, as the shadows will start to look weird!

Now the shadows are all done! This is how it looks

COLORS

Something that's pretty common is to use white and yellow for subtitles (if there are two people speaking for example). You're more than welcome to use those colours, but something I personally like to do is incorporate the subtitles with the gif so that it looks more cohesive. I always pick my text colour after the base gif is finished. Let's take a gif from this Indiana Jones set I made a few months ago as an example:

he looks so good in this movie aND FOR WHAt-

No subtitles... But that is all about to change (oOoOooO)

Write out your text like normal and select the text layer. Go to the character tab (looks like Tt) on the right side to open up it up. Click on the colour box (in this case it's white) so that the color picker appears.

Here's what the screen looks like after all that clicking we did

Then you chose... but chose wisely... (lol I'm gonna shut up now)

After I have my colour picked, I drag the dot around to make it lighter. I don't want it to be super bright, so I drag it towards the top and middle to get a bit of grey. That way, it looks a little muted as well as lighter which is what I personally like.

My tip here is to find the most dominant colour in your gifset if you want your subtitles to look cohesive! Here I've picked a colour, the brown wall behind him because it pops against the greyish tones on his blazer. Here's the final result!

We've now reached the end of this tutorial. I hope you've learned something new and that this makes you want to make MANY subtitles from now on. If you have any questions, don't be afraid to send me and ask. Also TAG MEEEE (#userlace) if you make something, I'd LOVE to see what beautiful gifs you make <3<3<3

[hansolz-moved]

can you make a tutorial on how you made your header please (of course you don’t have to if you don’t want to)

hi anon! unfortunately as i was doing so my computer died so i've lost the original one </3 but we'll just make a new one using the same steps hehe! see under the cut.

i'm using photoshop 2024. open ps, and create a new canvas that is 640 x 360 px. add the image of your choice. the original picture i used was already rotated, but if you still want that effect and yours isn't, rotate it by 90 degrees. size it to your liking then click the check mark! after that, click your pen tool (or press p). create a rough outline of the areas you want outlined.

after that, click make selection at the top. the settings that pop up are fine. press ok. then, go to your marquee tool and right click on your outline. select stroke. choose the settings and color you want, im using 2px and making it white.

with that done, we can get to work on your text. the original font i used is called payback. here, i am using the font 'grandma house sans'. i am using gradient overlay, stroke and outer glow. after you have your main text, create a rectangle shape underneath. you will use this as the path for your subtext. with the rectangle selected, grab the font tool and place your text within the rectangle. i'm using the font asenine wide. once you have selected your text, look on the right side of your ps at the text properties. scroll down to paragraph and click 'justify all'

i'm adding a drop shadow and outer glow to the text to accentuate it but that's all i'll do. when that's done, you'll want to use the line tool to draw a line between the first space. duplicate the line and drag it over to the other empty space. i'm using a 1px purple line. i'll also add a drop shadow and outer glow to it bc the colors are light.

now, we are going to go back to our rectangle tool. create a rectangle the same length as the rest of the text. its color is up to you, i'm using a gradient overlay the same colors as the main text so it's cohesive! grab your text tool and again, with the rectangle selected, place your text within it. this text will be your tumblr url (unless you don't want it to be haha). i'm using the same font, asenine wide regular. i've added a drop shadow to the text. this is how it should look.

now, we're going to grab the rectangle tool one more time and place a rectangle at the top that is the same width as the canvas. the height is up to you, mine is 14 px.

now, change your shape to the ellipse and create a circle within the rectangle that's about 8px wide + long. duplicate it twice and place them about 4px from eachother. you can change the colors, i'm going to leave one white and then use two shades of light purple.

now, head on over to the other side of your canvas and use your type tool to add your date (and time if you wish, i didn't). mine is seventeen's debut date :) i used the same font, asenine wide regular. this is what i have so far.

last but not least, we're going to add the particle effect. i screenrecorded effect #5 from this video. to make your life easier and save me from explaining the process, i've uploaded it as a psd here.

before you open the psd, open the timeline on your current canvas. this can be done by going to window -> timeline. mine is already open as you can see, once it is open click create video timeline.

then, you're going to go over to sparkles.psd and copy the 'group one' layer. paste it underneath your text! now, you're going to have the wonky problem of a gif that's significantly shorter than your other layers and cuts off, see here:

so to fix this, use this little thingy and drag it until it no longer goes over the edge of 'group one' in your timeline. it should look like this.

now, why is our overlay still blocking the rest of our image out? this is an easy fix, go over to layers, and with group one still selected, change the blend mode to 'screen'. bam!

finally, to achieve the background effect i have, create a new layer underneath all your other layers, then, go to the layer with your outline on it and use the magic wand tool to select everything outside of the line. go to your image layer with the selection still intact and go to image -> cut to remove the bg. i had to do this in 2 pieces.

then go to that new layer you created and make it whatever color you want. you can use a gradient map, solid color, whatever you want. i'm using a gradient fill similar to background colors, then over it i'm putting a crumpled paper texture (i just googled black paper texture haha) on screen mode. feel free to get creative. this is how it looks!

and that's all, your header is ready to use. go over to file -> export -> save for web (legacy) and save it to your computer. this is our end result! i did add a bit of noise to hoshi bc the image was low quality but otherwise, i did nothing that wasnt't outlined here!

i hope this was semi easy to understand! ♡

[usergif]

Hello there! Can I request tutorial for the white text on the Grogu gif from the blog header if UserGif accepts requests? It looks so cool. Thank you so much, UserGif. This blog is lifesavior for all new Gif makers.

hi! of course, we're always taking effect-related tutorial requests :) luckily, this effect is super easy to achieve! under the cut, I'll do a quick tutorial on how to turn any font into only its outline like this (and as seen on our desktop theme header):

1. arrange and format your text to your liking. here are the fonts I used in our desktop banner:

2. create a new blank layer and command + select the text you want to turn into an outline

3. with the dotted lines around your text, click on the blank layer you just created and go to edit > stroke (make sure your blank layer is highlighted as shown above otherwise the stroke won't have a layer to go to)

4. adjust the stroke settings to your liking. I prefer to make the stroke on the outside, and I'll usually go between 1-2px for the width

choosing center or inside will make the final shape of your outline match more closely to your original text, if that's what you want. here's a comparison of the different "location" settings:

5. then you can just delete or hide your original text layer to remove the "fill" and voila! you have your outline!

hope this helps!

[james-beaufort]

hi! do u mind explaining how u did the square overlay in this set? thank u sm 🫶🏽

hi sorry for taking so long to answer. i hope this helps and makes sense (if you have any other questions feel free to ask or I could even send you the psd if you want). tutorial below the cut as it's image heavy :)

So basically I started with my 2 gifs at 540x540 pixels. This isn't essential, but I'll also note that when I crop the gifs I like to uncheck the "Delete Cropped Pixels" box so that I can move them around after cropping in case I don't like how it was cropped initially.

For this gifset I ended up putting the two gifs and their colourings in a group with clipping masks for the colouring layers (curves, vibrance, etc). Making the two gifs into smart objects would also work and would be my usual preferred method, but for this particular set it was easier to use the groups so I could keep the colouring of the you weren't a maybe speech.

Once the gifs are overlayed on top of each other only the top gif should be visible (as below)

To create the grid effect there are some tutorials for versions of photoshop which have a setting where you can just input the configuration you want (e.g 4x4) and it will draw up the guides for you. Here is the initial tutorial I saw showing how to do that and another one I found just now which outlines the exact same grid effect as in my set. This way is easier than the way I did it, but my photoshop doesn't have the option 😭

For mine I created a New Guide by following the menu path "View > New Guide"

This opens up a dialog box that looks like this

As the guide menu is in cm I doubled checked what the size of the canvas is in cm. A 540 x 540 px canvas comes to 19.05 cm. I wanted to draw a 4x4 guide, so to start I divided 19.05 by 4. This comes to 4.76, so I input this value into the box and clicked ok.

To draw the other lines I just added 4.76 to each previous line drawn so that the lines were even. The guides ended up being (4.76, 9.52 and 14.28). I then repeated the same numbers but with the Vertical orientation button selected.

This gives you a guide which looks like this:

To start exposing the other gif I grabbed the rectangle select tool and started selecting the areas I wanted to mask. The tool should snap to the guides so it is fairly easy to stay within the squares.

Then I just masked over it with a black paintbrush

I continued on with this until I was happy with how it looked - this was my final result

And this is how my layer mask looked

To draw the lines I then selected the line tool and set it to white and 2px. To draw them I held down the shift button, which allowed me to snap the line I'm drawing directly on top of the guides and continue with it as all one shape.

When you draw on top of the guides they go orange

I then toggled the guide off by pushing ctrl + ;

I checked to make sure all the boxes and lines were aligned properly and just cleaned up the gifs by using the selection box and masking until it was perfect (as I'm very type A)

I set the line layer to "Lighten" blending mode and an opacity of 70% as I thought it looked better.

Then I just added the text and moved it around how I pleased.

[niceinchnails]

<div style="padding:10px;font-family:MS Gothic;border-radius:10px;border:2px outset YOURFAVCOLOR;background:linear-gradient(YOURFAVCOLOR, white, YOURFAVCOLOR, YOURFAVCOLOR);outline:4px ridge 2NDFAVCOLOR">Text here</div>

and thats how you do it

[judithonlinux]

AO3 Site Skin - DarkPurple

for @beastlyinstrument

Theme colors: #070707, #191919, #f2f2f2, #541f7b, #551f78

Code to copy below the cut ↓

#outer .region, #footer .group, .post fieldset fieldset, fieldset fieldset { background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea, #main .verbose legend, .verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover, #modal, .ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table { background: #070707; color: #f2f2f2; border-color: #191919; outline: #191919; box-shadow: none; }

#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a, #header .menu, #small_login, .group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index, #dashboard a:hover, th, #dashboard .secondary, .secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover { background: #070707; }

#header .dropdown .menu a:hover, #header .dropdown .menu a:focus, .splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover, #tos_prompt .heading, #tos_prompt [disabled] { background: #191919; }

#outer, .javascript, .statistics .index li:nth-of-type(even), #tos_prompt, .announcement input[type="submit"] { background: #070707; }

#header ul.primary, #outer #footer, .toggled form { background: #191919; }

#header ul.primary, #footer, #dashboard ul, dl.meta, .group.listbox, fieldset fieldset.listbox, #main li.blurb, form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset, #inner .module .heading, .bookmark .status span, .splash .news li, .filters .group dt.bookmarker { border-color: #070707; }

.group.listbox, fieldset fieldset.listbox, #main li.blurb, .wrapper, #dashboard .secondary, .secondary, form blockquote.userstuff, .thread .comment, .toggled form { box-shadow: -1px -1px 1px #541f7b; }

#dashboard .current, .actions a:active, #outer .current, a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover { background: #191919; border-color: #551f78; box-shadow: 0 0 1px #541f7b; }

input, textarea { box-shadow: inset 0 1px 2px #541f7b; }

li.blurb, .blurb .blurb, .listbox .index, fieldset fieldset.listbox, .dashboard .listbox .index { box-shadow: inset 1px 1px 1px #541f7b; }

#footer a:hover, #footer a:focus, .autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content { background: #541f7b; color: #191919; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus { background: #541f7b; color: #191919; }

#header #greeting img, #header .heading a, #header .heading a:visited, #header .user a:hover, #header .user a:focus, #header fieldset, #header form, #header p, #dashboard a:hover, .actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8, #tos_prompt .heading { color: #541f7b; }

#greeting .icon, #dashboard, #dashboard.own, .error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content { border-color: #541f7b; }

a, a:link, a.tag, #header a, #header a:visited, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus, #header #search input:focus, #header #search input:hover, #dashboard a, #dashboard span, #dashboard .current, .heading, .group .heading, .filters dt a:hover { color: #f2f2f2; }

a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider { color: #f2f2f2; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, #header .actions a { background: #551f78; border-color: #191919; color: #f2f2f2; box-shadow: inset 0 -8px 4px #551f78, inset 0 8px 7px #551f78; text-shadow: none; }

.actions a:hover, .actions input:hover, #dashboard a:hover, .actions a:focus, .actions input:focus, #dashboard a:focus { color: #551f78; background: #191919; border-color: #191919; box-shadow: inset 2px 2px 2px #191919; }

.actions a:active, .current, a.current, .current a:visited { color: #f2f2f2; background: #551f78; border-color: #f2f2f2; box-shadow: inset 1px 1px 1px #070707; }

.delete a, span.delete { box-shadow: -1px -1px 2px rgba(255,255,255.25); }

ul.required-tags, .bookmark .status span, .blurb .icon { opacity: 0.9; border: 0; }

#outer .group .heading, #header .actions a, fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 { text-shadow: none; color: #f2f2f2; background: none; }

#header .actions a, fieldset fieldset, .mce-container button, .filters .expander { box-shadow: none; }

fieldset fieldset.listbox { outline: none; }

form dd.required { color: #f2f2f2; }

.mce-container input:focus { background: #f2f2f2; }

.announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover { color: #191919; }

.announcement .userstuff a:visited { color: #551f78; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus { color: #551f78; }

.event.announcement .userstuff a, .filters .expander { color: #f2f2f2; }

.chapter p { font-size: 110%; }

[crimetimesteadicam]

First off, I am absolutely losing my mind over Supermassive Retinol Overdose it is so good I keep re-reading it!!! The art is so cool and I love how much of a mindfuck the story is

Second, how do you do the colored flashback textbox thing, if you don't mind me asking? At first I thought it was just an image but it's actual text with a cool ass dramatic box around it

Third, I am absolutely drawing Frenchbread like what a character I love her

thank you! i can't wait to see fanart lol make sure to remember her two sets of bangs. they're critical.

i'm answering this publicly because i don't trust tumblr to not eat the css. anyway this is the css for the first box, which is a <div> element:

#workskin .smokeDreamOne {

background: #110f0f; color: #E4A5A5; padding: 20px; border-radius: 35px; border: solid 2px white; outline: 3px solid #110f0f; box-shadow: 0 0 0 6px white, 0 0 0 10px #110f0f; margin: 20px 10px; }

#workskin .smokeDreamOne br {

display: none; }

each individual box has its own styling because i change the color of the background/text to match the image inside. this box is the "red" one at the beginning of the fic. the br element is there because AO3 puts fucking <br> tags on everything and i hate it so i make them vanish.

fyi in case you don't want to use this on AO3: this is not the ideal way to implement a four-border curved box as the border/outline/shadow rendering puts a lot of strain on some mobile browsers during the scroll action (side-eyeing safari), however due to AO3 css parser limitations it's a sacrifice i had to make lol

[wachi-delectrico]

hey um how did you code your search bar? sorry to bother ive just been googling around like a headless chicken and have no idea what im doing trying to customize my theme. ty for your time! sorry to bother

No worries! I made it based on the search bar from the theme itself, though by comparing the both of them I realize they hardly resemble eachother. Here's the CSS for mine: (note that .search-bar-disable and {select:Search bar} are specific to the theme I'm using)

.search-container { width: 100px; border-top: 2px border-radius: 2px; padding: 0 5px; padding-left: 2px; transition: 0.3s width ease-out; } .search-container.search-bar-disable { display: none; } .search-container li { padding: 2px 4px; width: 100px; padding-top: 2px; padding-left: 1px; transition: 0.3s; border-radius: 2px; transition: 0.3s width ease-out; } .search-container:hover { background: transparent; } .search-container input { font-size: 1em; padding-left: 3px; height: 20px; width: 100px; display: inline-block; color: #333; background: #f0e2d9; transition: 0.3s width ease-out; } .search-container input:focus { outline: 0; width: 139px; transition: 0.3s width ease-out; }

As for the search function itself, here's the html (the only thing I did, iirc, was add the "Search..." text to it)

<div> <li class="search-container {select:Search bar}"> <form action="/search" method="get" class="search-form"><input type="text" placeholder="Search…" name="q" value="{SearchQuery}"/></form> </li> </div>

I hope this ask got formatted correctly, for some reason tumblr didn't wanna let me add the html to it without adding and removing spaces in weird places first. I've also added colours to make it easier to see. Just in case, I've pasted this code here for easier reading/pasting/etc on your end

[glittergroovy]

[citrusinicake]

#workskin .rainbowStroke { -webkit-text-fill-color: black; background-image: -webkit-linear-gradient(-45deg,blue,magenta,red,orange,yellow,green,cyan); -webkit-background-clip: text; -webkit-text-stroke: 2px transparent; padding-left: 5px; margin-left: -5px; padding-right: 5px; margin-right: -5px;

}

edit: added four new lines to prevent bg clipping

spokeishere text (black text with rainbow stroke) if anyone wants it

idk if theres already a workskin that works just like/similar to this but i havent checked lol

breakdown of code for anyone too intimidated to play around with it (not an expert tho this is mainly just me listing down my conclusions after playing around with it, also written in a way thats assuming the reader knows fuckall about coding):

#workskin .rainbowStroke { -webkit-text-fill-color: black; background-image: -webkit-linear-gradient(-45deg,blue,magenta,red,orange,yellow,green,cyan); -webkit-background-clip: text; -webkit-text-stroke: 2px transparent; padding-left: 5px; margin-left: -5px; padding-right: 5px; margin-right: -5px;}

code name

> can be changed

> is what you use to define the code aka attach the properties to the actual text using text

text color

> webkit is what supports the existence of stroke hence why it's there and why you cant just use {color: black;}

> fill is what thickens the text, you can delete it but it makes the text harder to read

stroke colors aka the text outline

> deg is the way the colors are rotated, feel free to change the number and to make it positive or negative

what makes the stroke not just a square

> clipping for those of you unfamiliar with it just means it follows the shape of whats underneath it

stroke properties

> the px means pixels and indicates the size of the stroke

> transparent means it'll actually show whats underneath, it can be deleted but doing so will make the text moremuddy/desaturated

background overflow

> there to prevent the colors from being cut too short since nackground normally is almost the exact size of the text

> can be changed but will affect the colors, also having it too small will cause clipping

anything in black/white is code language properties, you cannot make anything without them

[mspaesthetic]

Tidbit: Persnickety About Posters

If you want to avoid overly dark or blurry posters in your fan adventures, then follow my lead:

1) Download JPEG off of Google Images.

2) Import, scale down, and skew/shear it. Use an interpolation method such as Bilinear or Bicubic Sharper. Doing both transformations at once is better than repeatedly transforming the image (i.e. resizing it, applying the transform, and then skewing it), as it helps prevent the image and edges from becoming too blurry. This will be important later.

You can hold down Ctrl + Shift to constrain the Move tool along a single axis so it won't go out of alignment as you're skewing it. If you don't see the Transform Controls by default, enable it in the tool options bar at the top, or go to Edit>Free Transform.

3) Desaturate it. Desaturate means to turn color grayer, until it becomes black and white.

4) Adjust the brightness and contrast using the Levels adjustment tool. It's much too dark as it is! In Photoshop, it is located under Image>Adjustments>Levels..., but I recommend creating an adjustment layer from the bottom of the layers tab instead. Doing so will allow you to make edits non-destructively, meaning you can go back and change any parameters until it looks right.

You could use a Brightness/Contrast adjustment with "Use Legacy" enabled instead to achieve a similar effect, but it won't clip the shadows and highlights as easily. You would have to create an additional duplicate adjustment and turn the brightness and contrast way down on the first one to do so. It's somewhat easier to use but less efficient than Levels in this case.

5) Apply a simple sharpen to the image as it is still too blurry for our purposes. In Photoshop, it is located under Filter>Sharpen>Sharpen... Do not use any other filter, such as Unsharp Mask, unless you absolutely have to in lieu of a basic one. If you must, turn down the radius a bit and the threshold all the way to 0.

6) Make a selection around the image. Ctrl + left click on the layer's thumbnail to make a selection around it. Doing it this way makes it inherit the level of transparency any pixels have. If you can't, use the Magic Wand tool with "Anti-alias" enabled to select the transparent area outside, then invert it using Shift + Ctrl + I, or go to Select>Inverse.

Create a new layer above the image, then go to Edit>Stroke... and add a black stroke with a width of 2px located Outside. Leave everything else at the default. Doing it this way will create a stroke with anti-aliasing based on the selection you made. This should generally turn out pretty sharp if you follow my advice from Step 2. If you had used the Stroke Effect available from the Blending Options' layer styles, it will always result in a very smooth outline instead. You do not want this.

Voila, and Bob's your uncle, you're done!

The instructions above are Photoshop specific, but it should still be pretty software-agnostic. Here is the recreation PSD, and below the read-more link are additional notes, such as transferring the steps to something like GIMP.

ADDENDUM

You may be questioning why I deliberately made the stroke anti-aliased. "Isn't that an MSPArt cardinal sin??", I hear you clamoring. Well, my dear readers, let me briefly elucidate you on why your ass is wrong. Exhibit A:

The clearly semi-opaque pixels that can be found in every poster outline, which is especially pronounced here in the Little Monsters poster. I can also see that Hussie actually created a stroke on the same layer as the poster and merged it down into the white background like a dumbass. I omitted this in step 6 for the sake of convenience (and also the fact that you can't add a stroke to a smart object in Photoshop without rasterizing it first).

He had to use the magic wand tool in order to extract it from the layer for this panel, and then fill it in with the paint bucket tool. I can even tell he had the color tolerance set up very high on the magic wand to grab all those near-black and very light gray pixels, AND he had anti-alias enabled and the tolerance on the bucket tool set to be at least higher than 0 to tint similar colors. Exhibit B:

I also didn't address exactly how to desaturate something in Photoshop. Honestly it was because I was feeling pretty lazy. I would have had to rewrite step 4 to not include redundant information about adjustment layers. You can add either a Black & White adjustment layer or a Hue/Saturation one and turn the saturation all the way down to 0. The resulting tones will be slightly different from each other but I'll explain why that is in another tutorial.

Speaking of another tutorial, read this one if you believe this post is missing the step of using a posterize filter.

Now onto applying some steps to GIMP.

RE: step 2) In GIMP, there is a dedicated Unified Transform tool separate from the Move tool, unlike in Photoshop where both features are combined into one. This is how you scale and skew (AKA shear in GIMP) both at the same time, among other things such as rotating.

You'll also find that instead of any interpolation methods labeled "Bilinear" or "Bicubic", there are only ones named "Linear", "Cubic", "NoHalo", and "LoHalo". Basically, Linear and Bilinear are the same, so are Cubic and Bicubic, naturally. I guess NoHalo would be similar to Bicubic Smoother and LoHalo would be kind of similar to Bicubic Sharper as well. It's not an exact 1:1, though.

Honestly it doesn't really matter what you use to reduce the size as long as it isn't None/Nearest-Neighbor. You're going to have to sharpen it no matter what. This applies to Photoshop as well.

RE: step 3) Go to Colors>Hue-Saturation... and repeat turning the saturation down to 0, or go to Colors>Desaturate>Desaturate... and select the Lightness (HSL) method.

RE: step 4) Go to Colors>Levels... or Colors>Brightness-Contrast... The Brightness-Contrast adjustment tool already functions almost exactly like in Photoshop with "Use Legacy" enabled.

RE: step 5) In GIMP 2.10, the developers squirreled away the basic Sharpen filter, making it inaccessible from the Filters menu. To use it, hit the forward-slash (/) key or go to Help>Search and Run a Command... to bring up the Search Actions window and type in "sharpen". Select the option that just reads "Sharpen..." and has a description of "Make image sharper (less powerful than Unsharp Mask)". I find that using a sharpness value of around 40 to be similar to Photoshop's sharpen filter.

RE: step 6) Instead of holding down Ctrl, you hold down Alt and click on the layer thumbnail to make a selection around it. Make a layer underneath the image this time since there isn't an option to place the stroke outside the selection rather than the middle. Go to Edit>Stroke Selection... and create a stroke using these settings:

I recommend keeping anti-aliasing disabled however, as GIMP produces lines that are a little too smooth for my taste.

With "Antialiasing" enabled

Without

If you're using a program that doesn't have a stroke feature available, you could draw a straight 1px thick line across the top of your poster, duplicate it, and move it down 1px. Merge them together, duplicate it again, and move it all the way down to the bottom of the poster. Then repeat the exact same process for the sides. I used to do this before I even knew of the stroke feature, haha.

Another reason I had to do it this way was because my dumb ass did the thing I said not to in step 2, scaling down the image with the scale tool, and then shearing it separately with the shear tool. This caused the edges to become too blurry to be used for a stroke automatically. Oh well, live and learn.

[apolocodes]

Hacer un skin solo con CSS parte 5

¿Ha llegado finalmente un nuevo tutorial?

Así es mis queridos olimpicos es momento de continuar haciendo un skin con solo CSS. ¿El tema de hoy? LAS CATEGORÍAS.

Retomando la línea de mis tutoriales anteriores hoy les traigo las categorías, a esta sección la dividiré en dos contenidos: 1. Cómo crear categorías y sus opciones. 2. Editar con css la zona.

¿Tienes ya tu café, té, chocolate o cerveza? Entonces empecemos.

#1 ¿Cómo crear categorías y qué opciones tiene?

• Panel de Administración - General - Categorías y foros

Aquí en el mismo renglón del título del foro encontrarán un + en verde. ¿Lo ven? Está medio escondido así que no se preocupen si no lo localizan a la primera. Una vez lo tengas podrás crear una categoría y señalar si quieres un foro.

¿Cuál es la diferencia entre categoría y foro?

La categoría ordena y agrupa los foros. Es el enorme título que suelen llevar arriba. En cambio los foros son los sitios destinados a crear temas y los que permiten la interacción con el usuario.

Una vez has elegido entre foro y categoría crearemos una categoría con foro.

Tenemos las opciones de poner una imagen, una descripción o ambos. Nosotros haremos las tres cosas así pueden aprender.

• Foro con imagen: En este caso yo elegiré un tamaño de 465x120px peeeroo... pueden elegir lo que quieran, les recomiendo que no sea más ancha que el wrap ni demasiado larga porque podría ser demasiado pesado para el foro y además podría quedar muy mal si se sale, lo pueden poner en la descripción o en la dirección de la imagen en este caso lo pondré en la primera.

• Foro con texto: Les recomiendo poner en inicio uno largo para que no tengan imprevistos. En esta parte Sí les diría que añadan un simple html que quede así:

• Foro con texto e imagen: Podemos ponerlo todo en la descripción ó poner la imagen en Dirección de la imagen y en descripción añadir

Para la explicación con hover:

ó para la explicación sin hover

.Recomiendo la segunda opción si quieres que el texto quede fijo o la primera si deseas ponerle un hover.

#2 Editar todo con css

Con esta base comenzaremos a codear el css. 1) ul.topiclist.forums : Esta zona abarca la totalidad de los foros en esa categoría. Aquí definiré un color, un borde abajo que marque el final, un borde que redondee la parte de abajo y cuanto espacio (margen) habrá entre categorías:

ul.topiclist.forums{    background: var(--oscuro);    border-bottom: 2px solid var(--acento1);    margin-bottom: 10px;    border-radius: 0px 0px 12px 12px; }

2) li.row : Esto abarca cada una de los subforos individuales, en este caso le pondremos un fondo, un borde abajo, y un margen, pero pueden probar lo que gusten.

li.row { border-bottom: 3px dotted var(--acento2);    margin: 5px;    background: var(--fondo); }

3) dd.dterm : Honestamente muchas veces en los skins me he salteado adrede esta zona, en otros no, el código de esta parte aplica a la zona del título de la categoría, el icono del costado y la descripción del foro, en esta oportunidad para mostrarles le pondré algunas cosas como un ancho y un padding.

dd.dterm { padding: 5px;    width: 62%!important; }

4) a.forumtitle : Es la zona del título del foro ¡Es hermoso andarlo editando! Les diría que jueguen mucho y se diviertan haciéndolo con cualquier idea que se les ocurrá en este caso añadiré los siguientes atributos.

a.forumtitle {    display: block;    text-align: center;    background: linear-gradient(45deg,var(--acento1),var(--acento2));    font-family: April Fatface;    text-transform: uppercase;    color: white;    font-size: 18px;    text-shadow: 1px 1px black;    letter-spacing: 1px;    width: 101%; }

5. Nuestra imagen se encuentra en dd.dterm img aquí pondremos algunas cosas, en mi caso difiniré el tamaño de imagen para que todas sean iguales, también pueden jugar con los blend-mode o ponerle simplemente bordes.

dd.dterm img {    border: 5px solid var(--oscuro);    outline: 1px solid var(--acento1);    margin-top: -5px;    width: 465px; height: 120px; }

6. Nuestro texto bueno aquí usamos un poco de html por lo que nuestra clase sería:.nuestrotextocate ¿Qué le pondremos? El tamaño (width, height, padding), el tipo de fuente y su color (font-size, font-family, color), la forma (display, overflow), bordes y decorados (border, outline). Recuerden que las cosas que les dejo realizadas son simplemente de muestra.

.nuestrotextocate {    width: 455px;    text-align: justify;    color: #ccc;    font-size: 13px;    height: 120px;    display: block;    font-family: 'Montserrat', sans-serif;    overflow: auto;    border: 5px solid var(--oscuro);    outline: 1px solid var(--acento1);    padding: 5px; }

7. Cómo se habrán dado cuenta nosotros hicimos dos tipos de texto así que ahora usaremos el que está junto a una imagen... y aquí viene la hora de jugar mucho.

Les dejaré algunas opciones: → Hacer que el texto este sobre la imagen (cambia el color del background por transparent o uno con la opacidad bajada):

.nuestrotextocate2 {    background: #58c3664d;    height: 110px;    display: block;    position: absolute;    width: 455px;    margin-left: 5px;    padding: 5px;    text-align: justify;    font-size: 12px;    overflow: auto; }

→ Hacer que el texto este a un costado de la imagen (juega con el margen-left para ponerlo del lado que desees), recuerda que puedes ponerle el color de background que quieras:

.nuestrotextocate2 {    background: #58c3664d;    height: 110px;    display: block;    position: absolute;    width: 216px;    margin-left: 5px;    padding: 5px;    text-align: justify;    font-size: 12px;    overflow: auto; }

→ Hacer que el texto aparezca vía hover ¡UY UY UY SE COMPLICA LA COSA! Bueno no desesperen esta parte puede ser más compleja pero intentaré explicarlo lo mejor posible.

¿Recuerdan que les había dado esta opción? :

Lorem impusi...

Bueno con esto usaremos dos partes en el css la primera se llamará .nuestrotextocate1 y la segunda .nuestrotextocate1:hover

Les explicaré el más simple (en mi humilde opinión), lo primero será ponerle altura, ancho, color de fondo, display: block; la posición: absolute y opacity: 0; con esto estaremos realizando una cajita (que no la podremos ver porque le pusimos 0 de opacidad), además hay que añadir las propiedades de fuente y las transiciones (esto nos dirá el tiempo que tarda en realizarse el efecto). Les debería quedar algo así:

.nuestrotextocate1 { background: var(--acento2);    position: absolute;    height: 110px;    display: block;    margin-left: 3px;    padding: 5px;    width: 455px;    text-align: justify;    color: #ccc;    overflow: auto;    opacity: 0;    -webkit-transition: all 0.4s ease-in-out 0s;    -moz-transition: all 0.4s ease-in-out 0s;    transition: all 0.4s ease-in-out 0s; }

Luego hay que añadir la palabra :hover y la opacidad: 1, nos quedaría así:

.nuestrotextocate1:hover {opacity: 1;}

Llegamos al último tramo del tutorial ¡Se hizo gigante! Ahora tenemos que acomodar los números del costado y el último tema.

dd.topics : Es para editar la zona que nos dice la cantidad de temas.

dd.posts : Es el sitio de la cantidad de post.

Yo pondré ambos con el mismo código para ahorrar líneas de css

dd.topics, dd.posts {    width: 17%;    display: inline-block;    background: linear-gradient(45deg,var(--acento1),var(--acento2));    margin: 5px;    text-align: center;    color: #ccc; }

Bueno aquí pondré algo extra en el panel de administración iré a "Índice - Estructura y Jerarquía:  Mostrar los avatares en la columna "Últimos mensajes" Sí" con eso nos mostrará el avatar del último usuario en responder (no es necesario añadirlo).

dd.lastpost {   background: linear-gradient(45deg,var(--acento1),var(--acento2));    margin: 5px;    width: 35%;    height: 103px;    font-size: 17px;    color: #ccc; }

La parte de la imagen:

.lastpost-avatar img {    width: 65px;    height: 90px;    border-radius: 5px;    -moz-border-radius: 5px;    -webkit-border-radius: 5px; }

¡Y ahora sí se ha acabado! Nos vemos en el siguiente :D

[zaytri]

do you specifically want a smooth 2px text outline in CSS?

just slap this CSS in there and it'll work nicely

.text-outline-2 {   --outlineColor: rgb(0, 0, 0);   --outlineColorLowOpacity: rgba(0, 0, 0, 0.25);   text-shadow:     0 -1px var(--outlineColor),     0 1px var(--outlineColor),     -1px 0 var(--outlineColor),     1px 0 var(--outlineColor),     0 -2px var(--outlineColor),     0 2px var(--outlineColor),     -2px 0 var(--outlineColor),     2px 0 var(--outlineColor),     -1px -1px var(--outlineColor),     1px -1px var(--outlineColor),     -1px 1px var(--outlineColor),     1px 1px var(--outlineColor),     -2px -2px var(--outlineColorLowOpacity),     2px -2px var(--outlineColorLowOpacity),     -2px 2px var(--outlineColorLowOpacity),     2px 2px var(--outlineColorLowOpacity),     0 0 1px var(--outlineColor),     0 0 2px var(--outlineColor); }

it'll look something like this:

if you want an explanation of the text-shadow layers:

first 4 lines are 1px edge offsets

next 4 are 2px edge offsets

next 4 are 1px diagonal offsets

next 4 are 2px diagonal offsets with the outline color at 25% opacity

and then the last 2 lines are just a 1px and 2px blur