Upvote Upvoted 43 Downvote Downvoted
1 2 3 4
Casting HUD Design Contest
posted in Projects
1
#1
whitelist.tf
0 Frags +

As a hud developer and creator of my own hud I have found quite a lot of cool stuff you can do with custom huds.

But as a main programmer i have no real design skills, so I have no clue where to start with my next project, I don't know what it should look like or what the community thinks it should look like!

I am turning this project of mine into a design contest with some prizes for cool ideas & concepts that end up being used in the final version.

What is it?
- A Casting HUD (private use)

Why?
Why not? I want to know what you want to see (and where) on the screen during a cast.

What will the community get out of it?
- Casting configs for cameramen & casters
- A Community created StatusSpec Medigun infopanel HUD element

What do I need
There are only a few required elements:
- player lists spectating in tournament mode + medigun info
- winpanel at end of round
- player health & target ID
- objectives (koth/payload/CTF/stopwatch/round & server timers/control points)
Optional:
- killfeed
- scoreboard
- current score, map played & team names

Deadline
Before the 11th, but March 14th ultimately, midnight wherever (so Sunday counts, Monday doesn't)

Brilliant ideas should never have an expiration date and can always be submitted, they might end up added at a later date!

Submissions
Post your sketches/mockups/designs or whatever you created for a casting hud in this thread as everything can be used for inspiration.

Hud stuff
You don't need to do any coding for the hud, as I am only looking for designs and input for the previously specified ingame elements.

Creating custom assets and being able to provide those is a plus, but not required. Fonts and colors are subject to change!

Prizes/Rewards (multiple recipients)
* Unusual Cyborg Stunt Helmet - Disco Beat Down
* Professional killstreak kit for favorite class
* Specialized killstreak kit for favorite class
* 3 Mann Co Keys

I can't wait to find out what the community thinks and wants to see in a casting hud.

TL;DR: Looking for casting hud designs/mock-ups/input

As a hud developer and creator of my [url=http://www.teamfortress.tv/31482/wiethud]own hud[/url] I have found quite a lot of cool stuff you can do with custom huds.

But as a main programmer i have no real design skills, so I have no clue where to start with my next project, I don't know what it should look like or what the community thinks it should look like!

I am turning this project of mine into a design contest with some prizes for cool ideas & concepts that end up being used in the final version.


[b]What is it?[/b]
- A Casting HUD (private use)

[b]Why?[/b]
Why not? I want to know what you want to see (and where) on the screen during a cast.

[b]What will the community get out of it?[/b]
- Casting configs for cameramen & casters
- A Community created StatusSpec Medigun infopanel HUD element

[b]What do I need[/b]
There are only a few required elements:
- player lists spectating in tournament mode + medigun info
- winpanel at end of round
- player health & target ID
- objectives (koth/payload/CTF/stopwatch/round & server timers/control points)
[i]Optional:[/i]
- killfeed
- scoreboard
- current score, map played & team names

[b]Deadline[/b]
Before the 11th, but March 14th ultimately, midnight wherever (so Sunday counts, Monday doesn't)

Brilliant ideas should never have an expiration date and can always be submitted, they might end up added at a later date!

[b]Submissions[/b]
Post your sketches/mockups/designs or whatever you created for a casting hud in this thread as everything can be used for inspiration.

[b]Hud stuff[/b]
You don't need to do any coding for the hud, as I am only looking for designs and input for the previously specified ingame elements.

Creating custom assets and being able to provide those is a plus, but not required. Fonts and colors are subject to change!

[b]Prizes/Rewards[/b] (multiple recipients)
* Unusual Cyborg Stunt Helmet - Disco Beat Down
* Professional killstreak kit for favorite class
* Specialized killstreak kit for favorite class
* 3 Mann Co Keys


I can't wait to find out what the community thinks and wants to see in a casting hud.

TL;DR: Looking for casting hud designs/mock-ups/input
2
#2
7 Frags +

Due date?

Due date?
3
#3
whitelist.tf
6 Frags +

Added deadline to the post, you have just over a week with some leeway for late submissions.

Added deadline to the post, you have just over a week with some leeway for late submissions.
4
#4
6 Frags +

AW SHIT

AW SHIT
5
#5
5 Frags +

Are the prizes going to be spread out among top people, or all given to the "winner"?
GL to everyone else planning on throwing something together also!

Are the prizes going to be spread out among top people, or all given to the "winner"?
GL to everyone else planning on throwing something together also!
6
#6
0 Frags +

Are submissions going to be posted in this thread? Good luck all, can't wait to see your designs :)

Are submissions going to be posted in this thread? Good luck all, can't wait to see your designs :)
7
#7
whitelist.tf
0 Frags +

@Jarateking & @Rawsor I added the info to the OP

I would like to see the submissions posted in this thread, as one creation might inspire the next!

@Jarateking & @Rawsor I added the info to the OP

I would like to see the submissions posted in this thread, as one creation might inspire the next!
8
#8
0 Frags +

Is it for just any rando wanting to do a cast? I mean the TFTV casting hud is specifically designed to complement the overlay, so I want to know if you have any specific overlay in mind.

Is it for just any rando wanting to do a cast? I mean the TFTV casting hud is specifically designed to complement the overlay, so I want to know if you have any specific overlay in mind.
9
#9
whitelist.tf
0 Frags +

The optional things mentions the scores/maps and teams, those are elements for the overlay as you can't get these to show up permanently in the hud. Nothing is set in stone for that yet.

The optional things mentions the scores/maps and teams, those are elements for the overlay as you can't get these to show up permanently in the hud. Nothing is set in stone for that yet.
10
#10
18 Frags +

http://puu.sh/nxlyn/2b514d879c.jpg

http://puu.sh/nxgcu/284964a702.jpg

http://puu.sh/nFLd0/0ac470c723.jpg

whip

[img]http://puu.sh/nxlyn/2b514d879c.jpg[/img]
[img]http://puu.sh/nxgcu/284964a702.jpg[/img]
[img]http://puu.sh/nFLd0/0ac470c723.jpg[/img]

whip
11
#11
28 Frags +

http://i.imgur.com/jFFUujZ.jpg

old:

Show Content

older:

Show Content

http://imgur.com/a/iZzyF
Probably going to rework the player infos and some other stuff but eh
e: Still not 100% but progress
e2: round 3. I'm pretty happy but still going to work some, it's great to see other people's designs!

[img]http://i.imgur.com/jFFUujZ.jpg[/img]
old:[spoiler][img]http://i.imgur.com/wp5CAhW.jpg[/img][/spoiler]
older:[spoiler][img]http://i.imgur.com/kBEnkds.jpg[/img][/spoiler]
http://imgur.com/a/iZzyF
[s]Probably going to rework the player infos and some other stuff but eh[/s]
[s]e: Still not 100% but progress[/s]
e2: round 3. I'm pretty happy but still going to work some, it's great to see other people's designs!
12
#12
26 Frags +

wooo

http://i.imgur.com/WIs2xTn.png

http://imgur.com/a/TrV8y
spent a solid couple hours, lemme know what you think. Will probably change red/blue colors to something darker

wooo
[img]http://i.imgur.com/WIs2xTn.png[/img]

http://imgur.com/a/TrV8y
spent a solid couple hours, lemme know what you think. Will probably change red/blue colors to something darker
13
#13
3 Frags +

Holy shit, that looks really good. Not sure if i like how much screen space it takes up but man like 8.5/10

Holy shit, that looks really good. Not sure if i like how much screen space it takes up but man like 8.5/10
14
#14
21 Frags +

I think class icons are essential, especially since the temporary labels that you have will be replaced by names on a real cast.

I think class icons are essential, especially since the temporary labels that you have will be replaced by names on a real cast.
15
#15
whitelist.tf
0 Frags +

It is a shame you can't define where something would have to be visible for red or blue team specifically in the spectator tournament panels because of hud technical limitations!

It is a shame you can't define where something would have to be visible for red or blue team specifically in the spectator tournament panels because of hud technical limitations!
16
#16
17 Frags +

After 10 000 hours in mspaint.exe.

1. spectating + medigun info direct link

http://i.imgur.com/xsqXaHP.jpg

2. winpanel direct link

http://i.imgur.com/UiWRCDe.jpg

3. player health + target id direct link

http://i.imgur.com/fU6SsR3.jpg

4. scoreboard direct link

http://i.imgur.com/8zdOYzs.jpg

Let me know if you want the photoshop project files.

edit: added uber charge progress bars and numbers to show number of players alive on each team.

After 10 000 hours in mspaint.exe.

[b]1. spectating + medigun info[/b] [url=http://i.imgur.com/xsqXaHP.jpg]direct link[/url]
[img]http://i.imgur.com/xsqXaHP.jpg[/img]

[b]2. winpanel[/b] [url=http://i.imgur.com/UiWRCDe.jpg]direct link[/url]
[img]http://i.imgur.com/UiWRCDe.jpg[/img]

[b]3. player health + target id[/b] [url=http://i.imgur.com/fU6SsR3.jpg]direct link[/url]
[img]http://i.imgur.com/fU6SsR3.jpg[/img]

[b]4. scoreboard[/b] [url=http://i.imgur.com/8zdOYzs.jpg]direct link[/url]
[img]http://i.imgur.com/8zdOYzs.jpg[/img]

Let me know if you want the photoshop project files.

edit: added uber charge progress bars and numbers to show number of players alive on each team.
17
#17
7 Frags +

.

.
18
#18
13 Frags +
MR_SLINI think class icons are essential, especially since the temporary labels that you have will be replaced by names on a real cast.

for sure, wasn't really thinking about that at the time :P

also update:

http://puu.sh/nweRQ/097a89ec62.png

[quote=MR_SLIN]I think class icons are essential, especially since the temporary labels that you have will be replaced by names on a real cast.[/quote]
for sure, wasn't really thinking about that at the time :P

also update:

[img]http://puu.sh/nweRQ/097a89ec62.png[/img]
19
#19
-2 Frags +

rawrsor please make that public

rawrsor please make that public
20
#20
2 Frags +
fade-rawrsor please make that public

It's a mockup.

[quote=fade-]rawrsor please make that public[/quote]
It's a mockup.
21
#21
8 Frags +

well you guys inspired me to update mine, so thanks.

http://imgur.com/kByxBHq.png

edit: i lied, this version looks way better.

http://imgur.com/VyFQDGI.png

well you guys inspired me to update mine, so thanks.

[img]http://imgur.com/kByxBHq.png[/img]

edit: i lied, this version looks way better.

[img]http://imgur.com/VyFQDGI.png[/img]
22
#22
4 Frags +

Really like the mockup #18. Personally I prefer neutral colored class icons and standard formatting for the control points (as opposed to LSMSL). I also like the team HUDs to be centered vertically as you would see in a csgo spectator HUD. Everything else is really solid.

IIRC we explored creating a hud like yours for TFTV but TF2 HUD customization is limited for spectator modes. For example, you can't mirror the team HUDs as you have in your mockup. They have to be identical (i.e. Class icons on left for both teams). It's a real shame too because I think this looks much better.

If you continue to iterate I'd love to see how you'd incorporate the team names into the HUD. Where would you put them and what would they look like?

Really like the mockup #18. Personally I prefer neutral colored class icons and standard formatting for the control points (as opposed to LSMSL). I also like the team HUDs to be centered vertically as you would see in a csgo spectator HUD. Everything else is really solid.

IIRC we explored creating a hud like yours for TFTV but TF2 HUD customization is limited for spectator modes. For example, you can't mirror the team HUDs as you have in your mockup. They have to be identical (i.e. Class icons on left for both teams). It's a real shame too because I think this looks much better.

If you continue to iterate I'd love to see how you'd incorporate the team names into the HUD. Where would you put them and what would they look like?
23
#23
3 Frags +
MR_SLINIIRC we explored creating a hud like yours for TFTV but TF2 HUD customization is limited for spectator modes. For example, you can't mirror the team HUDs as you have in your mockup. They have to be identical (i.e. Class icons on left for both teams). It's a real shame too because I think this looks much better.

It's not conventional and not exactly the easiest to explain, but it's definitely doable. I stand to be corrected, but everything posted on this thread so far is, to my knowledge, completely implementable.

I hope you don't mind me asking, but would you happen to have any of the major design considerations for the tftv hud? Making a mean looking mockup is one thing, but only a handful of people have any actual experience with designing for casting on a stream rather than just looking good.

e:

Show Content

http://i.imgur.com/N0LWgOY.png

props to you if you understood it
casting huds get the luxury of changing the class icon so it should all be good
some limitations to it, but on the whole a pretty simple process
[quote=MR_SLIN]IIRC we explored creating a hud like yours for TFTV but TF2 HUD customization is limited for spectator modes. For example, you can't mirror the team HUDs as you have in your mockup. They have to be identical (i.e. Class icons on left for both teams). It's a real shame too because I think this looks much better.[/quote]
It's not conventional and not exactly the easiest to explain, but it's definitely doable. I stand to be corrected, but everything posted on this thread so far is, to my knowledge, completely implementable.

I hope you don't mind me asking, but would you happen to have any of the major design considerations for the tftv hud? Making a mean looking mockup is one thing, but only a handful of people have any actual experience with designing for casting on a stream rather than just looking good.

e:[spoiler][img]http://i.imgur.com/N0LWgOY.png[/img]props to you if you understood it
casting huds get the luxury of changing the class icon so it should all be good
some limitations to it, but on the whole a pretty simple process[/spoiler]
24
#24
1 Frags +
JarateKingIt's not conventional and not exactly the easiest to explain, but it's definitely doable. I stand to be corrected, but everything posted on this thread so far is, to my knowledge, completely implementable.

I hope you don't mind me asking, but would you happen to have any of the major design considerations for the tftv hud? Making a mean looking mockup is one thing, but only a handful of people have any actual experience with designing for casting on a stream rather than just looking good.

I believe slin means that stuff like health can't be oppositely aligned, since the HUD just copies one side to the other basically. Unless you can work your magic and pull out a miracle, they'll both have to be left-aligned (unless I'm incorrect)

EDIT: Got fukin ninja'd, that could probably work, never thought of that, you always are thinking outside the box man!

[quote=JarateKing]
It's not conventional and not exactly the easiest to explain, but it's definitely doable. I stand to be corrected, but everything posted on this thread so far is, to my knowledge, completely implementable.

I hope you don't mind me asking, but would you happen to have any of the major design considerations for the tftv hud? Making a mean looking mockup is one thing, but only a handful of people have any actual experience with designing for casting on a stream rather than just looking good.[/quote]
I believe slin means that stuff like health can't be oppositely aligned, since the HUD just copies one side to the other basically. Unless you can work your magic and pull out a miracle, they'll both have to be left-aligned (unless I'm incorrect)

EDIT: Got fukin ninja'd, that could probably work, never thought of that, you always are thinking outside the box man!
25
#25
0 Frags +

Yeah I kinda see what #23 is trying to do. I'd be very impressed if you were actually able to pull it off.
That's how honestly the biggest hurdle for the TFTV HUD and why we haven't improved it in a long time. Everything else can be overlayed (such as score, etc.).

Yeah I kinda see what #23 is trying to do. I'd be very impressed if you were actually able to pull it off.
That's how honestly the biggest hurdle for the TFTV HUD and why we haven't improved it in a long time. Everything else can be overlayed (such as score, etc.).
26
#26
19 Frags +

style 1

Show Content

style 2

Show Content

style 3

Show Content

psd

:D

style 1
[spoiler][img]http://i.imgur.com/ePOuAyN.png[/img][/spoiler]
style 2
[spoiler][img]http://i.imgur.com/zTZHaZp.png[/img][/spoiler]
style 3
[spoiler][img]http://i.imgur.com/Oj5BY2K.png[/img][/spoiler]

[url=https://www.dropbox.com/s/ka595z9uy8rw6k9/specmock.psd?dl=0]psd[/url]

:D
27
#27
11 Frags +

Spectating. I used U instead of Ü to fit it in, didn't want to make it smaller, but of course It can be changed. LSMSL wasn't inspired by Rawrsor, I didn't see his screenshots before I started making it. Two great minds think alike :)

I kept it quite minimalistic, didn't want it to take way too much of the screen, easy to resize if what.

http://i.imgur.com/O091AEt.png

Kept Winpanel quite simple.

http://i.imgur.com/ojaJulc.png

Kinda borrowed this Scoreboard from CsGo. I really do like CsGo scoreboard, I am unsure if it's possible to make it similar in TF2, if it's not, please tell me and I'll re-make it.

http://i.imgur.com/dNy35Kr.png

PlayerHealth + TargetID

http://i.imgur.com/daivurj.png

PlayerHealth + TargetID (Low hp edition)

http://i.imgur.com/4ap5bla.png

Medic Version

http://i.imgur.com/8yTxZZd.png

Please let me know what you think. :)

Spectating. I used U instead of Ü to fit it in, didn't want to make it smaller, but of course It can be changed. LSMSL wasn't inspired by Rawrsor, I didn't see his screenshots before I started making it. Two great minds think alike :)

I kept it quite minimalistic, didn't want it to take way too much of the screen, easy to resize if what.

[img]http://i.imgur.com/O091AEt.png[/img]

Kept Winpanel quite simple.

[img]http://i.imgur.com/ojaJulc.png[/img]

Kinda borrowed this Scoreboard from CsGo. I really do like CsGo scoreboard, I am unsure if it's possible to make it similar in TF2, if it's not, please tell me and I'll re-make it.

[img]http://i.imgur.com/dNy35Kr.png[/img]

PlayerHealth + TargetID

[img]http://i.imgur.com/daivurj.png[/img]

PlayerHealth + TargetID (Low hp edition)

[img]http://i.imgur.com/4ap5bla.png[/img]

Medic Version

[img]http://i.imgur.com/8yTxZZd.png[/img]

Please let me know what you think. :)
28
#28
7 Frags +
Shounicstyle 1
Show Content
style 2
Show Content
style 3
Show Content

psd

:D

I really like this. I made a dark version and a scoreboard for it.

Dark version

http://i.imgur.com/NUbzxQN.jpg

Scoreboard (profile pictures would go where the team logos currently are).

http://i.imgur.com/FOSOlvi.jpg

Currently uploading the psd but will take a while because of bad upload speed.

edit: Scoreboard psd
edit: Dark version psd

[quote=Shounic]style 1
[spoiler][img]http://i.imgur.com/ePOuAyN.png[/img][/spoiler]
style 2
[spoiler][img]http://i.imgur.com/zTZHaZp.png[/img][/spoiler]
style 3
[spoiler][img]http://i.imgur.com/Oj5BY2K.png[/img][/spoiler]

[url=https://www.dropbox.com/s/ka595z9uy8rw6k9/specmock.psd?dl=0]psd[/url]

:D[/quote]

I really like this. I made a dark version and a scoreboard for it.

Dark version
[img]http://i.imgur.com/NUbzxQN.jpg[/img]


Scoreboard (profile pictures would go where the team logos currently are).
[img]http://i.imgur.com/FOSOlvi.jpg[/img]


Currently uploading the psd but will take a while because of bad upload speed.

edit: [url=https://www.dropbox.com/s/oaicsbv5imvto8s/scoreboard.psd?dl=0]Scoreboard psd[/url]
edit: [url=https://www.dropbox.com/s/n7h31b6ranpxiiw/dark.psd?dl=0]Dark version psd[/url]
29
#29
1 Frags +

I honestly find profile pictures distracting, especially when players have different ones.

I honestly find profile pictures distracting, especially when players have different ones.
30
#30
5 Frags +

http://imgur.com/TZ2jCGk.png

i'm getting close but I cant put negative values into the base offsets to move the red to the left, stumped.

I've also tried moving all of the specgui to the left, if you actually cant put negative values into the offsets ill be so sad.

[img]http://imgur.com/TZ2jCGk.png[/img]

i'm getting close but I cant put negative values into the base offsets to move the red to the left, stumped.

I've also tried moving all of the specgui to the left, if you actually cant put negative values into the offsets ill be so sad.
1 2 3 4
Please sign in through STEAM to post a comment.