Jump to content

Recommended Posts

  • Advanced Members

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: Skip] Hide 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: Skip] Show 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: Skip] Save 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: Skip] Plug 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: Skip] Or 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.

  • Award 2
Link to post
Share on other sites
  • Advanced Members

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.

  • Award 2
Link to post
Share on other sites
  • Advanced Members

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;




  • Award 2
Link to post
Share on other sites
  • Advanced Members

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.

  • Award 2
Link to post
Share on other sites
  • Advanced Members
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.

  • Award 1
Link to post
Share on other sites
  • Navith pinned this topic
  • Navith unpinned this topic
  • Navith locked and unlocked this topic
  • 4 months later...
  • Brandon changed the title to Free Assets
  • 3 months later...
  • Angelo changed the title to Free
  • Advanced Members
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.

  • Award 1
Link to post
Share on other sites
  • 5 months later...
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.