All Posts in Tuts+

  • Design & Illustration
    50+ Kick-butt Book Cover Designs53prev
    5 shares
    Have you ever been seduced to buy or borrow a book, simply because the cover was so well designed? That's why it's worth getting cover design right. In this post, we've collected 53 excellent book covers in many different styles. These covers will inspire not only any book cover design you do, but your designs in other areas as well.Read More…
  • Code
    3 Ways to Speed up Your Site with PHP200x200
    1 shares
    These days, with broadband connections the norm, we don't need to worry as much about internet speeds or the filesize of our pages. However, that's not to say that we still shouldn't do so. If you wish to reduce the load times on your server, decrease the number of HTTP requests, and go that extra bit for your visitors, there are a few techniques that you can use. This tutorial covers a number of PHP tricks, including caching and compression. Read More…
  • Design & Illustration
    Creating a Stencil Bomb in IllustratorPreview
    There are many different ways to approach making a stencil. Some artists use Photoshop to create their stencils, but this method usually involves manipulating existing images. For this tutorial, I'm going to start from scratch and go through the process of creating a graphic illustration intended to become a stencil, designing bridges into the illustration so it can be cut out with out losing any structure, And generally creating a design that works well as a large graphic image.Read More…
  • Code
    Firebug: White to Black BeltCode
    1 shares
    Firebug is a Firefox extension that will streamline your developing process: it offers a plethora of tools for working with HTML, CSS, Javascript, and more. In this tutorial, I'm going to take you to a black belt level of Firebug usage that will karate chop your website woes!Read More…
  • Design & Illustration
    Create a Gritty, Action-packed Movie PosterDesign and illustration
    6 shares
    Action movies provide a form of escapism that no other genre of film can. Their advertising posters' strive to capture the fast-paced, action-packed scenes to fuel your adrenaline! This tutorial focuses on designing an advance or teaser poster which are displayed several months prior to the actual films release.Read More…
  • Code
    Creating a Feed Reader Widget with Adobe Flex 3Preview
    In this tutorial you'll learn how to create your own Flex feed reader application. In this case, the final result will be a simple feed reader which can be used in your blog or site to display your favorite feeds. Pre-Requirements To complete this tutorial you'll need some things: A copy of Flex Builder 3.x, you can download a trial for free from the Adobe site. The opensource library as3syndicationlib (I won't re-invent the wheel by creating one syndication lib!) which can be downloaded here. Images I've used in the project. You can download them here. The XMLUtil.as class to validate XML Structure, available from corelib Package. Some free time! Step 1: Create a New Project Well, this is probably something that you already know how to do, but just to remind you and ensure we're working on the same page: Begin by running Flex Builder then create a new project (Menu File > New > Flex Project). Make sure you enter the same properties in the dialog as shown here: Just enter as the Project name: WFlexibleFeed. All the rest remains like it is! Press the "finish" button! Your project is created! Step 2: Setting up Required Libs Open the downloaded xmlsyndication-.85.zip lib from the provided download source, browse the archive xmlsyndicationlib/bin/ and extract the xmlsyndication.swc into the libs folder of your flex project. It should result in the following structure: This library file will be automatically loaded because it's in the libs folder. You don't need to do anything else to load this library, you just need to import its classes before use. (Note, if you do not have the bin-release folder don't get worried, this is not important for now!). Step 3: Defining Project Details In this step, you'll setup some folders that we'll use along with our project. The first one is a folder "assets" in the project root (src folder). To create it just right-click on the src folder, then go to (New > Folder) and name it "assets". Repeat the same actions for a "com" folder. When this is done, extract the images provided in the images.zip file to the assets folder (you can select them and drag them to the assets folder in flex builder). You should now have the following structure in the flex navigator project: Step 4: Creating a Simple Layout This "Simple layout" can be whatever you want, it just needs to contain a datagrid, a textinput with feed address, a button to load and another to refresh. To get my layout: you'll need to insert the following code into WFlexibleFeed.mxml within the <mx:Application> tags: <mx:Canvas width="336" height="208" horizontalCenter="0" verticalCenter="0" borderColor="#A70101" backgroundColor="#242424"> <mx:Canvas x="0" y="0" width="336" height="24" backgroundColor="#333333"> <mx:Label x="9" y="4" text="WFlexible Feed v1.0" width="298" color="#BBBBBB"/> </mx:Canvas> <mx:Label x="11" y="27" text="Feed:" color="#FFFFFF"/> <mx:Image x="310" y="25" source="@Embed(source='assets/Rss.png')" useHandCursor="true" buttonMode="true" toolTip="Switch Feed!" click="switchFeed()"/> <mx:Image x="291" y="25" source="@Embed(source='assets/Refresh.png')" useHandCursor="true" buttonMode="true" toolTip="Refresh" click="refresh()"/> <mx:Image x="50" y="103" source="@Embed(source='assets/logo.png')"/> <mx:DataGrid x="10" y="47" height="155" width="316" id="dataGridItems" dataProvider="{DP}" useHandCursor="true" backgroundAlpha="0.4"> <mx:columns> <mx:DataGridColumn headerText="Feed entries..." dataField="title" sortable="false"/> </mx:columns> </mx:DataGrid> <mx:TextInput x="56" y="26" width="227" text="http://feedproxy.google.com/flashtuts/" height="20" toolTip="Click to Edit Feed URL" id="feedURI" styleName="myTextInput"/> </mx:Canvas> As you can see, I've already made some modifications into some components arguments, like giving a DP variable to dataGrid dataProvider, putting the feed addresse... well.. you can see for yourself. These are the main project components, we'll use a little of CSS code (yes, Flex supports css) to make it more beautiful. Step 5: Creating a Stylesheet This process is very simple. Copy my css code here to make it similar. If you want some other colors, just try the Flex 3 style explorer and create your own css styles. Copy this css into your application, right after the <mx:Application> tag: <mx:Style> .myTextInput { borderStyle: none; borderColor: #505050; backgroundAlpha: 0; backgroundColor: #ffffff; color: #5C5C5C; themeColor: #FFFFFF; } Button { cornerRadius: 0; borderColor: #000000; themeColor: #333333; } Alert { backgroundColor: #000000; borderColor: #000000; backgroundAlpha: 0.9; borderAlpha: 0.9; color: #FFFFFF; } ToolTip { backgroundColor: #333333; color: #cccccc; } DataGrid { backgroundAlpha: 1; backgroundColor: #666666; alternatingItemColors: #666666, #333333; headerColors: #000000, #000000; horizontalGridLines: true; horizontalGridLineColor: #000000; verticalGridLines: false; verticalGridLineColor: #cccccc; rollOverColor: #ffffff; textRollOverColor: #000000; borderColor: #000000; selectionColor: #ffffff; color: #ffffff; headerStyleName: "mydataGridHeaderStyle"; } .mydataGridHeaderStyle { color: #ffffff; fontWeight: normal; fontStyle: italic; textDecoration: none; letterSpacing: 1; } VScrollBar { cornerRadius: 0; highlightAlphas: 0.46, 0.27; fillAlphas: 1, 1, 1, 1; fillColors: #666666, #333333, #cccccc, #999999; trackColors: #666666, #333333; themeColor: #000000; borderColor: #000000; iconColor: #111111; thumbOffset: 1; } </mx:Style> This will produce a better widget look and feel, right? Step 6: Create the Feed Handler Yes, even with the xmlsyndication lib you'll need to code a class to handle the parser output, or you'll get nothing to work. So, you'll need to create a new Action Script Class, just go to menu File > New > Action Script Class and enter the settings as seen in the image below. We'll also need a class (from corelib) to validate the XML format. Just download the class here and put it in your "com" folder. This will create a new folder "feed" in the "com" folder and a "FeedParser.as" file too. The Action Script editor will now open. Step 7: Code the Parser Class Just copy this code into the FeedParser.as Class: package com.feed { //necessary imports import com.XMLUtil; //usefull for correct xml format XMLUtil.as from corelibPackage import com.adobe.xml.syndication.atom.Atom10; //imports from xmlsyndicationlib from adobe import com.adobe.xml.syndication.atom.Entry; import com.adobe.xml.syndication.rss.Item20; import com.adobe.xml.syndication.rss.RSS20; //some flash imports needed to work with the feed import flash.display.Sprite; import flash.events.Event; import flash.events.IOErrorEvent; import flash.events.SecurityErrorEvent; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; //two classes used in the process import mx.collections.ArrayCollection; import mx.controls.Alert; public class FeedParser extends Sprite { private var feedURI:String="http://feedproxy.google.com/flashtuts/"; //default feed private var feedLoader:URLLoader; //the feed loader public var FEED_DATA:ArrayCollection=null; //the feed data public function FeedParser(url:String) { feedURI=url; //on initiate, set the feed url } public function loadFeed():void { //add the listener events and load the feed feedLoader = new URLLoader(); var req:URLRequest = new URLRequest(feedURI); req.method = URLRequestMethod.GET; feedLoader.addEventListener(Event.COMPLETE, completeHandler); feedLoader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler); feedLoader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, errorHandler); feedLoader.load(req); } //error handling function private function errorHandler(e:Event):void { if(e.type==SecurityErrorEvent.SECURITY_ERROR) Alert.show("Security Error while reading feed URI!"); else if(e.type==IOErrorEvent.IO_ERROR) Alert.show("I/O Error while reading feed URI!"); else Alert.show(e.type+" Error while reading feed URI!"); } //on result function private function completeHandler(evt:Event):void { var feedData:String=feedLoader.data; //get the feed contents var feed_type:String="RSS"; var entrys:Array; var tempObj:Object; //old way to detect feed type & version if(feedData.search("rss version=\"2.0\"")>-1) trace("FEED RSS 2.0"); else if(feedData.search("rss version=")>-1) trace("FEED RSS <=1.0"); else if(feedData.search("Atom")>-1) trace("FEED ATOM"); if(feedData.search("xmlns=\"http://www.w3.org/2005/Atom")>-1) feed_type="ATOM"; //check if is an ATOM feed //if is a RSS feed if(feed_type=="RSS") { var rss:RSS20= new RSS20(); try { rss.parse(feedData); } //parse it catch(e:Error) { Alert.show("Error Parsing Feed!\nInvalid link?"); return void; } entrys=rss.items; //get the items FEED_DATA = new ArrayCollection(); //initiate the arrayCollection //validate the feed if(!XMLUtil.isValidXML(feedData)) { Alert.show("Invalid or bad feed URI or structure!"); return void; } //built an array Collection with the results for each(var entry:Item20 in entrys) { tempObj = new Object(); tempObj.title=entry.title; tempObj.link=entry.link; tempObj.desc=entry.description; tempObj.author=entry.creator; FEED_DATA.addItem(tempObj); } } else if(feed_type=="ATOM") { //else if is a ATOM feed, do the same process var rssA:Atom10 = new Atom10() try { rssA.parse(feedData); } catch(e:Error) { Alert.show("Error Parsing Feed!\nInvalid link?"); return void; } var entrysA:Array = rssA.entries; var tempObj2:Object; FEED_DATA = new ArrayCollection(); if(!XMLUtil.isValidXML(feedData)) { Alert.show("Invalid / bad feed URI or structure!"); return void; } for each(var entryA:Entry in entrysA) { tempObj2 = new Object(); tempObj2.title=entryA.title; tempObj2.link=entryA.links[0].href; tempObj2.desc=entryA.content; tempObj2.author=entryA.authors; FEED_DATA.addItem(tempObj2); } } else { //impossible to find feed type... Alert.show("Cannot detect feed type\nInvalid link?") return void; } this.dispatchEvent(new Event("DataReady")); //data is now ready to be used! listen this event to acess data! } } } Save your file now! Step 8: Understanding the Feed Parser Easy, just read the comments in the code and you'll be able to understand it. If you don't want to, you just need to know what we'll write to use it: import com.feed.FeedParser; private var parser:FeedParser; parser = new FeedParser("http://feed.url/feed/"); parser.addEventListener("DataReady", dataHandler); parser.addEventListener("DataError", dataErrorHandler); parser.loadFeed(); Well, this is a simplified version of how to work with our class. We'll see it in use... keep following the tutorial.. Step 9: Take a Break This is a relaxing step, maybe that was too much code at once, let me explain the workflow: We have a syndicationlib responsible for reading the feed and putting the contents into an objects class. Our FeedParser class' main purpose is to prepare, call and handle the output from the syndication class. Then there's our main application, which will call the FeedParser class and wait for the DataReady event to load the feed items into the datagrid dataprovider. Step 10: Code First Load Function This is the function that will make our feed reader work. We'll code an init() function which will be called on the creationComplete event of our application. Write necessary imports: import mx.collections.ArrayCollection; import mx.controls.Alert; import com.feed.FeedParser; private var parser:FeedParser; private var currentFeed:String; [Bindable] private var DP:ArrayCollection; Our initial function: private function init():void { DP=null; Security.allowDomain(feedURI.text); //useful some times, try to avoid domain access errors Security.allowInsecureDomain(feedURI.text); //useful some times, try to avoid domain access errors //in some cases you'll need (if possible) to load an external crossdomain.xml file... parser = new FeedParser(feedURI.text); parser.addEventListener("DataReady", dataHandler); parser.addEventListener("DataError", dataErrorHandler); parser.loadFeed(); } Step 11: Code the Event Handlers Lets code the 3 necessary event handlers. The error handler: private function dataErrorHandler(evt:Event):void { Alert.show("Some Error ocurred reading data from feed!\n\nPossible Causes:\nInvalid feed URL\nInvalid feed type (Not RSS 2.0)\nInvalid feed format"); } The success handler: private function dataHandler(evt:Event):void { DP = new ArrayCollection(); DP=parser.FEED_DATA; currentFeed=feedURI.text; //we save the feedURL to a variable, needed to refresh the feed and avoid recalls } Now we have our feed items in the DP arrayCollection, ready to use into the dataGrid. I also want to have a self-refresh mechanism (so the feed entries updates are outputted to datagrid), we'll create it now. Step 12: Coding a Self-Update Mechanism The process is very easy, we'll need a timer to execute a new call to get feed contents, so... Declare the timer next to our var parser: private var updateTimer:Timer = new Timer(600000); //means 600 seconds = 10 minutes Write loadAutoUpdate(); on the dataHandler function on bottom: private function dataHandler(evt:Event):void { DP = new ArrayCollection(); DP=parser.FEED_DATA; currentFeed=feedURI.text; //we save the feedURL to a variable, needed to refresh the feed and avoid recalls loadAutoUpdate(); //load the update engine } and let's code the update function: private function loadAutoUpdate():void { try { updateTimer.stop(); //we try to stop a possible started timer updateTimer.removeEventListener(TimerEvent.TIMER, onTime); //remove the eventListener } catch(e:Error) { trace("Error on timer!") } //handle possible errors updateTimer.addEventListener(TimerEvent.TIMER, onTime); //add listener again updateTimer.start(); //start the timer } Finally, we need the onTime function to handle time events every 10 minutes: private function onTime(evt:TimerEvent):void { feedURI.text=currentFeed; init(); } As people can change the feedURI field, we save it into a currentFeed variable until a new feed data is parsed. Step 13: Understanding the Self-Update Mechanism The workflow is simple. When the init() function is called, the feedParser is loaded. In this function we reset the DP (data provider), setup the security policies (to avoid some domain access errors) and load the feed: (...) parser.loadFeed(); (...) Finally, the feed is parsed and the DP is populated with feed items: (...) DP = new ArrayCollection(); DP=parser.FEED_DATA; (...) and we load the update mechanism that will be loaded every 10 minutes (~600 seconds / 600 000 miliseconds): (...) private var updateTimer:Timer = new Timer(600000); (...) updateTimer.start(); (...) That will call the onTime function every 10 minutes and recall the init function to reload the feed. private function onTime(evt:TimerEvent):void { feedURI.text=currentFeed; init(); } The main system is coded, now we just need to add some more actions. Step 14: Code Button Actions In this step we'll need to code the functions to change to a new feed and refresh the current one. The refresh function in quite simple: private function refresh():void { feedURI.text=currentFeed; //to avoid changes on textInput init(); //reload the feed } and the change feed function: private function switchFeed():void { if(currentFeed==feedURI.text) Alert.show("Please edit the feed url and try again!"); //we'll not switch feed to the same one! else init(); //load the feed because feedURI.text is not equal to actual feed URI. } Step 15: Load the Things Up and Test Them We need to load the whole process on the creationComplete event of the application, just add to your mx:application tag: (...) creationComplete="init()" (...) Try to run the application now! It's working, right? We'll now improve the application interaction.. Step 16: Understanding the DP Elements The data provider DP is a copy from the FeedParser.FEED_DATA array collection, so we need to add the FEED_DATA structure into the FeedParser.as class: tempObj = new Object(); tempObj.title=entry.title; tempObj.link=entry.link; tempObj.desc=entry.description; tempObj.author=entry.creator; FEED_DATA.addItem(tempObj); In here we can see each item contains one title, link, desc(ription) and author(s) elements. This will be useful if you want to display that information on the datagrid, though for the moment we only want to display the title (using dataField): <mx:DataGridColumn headerText="Feed entries..." dataField="title" sortable="false"/> If we need to display the desc or link, we just need to provide the field desc as dataField parameter in a new column. Step 17: Load the Item Webpage Of course, this is very useful! We just need to enable the double-click into the dataGrid by writing the following into the mx:Table tag: doubleClickEnabled="true" doubleClick="loadURL()" and the loadURL() function: private function loadURL():void { if(dataGridItems.selectedIndex>-1) navigateToURL(new URLRequest(dataGridItems.selectedItem.link), "_blank"); //if there is any selected index, load the URL into another window. } Quite easy, so we've almost finished the feedReader, time to review the code. Step 18: Review the Code Time to compare your code with mine WFlexibleFeed.xmml <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#EBEBEB, #CBCBCB]" creationComplete="init()"> <mx:Style> .myTextInput { borderStyle: none; borderColor: #505050; backgroundAlpha: 0; backgroundColor: #ffffff; color: #5C5C5C; themeColor: #FFFFFF; } Button { cornerRadius: 0; borderColor: #000000; themeColor: #333333; } Alert { backgroundColor: #000000; borderColor: #000000; backgroundAlpha: 0.9; borderAlpha: 0.9; color: #FFFFFF; } ToolTip { backgroundColor: #333333; color: #cccccc; } DataGrid { backgroundAlpha: 1; backgroundColor: #666666; alternatingItemColors: #666666, #333333; headerColors: #000000, #000000; horizontalGridLines: true; horizontalGridLineColor: #000000; verticalGridLines: false; verticalGridLineColor: #cccccc; rollOverColor: #ffffff; textRollOverColor: #000000; borderColor: #000000; selectionColor: #ffffff; color: #ffffff; headerStyleName: "mydataGridHeaderStyle"; } .mydataGridHeaderStyle { color: #ffffff; fontWeight: normal; fontStyle: italic; textDecoration: none; letterSpacing: 1; } VScrollBar { cornerRadius: 0; highlightAlphas: 0.46, 0.27; fillAlphas: 1, 1, 1, 1; fillColors: #666666, #333333, #cccccc, #999999; trackColors: #666666, #333333; themeColor: #000000; borderColor: #000000; iconColor: #111111; thumbOffset: 1; } </mx:Style> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import com.feed.FeedParser; private var parser:FeedParser; private var updateTimer:Timer = new Timer(600000); [Bindable] private var DP:ArrayCollection; private var currentFeed:String; private function init():void { DP=null; Security.allowDomain(feedURI.text); Security.allowInsecureDomain(feedURI.text); parser = new FeedParser(feedURI.text); parser.addEventListener("DataReady", dataHandler); parser.addEventListener("DataError", dataErrorHandler); parser.loadFeed(); } private function dataErrorHandler(evt:Event):void { Alert.show("Some Error ocurred reading data from feed!\n\nPossible Causes:\nInvalid feed URL\nInvalid feed type (Not RSS 2.0)\nInvalid feed format"); } private function loadAutoUpdate():void { try { updateTimer.stop(); updateTimer.removeEventListener(TimerEvent.TIMER, onTime); } catch(e:Error) { } updateTimer.addEventListener(TimerEvent.TIMER, onTime); updateTimer.start(); } private function onTime(evt:TimerEvent):void { feedURI.text=currentFeed; init(); } private function dataHandler(evt:Event):void { DP = new ArrayCollection(); DP=parser.FEED_DATA; currentFeed=feedURI.text; loadAutoUpdate(); } private function loadURL():void { if(dataGridItems.selectedIndex>-1) navigateToURL(new URLRequest(dataGridItems.selectedItem.link), "_blank"); } private function refresh():void { feedURI.text=currentFeed; init(); } private function switchFeed():void { if(currentFeed==feedURI.text) Alert.show("Please edit the feed url and try again!"); else init(); } ]]> </mx:Script> <mx:Canvas width="336" height="208" horizontalCenter="0" verticalCenter="0" borderColor="#A70101" backgroundColor="#242424"> <mx:Canvas x="0" y="0" width="336" height="24" backgroundColor="#333333"> <mx:Label x="9" y="4" text="WFlexible Feed v1.0" width="298" color="#BBBBBB"/> </mx:Canvas> <mx:Label x="11" y="27" text="Feed:" color="#FFFFFF"/> <mx:Image x="310" y="25" source="@Embed(source='assets/Rss.png')" useHandCursor="true" buttonMode="true" toolTip="Switch Feed!" click="switchFeed()"/> <mx:Image x="291" y="25" source="@Embed(source='assets/Refresh.png')" useHandCursor="true" buttonMode="true" toolTip="Refresh" click="refresh()"/> <mx:Image x="50" y="103" source="@Embed(source='assets/logo.png')"/> <mx:DataGrid x="10" y="47" height="155" width="316" id="dataGridItems" dataProvider="{DP}" doubleClickEnabled="true" doubleClick="loadURL()" useHandCursor="true" backgroundAlpha="0.4"> <mx:columns> <mx:DataGridColumn headerText="Feed entries..." dataField="title" sortable="false"/> </mx:columns> </mx:DataGrid> <mx:TextInput x="56" y="26" width="227" text="http://feedproxy.google.com/flashtuts/" height="20" toolTip="Click to Edit Feed URL" id="feedURI" styleName="myTextInput"/> </mx:Canvas> </mx:Application> It's almost equal right? Step 19: Prepare the Application for Web Many people will grab the generated WFlexibleFeed.swf from the bin-debug folder and put it in the final production environment, but this is a mistake! First, use the framework (near 200kb) as RSL (Runtime Shared Library). That will then be downloaded just once to the user's machine, next time it will not be loaded (therefore decreasing loading time). To do this, goto Project > Properties > Flex Build Path > Library Path and click on Framework Linkage. Change it from "Merged into code" to "Runtime shared library (RSL)" then click OK. The framework will now be exported as a separated file. We're ready to export the application. Step 20: Export Release Build Every application should be exported as a release build (that's why project path contains the bin-release folder). You just need to click on the Export Release Build Button, shown yellow here: The whole project will be exported to the "bin-release" folder. These are the contents to be placed on your site or blog! Step 21: Play With It You now have time to play with the final result, change some css details, make another kind of feed switcher, there are many things you can improve it. You can even take it to desktop using Adobe AIR. Get inspired! One very nice application for this feedReader is to put your own feed URL, disable text edition, disable the change and refresh buttons and distribute to other sites as a widget to read your blog entries... Conclusion In this tutorial you've learned how to parse, handle and display feed entries into a DataGrid inside Flash. You've learned a little about the cool xmlsyndication lib and also dicovered some tricks to improve your projects. Browse the code, download the source files and have fun! Note: use the menu File > Import > Flex Project archive to import the source files; they are ready to use! I hope you liked this tutorial, thanks for reading!Read More…
  • 3D & Motion Graphics
    Create Fairly Realistic Fire using CC Particle WorldEddie fire thumb
    7 shares
    Using the built-in plugin CC Particle World and a few tricks, learn how to create this fairly realistic looking fire shot.Read More…
  • 3D & Motion Graphics
    Model and Texture a Photorealistic USB Cable with Maya and Mental Ray: Part 2Preview
    3 shares
    In this tutorial you will go through the process of modeling and rendering a Photorealistic USB cable in Autodesk Maya. You will also learn to use Mental Ray, along with the new architectural materials, rendering layers, and Photoshop, to create a fast, accurate, and photorealistic depth of field.Read More…
  • Design & Illustration
    Psdtuts+ 'Delta Dawn' Video Game Cover Design Contest!Contests
    We have the next all new Psdtuts+ Design Contest to kick off this month. Game design is a huge source of inspiration for Photoshop artists. If you've been waiting to design a video game cover, or have experience creating them, then this contest gives you a chance to showcase your skills. In this contest, you'll be putting together a video game cover in Photoshop. Up for grabs is a Wacom Intuos4 Medium Tablet, iPhone 3G S, Nintendo DS Lite (thanks to CSSRockstars), loads of marketplaces credits, and 1-year memberships to Psd Plus. This is going to be a lot of fun! Learn all about the contest and how to enter at the jump!Read More…
  • Code
    A Different Top Navigation200x200
    7 shares
    When designing a new site, web designers usually face the age-old question: vertical or horizontal navigation? There are pros and cons to both solutions. One example being horizontal navigation limits the number of links you can have due to a limited page width. This is usually solved by including a drop down system. However, if you are attempting to make your particular site stand out, you might consider thinking outside the "norm". In this tutorial, we will be doing precisely that. We will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time. Read More…
  • Design & Illustration
    How to Combine Digital Painting and Photo Manipulation to Create a Platform EnvironmentPreview
    10 shares
    In this tutorial, you will learn how to combine digital painting and photo manipulation to create polished fantasy art. The process of combining digital painting and photo manipulation is a great mix. It truly allows you conquer the world with beautiful illustrations. Let's get started!Read More…
  • Design & Illustration
    How to Prepare Artwork for Screen-PrintingPreview
    20 shares
    A great piece of design or illustration can be taken to new heights by having it screen-printed. The texture and variance of the ink on the paper is beautiful, and the 'happy mistakes' are delicious. But this magic is not possible without prepping your artwork. Let's learn how!Read More…