RP

                     ☼ °｡ ●  THEME PACK #1 BY MUSECENTRAL : .

MUSECENTRAL THEME #10. PANORAMA

INCLUDES: 400px posts, 842x150px header image, 316x199px sidebar image, two 90x90px admin images with hover descriptions, customizable with colours & fun navi sidebar with dropdown links.

do not steal/take parts and use in your own code. do not use as a base code and PLEASE LIKE/REBLOG IF DOWNLOADING!

LIVE PREVIEW x CODE

MUSECENTRAL THEME #11. SIMPLE & SWEET

INCLUDES: 400px posts, 750x100px header image, four 50x50 icons, 530x740px hover png, greyscale option, hover titles, inverted iframe controls, font awesome icons & customizable colours.

do not steal/take parts and use in your own code. do not use as a base code and PLEASE LIKE/REBLOG IF DOWNLOADING!

A KAITRPS THEME (003) ;; GREEDY

thanks to mega inspiration from the album of the year dangerous woman, i’m back with another theme! it’s a cute & kind of simple contained theme, & i used the same base code i used on my first theme. i designed it with rph/rpts in mind but it could definitely work for a main as well. you can edit for personal use if you’d like, but please don’t edit & repost. please be sure to keep the credit where it is! if you’re going to be using this, please like or reblog.

FEATURES ( image sizes are on the preview )

1 header image

1 sidebar image 

2 sidebar icons

4 customizable links

400px posts

Fonts pack found by adventureps, enjoy them and don’t forget to like or reblog if u download, thank you all.

Let’s talk about contrast for a second. Contrast is, to put it bluntly, the difference between two objects and/or entities, and is a key in graphic design. People use it in different ways, especially in roleplay, which is good! However, there is a slight problem when your themes and/or graphics look like this:

You really can’t see the container nor the Toriel ( yes, ‘tis a pun ) used for the sidebar very well, and while it can be worse, this is a bit of a problem —- especially for people who have trouble and/or don’t enjoy stuff with eye strain. Now:

This looks a bit better, right? You can clearly tell the difference between Toriel and the container, and this is without much tweaking! Just differences in terms of the multiply and screen layer types ( a tutorial on it will come on a later date ) goes a long way, and it really does help in the long run with how people read and see your blog!  And, another thing, we also must talk about fonts.

Like we have done with the Toriel theme, this isn’t very visibly; there isn’t much contrast, leading to struggles with eye strain. While this is just an example in terms of, say, a promotion graphic, this also applies to general font issues in HTML regarding an actual theme page; people can’t really read this, and it’s a struggle to spend so much time deciphering what a small amount of words is, and this isn’t even getting into actual font usage. 

Super easy lil trick for removing backgrounds without completely compromising hair integrity (gonna use my favourite baby in the world to explain this because he has the perfect hair for it).

1. Using your weapon of choice (I use the polygonal lasso tool), select the shape of the model’s hair and then click the “Refine Edge” button (highlighted towards the top in the example).

2. Under View Mode, change View to Black & White; under Edge Detection, select Smart Radius and set the Radius to 1.0. LEAVE EVERYTHING ELSE AT 0 (my Shift Edge got rebellious for the screenshot, but really, leave it at 0).

3. Now WITHOUT HITTING OKAY AND WITH THE REFINE EDGE WINDOW STILL OPEN, take your cursor (should be a circle with a plus in the middle) and drag it along the very edge of the black silhouette where the hair is. You should start to see it peeking through in a very defined manner if you’re doing it correctly. Once you’re finished selecting all the hair, hit OK.

4. What Refine Edge does is it seeks to separate the contrasting colours (the off-white backdrop from his dark hair). It will select as much of the background as possible so you can more easily get rid of it.

5. Hit delete. And bam! Instead of an awkward flat edge, you have pretty, mostly intact curls. But because this method is not without its flaws, some parts of the hair can look crispy or it can remove too much in spots. We can fix that…

6. by taking the Smudge tool, setting it to between 1-3 pixels (depending on strand width) with a strength of around 85, and slowly dragging from his hair to create new curls and fill in the bald spots.

I hope that helps!

Hi there, anon! This was actually something I looked at a long time ago, and I was pretty put off by its complexity (hence why you’re not using Rabbit’s Empire of Amazing Fonts for all your graphic-making needs).

From what I’ve seen, the basic steps are designing your letters, which can be drawn by hand and then scanned, drawn with a tablet, or even created in whatever software you’d like to use. Once you have the typeface created, you put it through your font software, which generates your font–but you have to worry about the overall design, kerning, other mysterious and arcane properties, and so on, since all of that stuff changes how versatile and readable your font is.

I don’t really have experience with this, so I’ll direct you to folks who know better! Here are some links that might be able to help you out:

So You Want To Create a Font: Part 1, Part 2

Tips for making your own font

Everything You Need To Create Your Own Fonts For Free

Thinking with Type

Hi, everyone! Although I wasn’t 100% satisfied with this graphic–it’s definitely not one of my most inspired–I think it’s a pretty good illustration of the kind of stuff I’ve got in my Bag of Photoshop Tricks, since I used all my standard techniques here! I didn’t think it merited a full tutorial, so I thought I’d go with a process gif instead.

Some stuff that might be noteworthy, if you’re interested:

I use reversed, black-to-transparent reflected and radial gradients to create a spotlight effect on the focal point of my image. I discuss using these kinds of gradients in this tutorial.

Putting down some kind of brush behind the main figure of the graphic (in this case Cate Blanchett) helps fill the empty, dark space, direct attention to the figure, and create an area of lighter color for the brushes/textures/etc. I add later to “hook onto,” in a manner of speaking–otherwise, they would not be as visible.

Several of the textures I add are not textures, but actually paintings in the public domain. Breakfast with a Lobster by Willem Claeszoon Heda is rotated and set to Soft Light, creating some interesting, abstract shapes. The Bull by Paulus Potter is blurred and set to Soft Light, adding color and light to the image. The painting that is most visible is Gerrit Adriaenz. Berkheyde’s The Great Market in Haarlem, which provides the building you see in the splash of color.

The texture I feel really brings the whole image together is one from Texture Pack 18 by sirius-sdz on Deviantart. It adds a kind of metallic feeling to the graphic, as well as a sensation of brushstrokes and movement.

Hello graphic makers!! You’re probably aware that there is a huge problem on tumblr with whitewashing. As a predominantly disney-based blogger, the whitewashing I personally see are from the disney fandom, so I’m going to use screencaps from those movies to show you several quick techniques so you’ll see just how easy it is to have your pretty bright and pastel colour palettes and not whitewash characters of colour.

/horizontal line on my theme. If you could, It'd be a big help if you could give me a few pointers on how I could do that? Thanks in advance!

hi there anon,no problemo - here’s a little tutorial on using

/horizontal line in your posts, your theme or on your pages…

is just another tag that can be used like for bold or for italics. 

if you want just a plain line anywhere in your posts or pages, then in the html, just drop an

tag into the html 

and it will put in a line/divider like so -

the divider will usually be a basic style and will default to the same colour as the text within that section, however you can style this with css just as you would for any other object on your theme.

you will need to create a new class for your

section… (you can style this without using ‘divs’ but often it carries over the basic style, so this method, using the ‘display none’ for the original

style means it’s easier to style and you have way more options open to you!

for example;

div.hr {  margin-top:5px;  height: 5px;  border-top: 1px dashed #8c8b8b;  border-bottom: 1px dashed #8c8b8b;  background:transparent;}

div.hr hr {  display: none;}

then instead of just using

in your html, you will need to use the reference to your new css… 

this will give you something that looks like this - 

or - you could go all out and throw in an image for a background…

div.hr {  margin-top:5px;  height: 15px;  background:url(IMAGEURLGOESHERE) repeat-x 0 0; border: 0;}

div.hr hr {  display: none;}

or use a gif…

drop this in in your theme if you want dividers between posts, or on your pages to separate sections…

you can use any kind of css to style your

section as it’s just being counted as another div in your theme or on your pages… :3

You can make the original, default styling of an <hr> tag invisible like this:

hr { border:0px; … }

If you keep that border:0px; first, then add more styling below it, it will keep the default style hidden and add on your extra borders, images, backgrounds, etc. :) To use the example from your tutorial:

hr { border:0px; margin-top:5px; height: 5px; border-top: 1px dashed #8c8b8b; border-bottom: 1px dashed #8c8b8b; background:transparent; }

This CSS produces a divider with this appearance. No need to define a new div class!

Similarly to my previous process gif, I used a lot of my standard Photoshop Tricks in this background image for the current theme on my main roleplay blog. I don’t think any one of these techniques warrants a tutorial in itself, but, as before, I thought I could compile them here for your viewing pleasure. :)

Some notes that may be helpful:

The image of Cate Blanchett and Lily James (as Lady Tremaine and Cinderella from Cinderella 2015) is actually a Smart Object. The reason it pops onto the canvas already cut out of its background is because I masked out the background before making it a Smart Object. Masking the background first, then making it a Smart Object, gave me a layer with a transparent background I could use for creating selections for masks when using textures/brushes/gradients later. You’ll notice it also already has a coloring applied–this is because Smart Objects can have nondestructive filters (in this case, two Selective Colorings and a Hue/Saturation) attached, but they don’t really animate well in gifs :P

In Frame 4, the image suddenly develops lightish gray shadows in the same color as the background. This was very simple: I sampled the background color, filled it in on a new layer, clipped the layer to my image using a Clipping Mask, and set the color layer to Lighten. This works best with images that already have very deep, dark shadows, and with colors that don’t look too outlandish/unrealistic. This is a great way to unify an image with its background.

The blue gradient between Ella and Lady Tremaine was originally a red-yellow that matched the textures and brushes around them. I changed it to blue to create contrast with the many red tones in the image and to develop a tension between the red colors, which are mostly on Lady Tremaine’s side, against a blue that would echo the color of Ella’s dress.

On the first text to appear (”You can wipe your feet on me…”) you’ll see one of my favorite text tricks: non-traditional Drop Shadows. Rather than having a black shadow, this text has a red one that matches the brush behind it, making it more visible, but also making the second piece of text (”You can’t get me out of the story”) more dramatic by contrast. There is also a slight color difference between the two pieces of text (the first is a light gray, the second is pure white) as well as the obvious size difference, both in order to emphasize the second text layer.

I used multiple grunge brushes and textures on this image, some that I’ve had for a long time, and some that I’ve made myself. Grunge brushes/textures, even if you’re not using them to evoke a really grungy feeling, are a great way to give an image “teeth”–to provide something for the eye to catch on, so that your subjects aren’t hovering on a perfectly smooth, featureless field. This step is a reminder of the importance of building a good texture and brush library–I didn’t have to go looking for anything new; it was all there already!

Absolutely, I would love to! (And thank you so much for the compliment!)

For others’ reference, this is the theme we’re discussing. What you’re describing is that, as you make the browser window larger or smaller, the background image and posts move along with the window, like this:

I accomplished this by placing all the necessary items (the background image, the post markup) inside a div, then making the div positioned. After that, I made use of the top, right, bottom, and left properties to place the div where I wanted it on the page. You can position any element on a page this way using these properties!

Here is the code I used to style the div, with relevant properties in bold!

  #postcontainer {     background-image:url(http://i.imgur.com/ABkGi50.png);     width:1000px;     height:696px;     position:fixed;     right:0px;     bottom:0px;   }

The position property is a bit tricky to explain! To put it as simply as I can, position:fixed; lets me put my div anywhere I want on the page, and to position it using, in this case, the right and bottom properties. I’m going to add some links at the bottom of the page which have fuller explanations, and if you’re confused about this part, please let me know and I’ll talk more about it!

The right and bottom properties, as you can see, are both set to 0px. This puts my #postcontainer div flush with the right and bottom sides of the page – it is 0 pixels away from either one, and it wants to stay that way. When you make the browser smaller like in the above gif, #postcontainer stays in its spot, 0 pixels away from the right and the bottom.

You can see this if you try to make the browser smaller in other ways, too!

When I pull in the browser from the left side, the #postcontainer div doesn’t care. It stays where it is, on the right, because that’s where I positioned it. If I pull up the browser from the bottom, the #postcontainer div moves with it, because it wants to always stay flush against the bottom of the browser.

(As you might notice in the gif, it is the bubble on the bottom left – which is actually the updates tab – that moves when you pull in the browser from the left side. That’s because the updates tab is positioned 0px away from the left, as opposed to #postcontainer, which is 0px away from the right.)

As an addendum, the reason that the blog posts themselves move with #postcontainer is because they are actually in a div nested inside #postcontainer, like this:

                  …     

When #postcontainer moves with the browser (or doesn’t), it takes the posts with it.

Here are some helpful links that discuss positioning elements:

The “position” page of LearnLayouts.com

“Position” on Css-Tricks.com (one of my favorite websites!)

“Position” on the Mozilla Developer Network (NB: the language here is more technical and may not be as clear as the two pages above)

txtn → shrunken and tiny small text.

manytools → smallcaps text tool.

megaemoji → smallcaps text tool. 

addictivetips → tiny subscript text.

qaz

megacooltext

messletters

webestools

cool-letters-generator

symbols tag