Very new to gimp: Trimming a transparent background image

The place to ask questions about 3DStudio Max, Blender, Pro Motion, open source items, libraries, ect..
Post Reply
User avatar
Callan S.
Posts: 2043
Joined: Sun Jan 24, 2010 5:43 am

Very new to gimp: Trimming a transparent background image

Post by Callan S. »

I really don't get Gimp, probably because it's good/complex.

I'm looking to trim the top and bottom off a logo I generated at another site, it's the Driftwurld one at the top of my games page. It has a transparent background.

How do I do that in gimp? I tried to select it and copy, but when I pasted it just did the outline of the text and baffled me.
Fight Cycle : My latest Browser game WIP
Driftwurld : My Browser Game WIP
Philosopher Gamer : My Blog
User avatar
rockinliam
Posts: 466
Joined: Sun Jun 07, 2009 11:26 am

Re: Very new to gimp: Trimming a transparent background image

Post by rockinliam »

http://www.gimp.org/tutorials/ maybe they would be of use.

I think the first thing you need to do with that site is add some CSS, seriously it would improve your site 100,000,000,000,000,000 times.

Make this your login.php :

Code: Select all

<html>
<head> 
<link href="login-style.css" rel="stylesheet" type="text/css">
 
<title>Driftwurld : The browser game</title> 
<meta name="keywords" content="draft, world, browser, game, browser game" /> 
<meta name="description" content="Draft World - Post apocalyptic wilderness survivalism" /> 
<script type="text/javascript"> 
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-11198538-7']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script> 
</head> 
 
 <div class="wrapper">
 
 
 
<div class="header"> 
<center> 
<!--<h1>Driftwurld</h1>--> 
<img src="images/driftwurldtitle.png" border='0'><br> 
<img src="images/header_image.jpg" border='0'><br> 
</center> 
</div>
<div class="sidebar">
<a href='register.php'>Register</a> </br>
<a href='instructions.php'>Instructions</a> 
</div>
<div class="content">
<center> 
<i><b>- A slowly expanding game world -  - Gain the most power for your cause -</b></i><br> 
<b><u>News!</b> : A player Vs player Brawling system has been implemented!</u><br> 
<br> 
<i>It is difficult to enjoy life with threats on all sides. But if you don't enjoy life at all, what is the point?<br> 
<br> 
This is the question many villages in the great wilderness found themselves facing. Perhaps especially the village of Riverly, who are are surrounded by threats, even the skies! Worse would be to find yourself cut off even from Riverly itself and instead alone and bewildered, desperately trying to get back to that place. Not because that place is safe, but because there your able to pretend for awhile that you are safe.<br>Worse would be in a place where the truth can't be shut out. Here is where you find yourself.</i> 
    <form method="POST" action="authenticate.php"> 
    Username <input type="text" name="player" size="21"><br> 
    Password <input type="password" name="password" size="21"> 
    <br> 
    <input type="submit" value="Log in" name="submit"> 
<br> 
</center>
</div>
 
 
 <div class="adbar">
<!-- Beginning of Project Wonderful ad code: --> 
<!-- Ad box ID: 49716 --> 
<script type="text/javascript"> 
<!--
var pw_d=document;
pw_d.projectwonderful_adbox_id = "49716";
pw_d.projectwonderful_adbox_type = "7";
pw_d.projectwonderful_foreground_color = "";
pw_d.projectwonderful_background_color = "";
//-->
</script> 
<script type="text/javascript" src="http://www.projectwonderful.com/ad_display.js"></script> 
<noscript><map name="admap49716" id="admap49716"><area href="http://www.projectwonderful.com/out_nojs.php?r=0&c=0&id=49716&type=7" shape="rect" coords="0,0,300,250" title="" alt="" target="_blank" /></map> 
<table cellpadding="0" border="0" cellspacing="0" width="300" bgcolor="#ffffff"><tr><td><img src="http://www.projectwonderful.com/nojs.php?id=49716&type=7" width="300" height="250" usemap="#admap49716" border="0" alt="" /></td></tr><tr><td bgcolor="#ffffff" colspan="1"><center><a style="font-size:10px;color:#0000ff;text-decoration:none;line-height:1.2;font-weight:bold;font-family:Tahoma, verdana,arial,helvetica,sans-serif;text-transform: none;letter-spacing:normal;text-shadow:none;white-space:normal;word-spacing:normal;" href="http://www.projectwonderful.com/advertisehere.php?id=49716&type=7" target="_blank">Ads by Project Wonderful!  Your ad here, right now: $0</a></center></td></tr></table> 
</noscript> 
<!-- End of Project Wonderful ad code. --> 
 
<script type="text/javascript"><!--
google_ad_client = "pub-2847411283622136";
/* Gamelargesquare */
google_ad_slot = "6105528918";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
 </div>
 <div class="footer"> 
Copyright Callan S, 2010.<br> 
Made with great help from <a href="http://indie-resource.com">http://indie-resource.com</a> 
<!-- START OF HIT COUNTER CODE --> 
<br><script language="JavaScript" src="http://www.counter160.com/js.js?img=14"></script><br><a href="http://www.000webhost.com"><img src="http://www.counter160.com/images/14/left.png" alt="Free web hosting" border="0" align="texttop"></a><a href="http://www.hosting24.com"><img alt="Web hosting" src="http://www.counter160.com/images/14/right.png" border="0" align="texttop"></a> 
<!-- END OF HIT COUNTER CODE --> 
<br><a href="http://www.000webhost.com/" target="_blank">Free Web Hosting</a> 
<br> 
 
</center> 
 
<!-- www.000webhost.com Analytics Code --> 
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script> 
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript> 
<!-- End Of Analytics Code --> 

</div>
</div>
</html>
instructions.php :

Code: Select all

<html>
<head> 
<link href="login-style.css" rel="stylesheet" type="text/css">
 
<title>Driftwurld : The browser game</title> 
<meta name="keywords" content="draft, world, browser, game, browser game" /> 
<meta name="description" content="Draft World - Post apocalyptic wilderness survivalism" /> 
<script type="text/javascript"> 
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-11198538-7']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script> 
</head> 
 
 <div class="wrapper">
 
 
 
<div class="header"> 
<center> 
<!--<h1>Driftwurld</h1>--> 
<img src="images/driftwurldtitle.png" border='0'><br> 
<img src="images/header_image.jpg" border='0'><br> 
</center> 
</div>
<div class="sidebar">
<a href='register.php'>Register</a> </br>
<a href='instructions.php'>Instructions</a> 
</div>
<div class="content">
<center>
<br> 
<h2>Instructions</h2> 
First off you will be embroiled in a quick brawl - you get need to click on the brawl button to get to skill 40 (takes four successful brawls) and you can then go to your home base and decide whether you keep brawling other players or battle your way through monsters to fight your way through the story of Driftwurld.<br> 
When fighting your way through the story, this game is about trying to fight your way through several monsters in a row or being defeated and sent back to your last checkpoint! Can you make it through!?<br> 
<br> 
You fight through one or more battles to get to the next sentence of the story(a check point), which describes the world around you and it's troubles.<br> 
In a battle you may use a normal or evasive attack. Monsters have a special attack they use every so often that does triple damage!<br> 
If you use an evasive attack when they do their special, you get a bonus to hit, and extra point of damage and they don't get their bonus damage<br> 
But don't try an evasive attack when they are doing a normal attack. Which ones are their special attack? You have to figure it out!<br> 
Mouse over the evasive attack button for these tips again.<br> 
Note: If you lose a battle you lose all your battle progress so far and there's even a small chance you go right back to the start of the paragraph your on!<br> 
<br> 
After battle you go back to where your making a temporary home base. You have the option of making camp there to get your health back.<br> 
But if you do so there is a small chance of losing all battle progress so far! So it may not be a wise move if you are only a little damaged!<br> 
Once you have completed a paragraph of the story, an option to list all paragraphs completed so far will be shown as well<br> 
<br> 
<br> 
Copyright Callan S, 2010.<br> 
Made with great help from <a href="http://indie-resource.com">http://indie-resource.com</a>!<br> 
<!-- START OF HIT COUNTER CODE --> 
<br><script language="JavaScript" src="http://www.counter160.com/js.js?img=14"></script><br><a href="http://www.000webhost.com"><img src="http://www.counter160.com/images/14/left.png" alt="Free web hosting" border="0" align="texttop"></a><a href="http://www.hosting24.com"><img alt="Web hosting" src="http://www.counter160.com/images/14/right.png" border="0" align="texttop"></a> 
<!-- END OF HIT COUNTER CODE --> 
<br><a href="http://www.000webhost.com/" target="_blank">Free Web Hosting</a> 
<br> 
 
</center> 
</div>
 
 
 <div class="adbar">
<!-- Beginning of Project Wonderful ad code: --> 
<!-- Ad box ID: 49716 --> 
<script type="text/javascript"> 
<!--
var pw_d=document;
pw_d.projectwonderful_adbox_id = "49716";
pw_d.projectwonderful_adbox_type = "7";
pw_d.projectwonderful_foreground_color = "";
pw_d.projectwonderful_background_color = "";
//-->
</script> 
<script type="text/javascript" src="http://www.projectwonderful.com/ad_display.js"></script> 
<noscript><map name="admap49716" id="admap49716"><area href="http://www.projectwonderful.com/out_nojs.php?r=0&c=0&id=49716&type=7" shape="rect" coords="0,0,300,250" title="" alt="" target="_blank" /></map> 
<table cellpadding="0" border="0" cellspacing="0" width="300" bgcolor="#ffffff"><tr><td><img src="http://www.projectwonderful.com/nojs.php?id=49716&type=7" width="300" height="250" usemap="#admap49716" border="0" alt="" /></td></tr><tr><td bgcolor="#ffffff" colspan="1"><center><a style="font-size:10px;color:#0000ff;text-decoration:none;line-height:1.2;font-weight:bold;font-family:Tahoma, verdana,arial,helvetica,sans-serif;text-transform: none;letter-spacing:normal;text-shadow:none;white-space:normal;word-spacing:normal;" href="http://www.projectwonderful.com/advertisehere.php?id=49716&type=7" target="_blank">Ads by Project Wonderful!  Your ad here, right now: $0</a></center></td></tr></table> 
</noscript> 
<!-- End of Project Wonderful ad code. --> 
 
<script type="text/javascript"><!--
google_ad_client = "pub-2847411283622136";
/* Gamelargesquare */
google_ad_slot = "6105528918";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
 </div>
 

 <div class="footer"> 
<center>
Copyright Callan S, 2010.<br> 
Made with great help from <a href="http://indie-resource.com">http://indie-resource.com</a> 
<!-- START OF HIT COUNTER CODE --> 
<br><script language="JavaScript" src="http://www.counter160.com/js.js?img=14"></script><br><a href="http://www.000webhost.com"><img src="http://www.counter160.com/images/14/left.png" alt="Free web hosting" border="0" align="texttop"></a><a href="http://www.hosting24.com"><img alt="Web hosting" src="http://www.counter160.com/images/14/right.png" border="0" align="texttop"></a> 
<!-- END OF HIT COUNTER CODE --> 
<br><a href="http://www.000webhost.com/" target="_blank">Free Web Hosting</a> 
<br> 
 
</center> 
 
<!-- www.000webhost.com Analytics Code --> 
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script> 
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript> 
<!-- End Of Analytics Code --> 

</div>
 
</center> 
 
<!-- www.000webhost.com Analytics Code --> 
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script> 
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript> 
<!-- End Of Analytics Code --> 


</div>
</html>
Make this your login-style.css :

Code: Select all

/* DriftWurld login stylesheet */
body {
background-image: url('images/background1.jpg');
} 
.wrapper { 
margin:0 auto;
width:800px;
}
.header {
height: 316px;
width: 800px;
}
.sidebar { 
height: 300px;
width: 150px;
float:left;
}
.content { 
width: 300px;
height: 300px;
float:left;
}
.adbar {
width: 350px;
height: 300px;
float:right;
}
.footer {
width:800px;
height:100px;
}
I hope it works, haven't really tested it much, so if you do use it, backup your old files.
Skillset: C/C++, OpenGL, C#, Lua, PHP, MySql, Web Dev etc.
Website: https://liam-griffiths.co.uk/
Rastan
Posts: 126
Joined: Tue Apr 13, 2010 1:48 am

Re: Very new to gimp: Trimming a transparent background image

Post by Rastan »

I'm not entirely sure what you are asking tbh. Usually I find with GIMP that I can accomplish what I want just using the layers and putting the appropriate pieces on the right layer. Like say I wanted to modify a logo I could make a background make a layer copy my logo to the new layer erase what i don't want set background to transparent and if I need scale the picture to the size I wanted.

I just started using GIMP a few months ago. I've just been watching tutorials on all the different features with it to learn. That's how I made the logo on my WIP post. It still needs a lot of work but it's a start lol. I hate the water and the grass. I think due to my playing that it alone has about 12 layers.
User avatar
Callan S.
Posts: 2043
Joined: Sun Jan 24, 2010 5:43 am

Re: Very new to gimp: Trimming a transparent background image

Post by Callan S. »

Thanks Liam,

To me, a focus on layout is like focusing really, really hard on choosing the most awesome frame for a painting ever...then doing the painting as a sort of secondary concern. Like an after thought. It's missplaced priority. Yah, I'll totally agree the vast majority of people go off of looks and the 3d game industry utterly focuses on looks - that still doesn't make it a missplaced priority. You could play chess with rocks and twigs and it'd still be as good a game as if you played it with high poly count images. It wont improve it 1000 times.

That said I'm 25% interested in what's fiscally apt, and even if people are attracted to the wrong thing, I'll indulge that wrongness if it means money (I'll indulge it by about 25% of the project). I'm looking at the urban realms layout at the moment and learning how it was done and how I can adjust it (the three column layout seems a good one) - thanks for your examples, I set up a test area for it - I'm not sure it came out the way you intended though? Were the ad spaces supposed to be on the left and right? They just ended up above and below each other?

Sorry for explaining my design philosophy for awhile here - I just want to be honest in what I'm doing and what my priorities are. Thanks again for your examples - I'll look at them again and compare them to the urban realms one to help me learn some more about css.


Hi Rastan,

I dunno what layers are. So there you go.

To be honest, when I was 25 or younger, I'd probably try and devour the gimp tutorials - these days, I've kind of lost the impression, so cultured by schools without any real evidence for it, that learning always == leading on to great things. I want to get on with doing things rather than learning an entire program at whatever rate it's tutorials decide, simply to get one thing done. I just want to cut about 15-20 pixels off the top and bottom of my logo, without losing transparency.
Fight Cycle : My latest Browser game WIP
Driftwurld : My Browser Game WIP
Philosopher Gamer : My Blog
Rastan
Posts: 126
Joined: Tue Apr 13, 2010 1:48 am

Re: Very new to gimp: Trimming a transparent background image

Post by Rastan »

Layers are kinda like if you put a bunch of overlays on top of each other each with a part of what you were drawing. I feel ya on the not wanting to learn it much. I've said it before I can barely draw stick figures Art isn't my strong side. there are tutorials that may clear up cutting for you tho that would only take a couple minutes to get through. That's pretty much what I been doin. One at a time lol
User avatar
Callan S.
Posts: 2043
Joined: Sun Jan 24, 2010 5:43 am

Re: Very new to gimp: Trimming a transparent background image

Post by Callan S. »

Thanks guys.

In the end I used game maker 8 of all things to edit the title down a few pixels.

I also figured out how the layout in urban realms worked, to a fair extent, and modified it a bit for my game. I like my green shaded on blue shaded background layout :) Crunched my project wonderful ad down a bit as well

http://www.driftwurld.herobo.com/login.php

I'll probably reformat the brawling page to this layout as well, though I don't know whether I'll change the story adventure part - I kinda like it as it is.
Fight Cycle : My latest Browser game WIP
Driftwurld : My Browser Game WIP
Philosopher Gamer : My Blog
User avatar
rockinliam
Posts: 466
Joined: Sun Jun 07, 2009 11:26 am

Re: Very new to gimp: Trimming a transparent background image

Post by rockinliam »

Now that looks a lot better, i saw your style sheet and i think its very good, as for mine i just quickly made a very simple style sheet that you could follow as a guide, and the ads were just both thrown out into the right hand column. I do like the new look and i do think it is time well spent because if you have a unstyled game the masses of people will leave before you have had chance to get them playing.

Two hints...

margin:0 auto; is a better method of centring the wrapper, Just define a width for your website and it will work.
float:left; is a better method of putting your divs side by side, rather than using tables. Just look at my CSS and you shall see how it works.
Skillset: C/C++, OpenGL, C#, Lua, PHP, MySql, Web Dev etc.
Website: https://liam-griffiths.co.uk/
User avatar
Callan S.
Posts: 2043
Joined: Sun Jan 24, 2010 5:43 am

Re: Very new to gimp: Trimming a transparent background image

Post by Callan S. »

Gah, screwed up log in since the urban realms uses 'user' and my authenticate uses 'player'....wonder how many people bounced off before I fixed it...
Fight Cycle : My latest Browser game WIP
Driftwurld : My Browser Game WIP
Philosopher Gamer : My Blog
User avatar
rockinliam
Posts: 466
Joined: Sun Jun 07, 2009 11:26 am

Re: Very new to gimp: Trimming a transparent background image

Post by rockinliam »

me... lol
Skillset: C/C++, OpenGL, C#, Lua, PHP, MySql, Web Dev etc.
Website: https://liam-griffiths.co.uk/
Post Reply

Return to “Programs/Assets/Libs/Open Source/Ect...”