Jump to content
Navith

Free

Recommended Posts

1440p Outer Tutorial

  1. Make a 2560*1440 px image. http://i.imgur.com/jKqeg5i.png
  2. [xatspaces: Skip] Put a 728px column in the center. If you're using Photoshop, download GuideGuide and use the custom code
    ~ | 728px | ~ ( vl )
        This is your template.     oJSNzV2.png
  3. Make your masterpiece. YguY9Fq.jpg
  4. [xatspaces: SkipHide all of the effects from the template so that none of it shows. http://i.imgur.com/VzAxJBL.jpg
  5. Save this as its own image. In Photoshop, use Save For Web and make it a JPEG with quality between 90 and 100.
  6. [xatspaces: SkipShow the template again and hide the rest of the background. http://i.imgur.com/VzAxJBL.jpg (The checker pattern is the normal way to show transparency)
  7. [xatspaces: SkipSave this as its own image. It must be a PNG. In Photoshop, use Save For Web again but choose PNG-24 with transparency enabled.
  8. Upload both of those images to the euphoric uploading website imgur.
  9. [xatspaces: SkipPlug those images into Lord Nicebits' CSS outer template (if you're putting these on a chat): 
    background:url('link to template image') center fixed no-repeat,url('link to outer backdrop') center / cover fixed,#backup_hex_code}#chat embed{background:url('link to chat inner')}table:nth-of-type(3) td:first-child{width:24px}table:nth-of-type(3) td:nth-of-type(3){width:1px}table:nth-of-type(3) td:last-child{width:25px}table:nth-of-type(3) td:nth-child(even):nth-child(-n+5){display:none}#media embed,#control embed{margin:0 1em}div[style*='height:90']{height:90px}::selection{background:#000;

     

  10. [xat chats: SkipOr if you're using this for a xatspace, plug it into this. If the rest of your CSS isn't pure garbage you should be able to add this before that and have it still work. 
    background:url('link to background') center / cover fixed,#backup_hex_code}

     

Congratulations, now you know how to make 1440p outers. Please use this knowledge for all of your backgrounds.

  • Like 1

Share this post


Link to post
Share on other sites

Cutting Edge for Chat Outers
Did you know that the Cutting Edge® can be modified to work with chat outers too?
Of course you didn't because you're just an average person who uses xat.
skipping to code


   
 

background:
url('http://img713.imageshack.us/img713/9295/t3b4.png') 0px 68px scroll repeat-x,
url('http://img703.imageshack.us/img703/5820/xhdc.png') 0px bottom scroll repeat-x,
url('http://img162.imageshack.us/img163/3589/8z93.png') 38px 100px no-repeat,
url('YOUR OUTER HERE SON') center fixed no-repeat,
#fallback_color;
 
But where do you put this? I hope you know.

  • Like 1

Share this post


Link to post
Share on other sites

Cutting Edge for xatspaces

background:
url('YOUR XATSPACE BANNER HERE, IF YOU DON'T WANT ONE DELETE THIS WHOLE LINE') top 146px right 16px no-repeat,
url('http://img837.imageshack.us/img837/3118/85sa.png') top 130px center repeat-x,
url('http://img839.imageshack.us/img839/933/41n1.png') bottom 38px center repeat-x,
linear-gradient(to bottom, #000 0, transparent 64px) top 130px left repeat-x,
linear-gradient(to top, #000 0, transparent 64px) bottom 38px left repeat-x,
url('YOUR XATSPACE OUTER HERE') center fixed,
#fallback_color;




  • Like 2

Share this post


Link to post
Share on other sites

xatspace Banner on the Right
Do you see the UNCOOL empty space on the far right on your xatspace? Of course you want something COOL there!
This is a super cool thing for super cool people like you to do!
Follow these really cool steps to do a really cool thing and be really cool!

  • Make a 120*600 px image
  • Fill the image with the same background as you use for your About sections
  • Put whatever you want on top there
  • Save your masterpiece, Picasso.
  • Upload it to the super cool image hosting service imgur
  • Copy the link

Seductively use this code:

background:
url('YOUR SUPER COOL BANNER HERE') top 146px right 16px no-repeat,
url('YOUR XATSPACE OUTER HERE') fixed,
#fallback_color;

And put it in the box that the xatspace cutting edge goes in.

Tips:
Get rid of your outlines. They ruin this.

  • Like 2

Share this post


Link to post
Share on other sites
Quote

You made all of this?
Really good.

On 3/6/2016 at 2:04 PM, xatAzure said:

Jake, you probably have given out the most graphics resources. They all look very nice, as always.

On 3/20/2016 at 3:46 PM, Toki said:

Thank you so much for this:)

On 3/29/2016 at 10:55 AM, kariim said:

Nice Job

On 3/29/2016 at 3:55 PM, 77750057 said:

Impressive work, Jake! 

Quote

*Compliments*

 —

Quote

Beauty

Thanks

 —

Quote

It looks great!

 —

Quote

*Compliments Jake and his great work.*

(I was not forced to reply to this post at all.. nu-uh.)

 —

Quote

ohhh! that is cool! nice job :d

 —

Quote

Most people will come to appreciate what you have here, considering I hate seeing blank xatspaces. It's not that they are required but I like seeing xatspaces filled with purpose. That's what they were made for. I hate seeing work go to waste. Thank Darren for making them. :)

 —

Quote

*bows down to Sire R Navith*

 —

Quote
Quote

One template to blur them all, one template to align them, one template to flatten them all and to yoloness lead them. -- The Lord of Swag

Nice template, bruh!

 

Quote

So beautiful.
Oh yeah, the template's pretty cool, too.

Quote

Great job! The template looks amazing.

Quote

This is absolutely beautiful.
Must download!! :')

Quote

*downloads*
nice work

Quote

I adore the blur styles. Thank you.

Quote

It's beauty

Quote

Nice template dude.

Quote

:o Awesome !!! Downloadin' it .. :o

Quote

Danke monsieur
Nice template

 

I give thankyous.

  • Like 1

Share this post


Link to post
Share on other sites
On 1/3/2018 at 5:41 AM, ANGY said:

The download links have stopped working :(.

The links have been fixed. Private message me for a faster response whenever something goes wrong.

 

Dropbox deactivated the links sometime, and I'm not sure when or why.

  • Like 1

Share this post


Link to post
Share on other sites

 

Thanks for the idea, it will be great for those starting in the designer and for those who need resources.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign in now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.