Recruitment
Application
1
 
Who's Online
None
 
Post new topic   Reply to topic    Alone Forum Index -> Videos
View previous topic :: View next topic  
Flynnt
Shawover
Member

user avatar

Joined: 15 Mar 2009
Posts: 377

Send private message
Reply with quote

re: Twitch.tv - Imagery & Question

0
A while back (somewhat of a long time ago now) someone asked me about some imagery for their twitch tv live stream to make it look a little nicer for viewers.

At the time I was pretty busy with things and didn't get around to it, but I've got some basic stuff now that may be useful for you. Provided is a "logo" for the banner, offline video image and background. The .psd files are also included if you want to modify anything. To optimize the file size for download speed it's compressed in .7z format. I use 7-zip but there's other programs that can decompress it as well.

And now for the question - Who are all the live streamers these days in the guild? I know Rani has one, but who else streams? If you're ok with it I was gonna include links to your streams on my site to help promote our guild a bit and help get more viewers.


Links:
Class Icons
Twitch.tv Imagery
7-Zip

Here's a preview of what the stuff looks like in use.
Sacredqt

user avatar

Joined: 15 Oct 2010
Posts:

Send private message
Reply with quote

re: Twitch.tv - Imagery & Question

0
I think it was me who asked. But I can't remember. I kind of like my background although I want to change it. Also I have no idea how to add links with an image overlay and that is what I really want to do. But yea looks very awesome Flynnt. I have some questions specifically about my stream whenever you have the time. But here is my stream: http://www.twitch.tv/sacredofbfist


_________________

"I am alone in the Darkness. A flame that glows in the shadows."
Fistulingus



Joined: 25 Jun 2008
Posts:

Send private message
Reply with quote

re: Twitch.tv - Imagery & Question

0
Here's a how-to for that, Sacred. You'll need to photoshop / mess with html coding, but it's not that hard.

Flynnt
Shawover
Member

user avatar

Joined: 15 Mar 2009
Posts: 377

Send private message
Reply with quote

re: Twitch.tv - Imagery & Question

0
Mmm I'd strongly advise against page creation via photoshop. It's essentially the same thing as making html content using tables which is pretty much the very first thing you learn not to do when writing web code. :p

Conveniently, though, it's pretty easy to build styled html with floats, though. I can help with that if you want. If I get time I may even be able to build a little php page that can auto-generate the code for ya.

Take, for example, my forum signature. It's built with html. If I did it using hyperlinked images or tables it'd be a royal pain to make any changes to it.


^^ After writing some html for Twitch I realized just how ridiculously limited Twitch really is in what html/inline-styling they allow. After seeing this, chopped up images may just be a better method for maximized styling (as much as I hate to say that - the web coder in me is cringing with disgust >.< )


Edit:

Here, I went ahead and wrote this a moment. This is basically what you already have up on your twitch page except this is in html. Description should be a breeze to edit.

Code: Select all
<div style="border:1px solid #252525;background-image:url(http://i.imgur.com/vihkPll.png);text-align:center;padding-bottom:15px;">
<img src="http://speedtest.net/result/2412001695.png" alt="Image Not Found." title="My Internet Speed" style="margin-top:10px;margin-bottom:10px;" /><div style="background-image:url(http://shawover.com/Files/images/misc/sacredCharacter.png);background-position:right top;background-repeat:no-repeat;text-align:left;margin-bottom:15px;">
<img src="http://i.imgur.com/tEJXyEG.png" alt="" title="" /><div style="width:275px;background-image:url(http://i.imgur.com/vihkPll.png);padding:15px;line-height:1.5em;font-size:1.1em;float:left;">

<h2 style="color:#454545;margin-bottom:10px;">My Bio</h2>
<p style="color:#454545;">
Hi, My name is Alex and I play a retribution paladin named Sacred. I've been playing my paladin since Wotlk but I did not begin to get into progression raiding until Cataclysm. It took me a while to get good at this game but now I am at a point of achieveing rank 1s as retribution including my permanent rank 1 on Heroic Ultraxion 25m. If you have any questions about retribution, please feel free to ask as I can answer most questions ranging from the basics of rotation to the specifics of simcrafting.
</p>

</div>
</div>
<a rel="nofollow" href="http://us.battle.net/wow/en/character/aerie-peak/Sacr%C3%AAd/advanced" target="_blank"><img src="http://i.imgur.com/YpDldkB.png" alt="Img not found" title="My Armory" /></a>     
<a rel="nofollow" href="http://aloneguild.guildlaunch.com/forums/viewtopic.php?t=1736541&amp;sid=b1efaefb6836980cb5c4249c7be69bfe&amp;gid=62995" target="_blank"><img src="http://i.imgur.com/zPUmvWf.png" alt="Img not found" title="Apply to Alone" /></a>
</div>

Preview

As I was writing this I found out that Twitch.tv is waaaay more limited in what they allow in HTML than I'd realized. I wasn't able to include a lot of different things because Twitch doesn't allow it. Some of the things it wouldn't support were:
1) Javascript to open links in new tabs,
2) Any sort of CSS - all had to be inline styling,
3) Border-radius for rounded corners,
4) Box-shadow for any drop shadowing,
5) RGBA background colors supporting transparencies,
6) Gradiented background coloring,
7) Button elements for customized hyperlinks (really don't know why they dont allow these, they're basic html...) and finally
8) Min-height property which just stretches the layout to a minimum width so a certain portion of your character image always shows (wound up needing to make an image spacer for this which is normally a really stupid thing to do)
Sacredqt

user avatar

Joined: 15 Oct 2010
Posts:

Send private message
Reply with quote

re: Twitch.tv - Imagery & Question

0
Lol yes I know this is HTML and I know what is on my twitch page. Because, we'll, I coded it in lol. But I just did some very basic stuff and I have really no clue hot to photoshop and add those embedded links into pics. But it's ok I'll probably just pay someone to do it for me after I get my new router so I can actually stream high quality.


_________________

"I am alone in the Darkness. A flame that glows in the shadows."
Ranikotar
Member

user avatar

Joined: 01 Nov 2008
Posts: 814

Send private message
Reply with quote

re: Twitch.tv - Imagery & Question

0
=o just saw this! Thanks Flynnt.

Probably gonna throw mine up again in 720p since I have some good internet again ^_^


_________________
[G] [Eneia]: ima cool nigga from da ghetto like urself

Ranikotar#1685
Ranikotar
Member

user avatar

Joined: 01 Nov 2008
Posts: 814

Send private message
Reply with quote

re: Twitch.tv - Imagery & Question

0
Stole and merged one of your banners and backgrounds to make a chat cover

I LOVES YOU FOREVER AND EVER <3

http://www.twitch.tv/ranikotar no clue why the class icons are showing up as giant icons =o
nvm apaprently twitch is gay and resizes ANY image to 320pixels wide no matter what size...


_________________
[G] [Eneia]: ima cool nigga from da ghetto like urself

Ranikotar#1685
Posts from:   
Post new topic   Reply to topic    Alone Forum Index -> Videos All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
 
 
Last Forum Posts
WoW Progress
1