<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Red Graffix Blog &#187; Tutorial</title>
	<atom:link href="http://www.redgraffix.com/blog/tag/tutorial/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.redgraffix.com/blog</link>
	<description>Blogging on graphic design and web development from Red Graffix</description>
	<lastBuildDate>Tue, 10 Jan 2012 12:29:23 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Rounded Box with Gradient in CSS</title>
		<link>http://www.redgraffix.com/blog/2010/02/20/rounded-box-with-gradient-in-css/</link>
		<comments>http://www.redgraffix.com/blog/2010/02/20/rounded-box-with-gradient-in-css/#comments</comments>
		<pubDate>Sat, 20 Feb 2010 17:04:19 +0000</pubDate>
		<dc:creator>jason</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Rounded Corners]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://redgraffix.com/blog/?p=263</guid>
		<description><![CDATA[Rounded edges are naturally easier on the eye and give a calm flowing feel. They are in use on so many websites and can be assembled hundreds of ways. This is just one way to create this visual effect.First things first, you'll need some kind of image editing software. I prefer Adobe Illustrator cs4 and [...]]]></description>
			<content:encoded><![CDATA[<img src="http://redgraffix.com/blog/wp-content/uploads/2010/02/round12-150x64.gif" alt="Rounded Box" title="round1" width="150" height="150" class="alignleft" /><p>Rounded edges are naturally easier on the eye and give a calm flowing feel. They are in use on so many websites and can be assembled hundreds of ways. This is just one way to create this visual effect.</p><p>First things first, you'll need some kind of image editing <span id="more-263"></span>software. I prefer Adobe Illustrator cs4 and Adobe Photoshop cs4 to create graphic elements.  Make a rounded box to the width and minimum height that you need. Make sure the gradient starts above the corner and below the top corners. Also keep in mind the the Hexidecimal color code for you top gradient color and your border.</p><p>Here is a 200 pixel wide box with the top gradient color &#8220; #ebebeb &#8221; and a 1 pixel border that is &#8220; #7f7e77 &#8221;.</p>
<img src="http://redgraffix.com/blog/wp-content/uploads/2010/02/round12.gif" alt="Rounded Box" title="round1" width="200" height="64" class="alignnone size-full wp-image-267" />
<p> From there Slice it up into 3 sections. Make sure You have a solid color on the top where the gradient ends.</p>
<img src="http://redgraffix.com/blog/wp-content/uploads/2010/02/rounded2.gif" alt="Slice the rounded box into 3 sections" title="rounded2" width="200" height="102" class="alignnone size-full wp-image-265" />
<img src="http://redgraffix.com/blog/wp-content/uploads/2010/02/round3.gif" alt="1 pixel wide section of middle piece" title="round3" width="71" height="102" class="alignleft size-full wp-image-268" />
<p>Take the middle section and clip it down to 1 pixel wide. This is all you need because it will tile across the box</p><p>Now that you have these 3 peices save them as them as a GIF or PNG with transparency turned on, or make sure the background behind the rounded edge matches the background that the rounded box will go on.Be sure to keep in mind optimizing images for the web, I'll save that for another day.</p><p>Put the pieces in your image folder for all your site pieces on your server. Then you need to create the html for the box on your webpage.</p>
<code>&lt;div class="boxtop"&gt; &lt;/div&gt;</code>
<code>&lt;div class="boxcontent"&gt;  whatever you want in the box goes here &lt;/div&gt;</code>
<code>&lt;div class="boxbottom"&gt; &lt;/div&gt;</code>
<p>Easy enough. Now create an external style sheet that will contain this</p>
<code>.boxtop &#123;<br/>
background-image:url(images/posttop.gif);<br/>
height:6px;<br/>
position:relative;<br/>
width:200px<br/>
&#125;</code>
<p>This is the top of the box, we declare the exact size of the image that is the box top, and then place the image in the that area</p>
<code>.boxcontent &#123;<br/>
background-color:#ebebeb;<br/>
background-image:url(images/postbody.gif);<br/>
background-position:left bottom;<br/>
background-repeat:repeat-x;<br/>
border-left-color:#7f7e77;<br/>
border-left-style:solid;<br/>
border-left-width:1px;<br/>
border-right-color:#7f7e77;<br/>
border-right-style:solid;<br/>
border-right-width:1px;<br/>
position:relative;<br/>
width:200px;<br/>
&#125;</code>
<p>Here we create the center of the box. It can expand vertically, while the gradient image tiles across the bottom of the container. Then we put a border only on the sides, to match the border that goes around our curved corner pieces. The background color of this box matches the background color of the top rounded corner image. </p>
<code>.boxbottom &#123;<br/>
background-image:url(images/postbottom.gif);<br/>
background-repeat:no-repeat;<br/>
height:6px;<br/>
position:relative;<br/>
width:200px<br/>
&#125;</code>
<p>This part is just like the top. It's just a box that has the bottom rounded corners and buts up to the content box.</p>
<p>I should also mention it would be good to find a CSS reset code snippet and use that in your style sheet.  Just do a google search for css reset, Eric Myers has one I use all the time. </p><p>Basically think of css like putting together a puzzle. You make these little odd pieces that don't make sense on their own, but when put together they make a seamless picture. Also remember things like picture format and size, and as you understand css more use shorthand to compress the file sizes down even more. When using images and external style sheets, make sure to point to the correct places these files are stored. The biggest problem I see fellow students having is linking to the correct spot they stored files on their server.</p><p>I'm sure someone out there has a better way to make a rounded box, or this particular usage may not be appropriate in your design. The box only expands up and down, not left and right. But it works well in my site right here.</p>]]></content:encoded>
			<wfw:commentRss>http://www.redgraffix.com/blog/2010/02/20/rounded-box-with-gradient-in-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Random # Generator AS3</title>
		<link>http://www.redgraffix.com/blog/2009/12/24/random-number-generator-as3/</link>
		<comments>http://www.redgraffix.com/blog/2009/12/24/random-number-generator-as3/#comments</comments>
		<pubDate>Thu, 24 Dec 2009 14:52:59 +0000</pubDate>
		<dc:creator>jason</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Notes]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[random number generator]]></category>

		<guid isPermaLink="false">http://redgraffix.com/blog/?p=169</guid>
		<description><![CDATA[I recently  created a game that needed a random number generator. Searching the internet, I found many ways to create one. Some seemed overly complicated, but I came across this and it seems to work perfectly, at least for the application I used it in. What I was trying to do was create random behavior [...]]]></description>
			<content:encoded><![CDATA[<img src="http://redgraffix.com/blog/wp-content/uploads/2009/12/actionscripticon_400-300x300-150x150.png" alt="Action Script 3" title="actionscripticon_400-300x300" width="150" height="150" class="alignright size-thumbnail wp-image-219" /><p>I recently  created a game that needed a random number generator. Searching the internet, I found many ways to create one. Some seemed overly complicated, but I came across this and it seems to work perfectly, at least for the application I used it in. What I was trying to do was create random behavior for the computer AI when fighting the human player. The way this works is I created a movie clip with all the monster's animations for his different behaviors. so from from<span id="more-169"></span> frame 2-20 is his standing still behavior, 21-40 is his attack behavior, 41-60 is dodging behavior, and so on.</p>
<p>I then labeled keyframes with still, attack, dodge, etc.  As  for the action script, on frame one I put this bit of code</p>

<code>var randNum:Number=Math.floor(Math.random()*4)+1;</code>

<p>What this does is create a random number, 1-4.  First it creates a variable "randNumber" which then must be defined as a number , that is a whole number "floor" ,  that is randomly 0-3. We have to remember computers always start with 0 not 1, so that's why there's that +1 at the end otherwise we'd have numbers 0-3 as our output even though we put 4 as the highest place. With the +1 it adds 1 to the output number making them go from 1-4.</p>

<p>From here we need tell the computer what to do with these random numbers. So we add this bit of code after it.</p>

<code>

if(randNum==1){gotoAndPlay("still")};

if(randNum==2){gotoAndPlay("attack")};

if(randNum==3){gotoAndPlay("dodge")};

if(randNum==4){gotoAndPlay("still")};
</code>
<p>Whats going on here is a simple set of if statements. if the variable we created earlier is 1 then our movie clip jumps to the frame labeled "still", if it's 2 it jumps to "attack",  and so on. I realized to make the game a little easier, I should have the monster stand still more often so the player can attack that's why "still" is called twice. He's more likely to stand still than do anything else.</p>
<p>So basically, a random number is generated in frame 1 that tells the movieclip where to jump to, it plays those set of frames, then at the end of those set of frames I send the play head back to frame one with 
<code>gotoAndStop(1);</code>
 to go and do it all over again. There's more code to go along with this, like testing to see if the monster hit's the player when he's attacking, figuring out how much life is lost when hit, and other things I'll save for another day. I'm not saying this is a great way to do things, but it worked for me. </p>]]></content:encoded>
			<wfw:commentRss>http://www.redgraffix.com/blog/2009/12/24/random-number-generator-as3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>PHP, what is it?</title>
		<link>http://www.redgraffix.com/blog/2009/09/30/php-what-is-it/</link>
		<comments>http://www.redgraffix.com/blog/2009/09/30/php-what-is-it/#comments</comments>
		<pubDate>Wed, 30 Sep 2009 20:08:10 +0000</pubDate>
		<dc:creator>jason</dc:creator>
				<category><![CDATA[Notes]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[scripting]]></category>
		<category><![CDATA[technology]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://redgraffix.com/blog/?p=75</guid>
		<description><![CDATA[I started doing some side research on my own about php. What I found so far is, PHP is installed on over 20 million websites and 1 million web servers. It is a server side scripting language for making dynamic and interactive Web pages. It's used for controling databases such as MySQL, Informix, Oracle, Sybase, [...]]]></description>
			<content:encoded><![CDATA[<img class="alignright size-medium wp-image-77" title="php-sauce" src="http://redgraffix.com/blog/wp-content/uploads/2009/09/php-sauce-224x300.jpg" alt="php-sauce" width="150" height="150" /><p>I started doing some side research on my own about php. What I found so far is, PHP is installed on over 20 million websites and 1 million web servers. It is a server side scripting language for making dynamic and interactive Web pages. It's used for controling databases such as MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC. PHP files can contain text, HTML tags and scripts and it's files are returned to the browser as plain HTML.</p> <p>  PHP stands for <strong>P</strong>HP: <strong>H</strong>ypertext <strong>P</strong>reprocessor. </p>
<span id="more-75"></span>
<p>The Wc3 describes PHP as-</p>
<ul>
	<li>PHP is a server-side scripting language, like ASP</li>
	<li>PHP scripts are executed on the server</li>
	<li>PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc.)</li>
	<li>PHP is an open source software</li>
	<li>PHP is free to download and use</li>
</ul>
<p>PHP installs onto your website's server, and is cross platform compatible. What you do is write scripts to be installed on the server, then when someone visits your site, these scripts control what information is presented in a dynamic fashion. In short, what PHP can do is convert a static website that has content that has to be changed by hand into a dynamic one that can display content based on any criteria you can think of. From What I've been reading, PHP is a loosely typed language, variable do not have to be declared like in more strict programing languages.</p><p> PHP files can contain text, HTML tags and scripts. One could create PHP files with nothing more than notepad, providing your server supports it, and it's most likely it does. So there's what PHP is, next step is getting into the nuts and bolts of it and writing scripts. We'll see how that goes....</p>]]></content:encoded>
			<wfw:commentRss>http://www.redgraffix.com/blog/2009/09/30/php-what-is-it/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Copyright and Contracts</title>
		<link>http://www.redgraffix.com/blog/2009/09/27/copyright-and-contracts/</link>
		<comments>http://www.redgraffix.com/blog/2009/09/27/copyright-and-contracts/#comments</comments>
		<pubDate>Sun, 27 Sep 2009 13:24:11 +0000</pubDate>
		<dc:creator>jason</dc:creator>
				<category><![CDATA[Notes]]></category>
		<category><![CDATA[school]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://redgraffix.com/blog/?p=68</guid>
		<description><![CDATA[I looked into copyright laws concerning web designers and artists in general and I think my head might explode from reading too much legalese. But it seems to me, the best thing an artist can do is retain ownership of their art even if it is created for someone else. When we as designers create [...]]]></description>
			<content:encoded><![CDATA[<img class="alignleft size-medium wp-image-69" title="funny pictures of cats with captions" src="http://redgraffix.com/blog/wp-content/uploads/2009/09/funny-pictures-of-cats-with-captions-300x231.jpg" alt="funny pictures of cats with captions" width="150" height="150" /><p>I looked into copyright laws concerning web designers and artists in general and I think my head might explode from reading too much legalese. But it seems to me, the best thing an artist can do is retain ownership of their art even if it is created for someone else. When we as designers create a site or piece of art for a client, we should hold on to the copyright for said idea. This way if our idea becomes a billion dollar piece of branding that a company uses, we're entitled to a piece of the pie. Designing a site and elements for a site, web designers should keep ownership of almost everything such as php pages, javascript, pngs, etc. this <span id="more-68"></span>way we control our ideas and are compensated fairly for them.</p><p>
The best way to be clear about all this when dealing with a client is to draw up a contract. In the contract we must clearly state what we hold the rights to and what the client is paying for. I'm also finding out contracts should be as clear as possible and not omit the smallest detail.</p><p> I looked through several web design contracts and they have several themes in common. Some of the things which should be spelled out are who's hosting, who owns the pages, who's liable if there's a lawsuit, what are the clients or our responsibilities, timelines, and a big one pricing. If you don't state it the contract, you could get bit in the butt by it later.</p><p> Clients always seem to have different expectations when it comes to web design. They might think they're entitled to 15 revisions for a site before it costs them a penny, meanwhile as designers, that's hours and hours of work. Or clients might expect to own the pages of a site and think they can change our design and come up with something new, meanwhile our name is at the bottom of this hideous new design hurting our reputation. It's because of things like this contracts need to be drawn up, we can't do business with out them.</p><p>
Unless, it's a "for hire" situation. For Hire is basically when you work for a design house or development type company. They hire you as an employee, give you work and pay you, but they hold the copyrights. You're the employee and they're the boss so they get ownership. For hire, for clients is normally a bad idea. By giving all rights and ownership of your work to a client you could be severely limiting possible income. It seems to me, if the client wants you to sign over all rights, or work without a contract at all, you should run away from them, far and fast.</p><p>
So after spending much time pouring over legal documents and copyright law, I've come to the conclusion, keep your ideas your own. As artists we own our ideas and are entitled to be compensated for them. The best way to hold onto our ideas is with a contract. In the contract spell everything out clearly so there's no confusion, and finaly never do business without a contract because you could end up really getting burned.</p>]]></content:encoded>
			<wfw:commentRss>http://www.redgraffix.com/blog/2009/09/27/copyright-and-contracts/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Wireframing</title>
		<link>http://www.redgraffix.com/blog/2009/09/21/wireframing/</link>
		<comments>http://www.redgraffix.com/blog/2009/09/21/wireframing/#comments</comments>
		<pubDate>Mon, 21 Sep 2009 23:50:04 +0000</pubDate>
		<dc:creator>jason</dc:creator>
				<category><![CDATA[Notes]]></category>
		<category><![CDATA[projets]]></category>
		<category><![CDATA[school]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://redgraffix.com/blog/?p=59</guid>
		<description><![CDATA[Today we discussed wireframing in web II. Wireframing is the process in which we start to figure out site hierachy and navigation. It's very basic layout. We're not thinking about colors or visual elements yet. Wireframing is barebones layout. what pages link to what pages. How's the navigation going to be laid out, etc. The [...]]]></description>
			<content:encoded><![CDATA[<img src="http://redgraffix.com/blog/wp-content/uploads/2009/09/images.jpg" alt="mc escher wireframe" title="mc escher wireframe" width="149" height="149" class="alignright size-full wp-image-62" /><p>Today we discussed wireframing in web II. Wireframing is the process in which we start to figure out site hierachy and navigation. It's very basic layout. We're not thinking about colors or visual elements yet. Wireframing is barebones layout. what pages link to what pages. How's the navigation going to be laid out, etc.</p>
<span id="more-59"></span> <p>The idea here is to flesh out navigation, visual elemnts come later. Creating a set of wireframes for a project also acts as a way to communicate with clients and stakeholders such as content creators, engineers, and developers.</p>]]></content:encoded>
			<wfw:commentRss>http://www.redgraffix.com/blog/2009/09/21/wireframing/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

