How to make my Derma Nicer?

Just posting my first time doing derma so i figured i would ask you guys what you think.
Every thing works. I just am not too good with lua so im not sure how to make the buttons how
i would like. But anyway here it is.

Could you tell me how to improve and make look nicer as well as how to put a playermodel show on the button instead of text so it looks a little nicer.



function shoptest()
        local swagshoptest = vgui.Create( 'DFrame' ) -- This shall create the derma fram ONLY
    swagshoptest:SetSize( 700, 700 )
    swagshoptest:SetTitle( '' ) 
    swagshoptest:ShowCloseButton( false )
    swagshoptest:Center()
    swagshoptest:SetDraggable( false )
    swagshoptest:MakePopup()
    swagshoptest.Paint = function()
		surface.SetDrawColor( 0, 0, 0, 200 )
		surface.DrawRect( 0, 0, swagshoptest:GetWide(), swagshoptest:GetTall() )
		surface.SetDrawColor( 0, 0, 0, 0 )
		surface.DrawOutlinedRect( 0, 0, swagshoptest:GetWide(), swagshoptest:GetTall() )
	end
        
		local swagshopbutton = vgui.Create( 'DButton' ) -- This is the button creator 
        swagshopbutton:SetParent( swagshoptest )
	swagshopbutton:SetPos( 50, 35 )
        swagshopbutton:SetText( 'Team Swag' )
	swagshopbutton:SetSize( 250, 500 )
	swagshopbutton.Paint = function()
		surface.SetDrawColor( 255, 0, 0, 200 )
		surface.DrawRect( 0, 0, swagshopbutton:GetWide(), swagshopbutton:GetTall() )
	end
    swagshopbutton.DoClick = function ()
		RunConsoleCommand( "kill" )
                RunConsoleCommand( "twerk_team1" )
		LocalPlayer():ChatPrint( 'You have been moved to team 1' )
    end
		
			local swagshopbutton2 = vgui.Create( 'DButton' ) -- This is the button creator 
        swagshopbutton2:SetParent( swagshoptest )
	swagshopbutton2:SetPos( 400, 35 )
        swagshopbutton2:SetText( 'Team Yolo' )
        swagshopbutton2:SetSize( 250, 500 )
	swagshopbutton2.Paint = function()
		surface.SetDrawColor( 0, 255, 0, 200 )
		surface.DrawRect( 0, 0, swagshopbutton2:GetWide(), swagshopbutton2:GetTall() )
	end
    swagshopbutton2.DoClick = function ()
		RunConsoleCommand( "kill" )
                RunConsoleCommand( "twerk_team2" )
		LocalPlayer():ChatPrint( 'You have been moved to team 2' )
    end
		
		local closebutton = vgui.Create( 'DButton' ) -- This is the button creator 
	closebutton:SetParent( swagshoptest )
	closebutton:SetText( 'X' )
	closebutton:SetPos( 625, 5 )
	closebutton.Paint = function()
		surface.SetDrawColor( 255, 255, 255, 150)
		surface.DrawRect( 0, 0, closebutton:GetWide(), closebutton:GetTall() )
	end
	closebutton.DoClick = function ()
		swagshoptest:Close() 
	end
	
		local specteam = vgui.Create( 'DButton' )
	specteam:SetParent( swagshoptest )
	specteam:SetText( 'Team Spectator' )
	specteam:SetSize( 600, 100 )
	specteam:SetPos( 50, 575 )
	specteam.Paint = function()
		surface.SetDrawColor( 250, 250, 250, 150)
		surface.DrawRect( 0, 0, specteam:GetWide(), specteam:GetTall() )
	end
	specteam.DoClick = function ()
		RunConsoleCommand( "kill" )
		RunConsoleCommand( "twerk_team3" )
		LocalPlayer():ChatPrint( 'You have been moved to spectator' )
	end
end
concommand.Add("swag_open", shoptest)


you could try making your own materials and using those as buttons

That’s a good idea. My other one was to have a
player model over the button spinning. Then have
it and the button behind it colored. also i feel like
the lay out is funky and unattractive.

It seems that people think that i want them to recode the menu. I just want ideas.

I don’t think they do it’s probably just a bit difficult to provide suggestions without knowing more detail like what type of gamemode this is for. For starters maybe change the font and text size. Possibly add a DModelPanel of the team’s playermodel, a random one if there are multiple, on the buttons. Although I’m not the best at vgui design so feel free to toss out my ideas.

Ok thank you. This I’d more just for practice. I have made a nicer looking one in Photoshop but i can’t seem to get the text to show like i want.

[editline]28th May 2014[/editline]

Here is the design.

Don’t use this gyazo crap, they even display ads and don’t directly link. Switch to puush or sharex

On topic:
I’d advise against the use of materials since they are finite in resolution and it’s just a tedious workflow.
If you did that without textures it’s fine, otherwise I’d convert it to that since you are doing nothing tat would require one.
Looks ok though. I’d make the outline around the black boxs a bit thicker though and wouldn’t use a capital X for the close button since it’s not point symmetric.

http://flatuicolors.com/ make any UI look good.

Can you elaborate on your difficulties with getting text to display how you want? That menu does look nice though, not too cluttered and decent choice of colors.

Well that is a mock up of what I’m wanting it to look like.
So i have the frame and panel created aswell as the three
side buttons. But i can’t figure out how to get a custom font
to work. Also I’m having difficulties using drawtext.

Just use SetFont on the button, I’m fairly positive that works, and what kind of issues with drawtext?

With draw text i just am either doing it wrong as i don’t know how to use lol.

But when i used create font i got an error about invalid table.

Does the text not draw?
Also post your CreateFont function.

Ok i got it to work with SetFont i will post screen shot once i figure out how to get the Select Team text to show. Then i will need to make the model render thing.

[editline]28th May 2014[/editline]

Also how do round the edges on the button?

You’re drawing the text in a paint hook, correct?
You’ll have to manually paint the buttons to round the corners, keep in mind you’ll also have to draw the text too because you’d be overriding the default paint.
Use draw.RoundedBox to draw your button with rounded corners.

So i will need to hide the button and put a rounded box over it? And also can you change font color with surface.CreateFont?

So i did some more work too it this is how it looks at the moment

http://cloud-2.steampowered.com/ugc/469811338323374396/FC5C5283D6FB3EEFB185E395D8FC4DA092ED8BA7/

also the red and green on the grey is a harsh transition, and the title bar is too tall imo

i just cant figure out how to change text color and add the title :confused:

You should get rid of the “close” text and just have an “X” there.