My New Site
Well it's been a year since I've last redesigned by site, and with all the heavy work load in the corporate world, I've finally managed tofinish my new redesign. Lately I've been favoring light-text on dark-background type layouts and decided I jump on the bandwagen.
As of right now I haven't converted the site over to WordPress, mainly due to time, butI'm starting to believe I might not need too. I've been using twitter and friendfeed a whole bunch lately and I noticed my social feeds are starting to look and feel much like a mini blog.
The real eyebrow lifter was when Videopixil redesigns his site, just a simple html portfolio site with a friendfeed widget as the sidebar looks and feels just like a dynamic blog! Now I'm still debating wether or not I'll convert this site over to WordPress (don't get me wrong, I really do need an archive, plug-ins, content management, etc.) since I've converted pixil.info and YouNoob in the past, only time will tell. Until then, I think this will do just fine.
Making Music on iPhone
Testing out the new IR-909 beta 3 for iPhone. Within a couple minutes, I had filled all 4 patterns with some killer beats and decided I'd hook it up to Logic Pro. Somewhat a hassle to sync the BPM's with Logic, but the result spoke for it's self.
I'd definitely like to see the next version have more patterns, but 4 is okay. Having said that, I really like playin with this app! I tip my hat to Dmitry at http://roventskij.net/ for making this app, gotta drop a donation for all the hard work.
By the way, the track in the background is by yours truely. Check out the full song at Last FM
Pixil.info - Episode 4 - Web Buildout
So on my last tutorial, we took a look at using layer comps and smart object for web build out. Today, we're going to take a closer look at the How-To's and Go In-depth.
How to Create Layer Comps for build out
Alright so when your design is ready for build out, you'll want to first make text layer comps. This will help us easily export our slices. So just click on the new layer comp icon in your layer comp palette, and name it Text On. Make sure you only have "visibility" checked.
Next, make a Text Off layer comp. Then start turning off all the HTML text. To select a text layer with the move tool, you can hold down cmd or control key and click on the layer. So with all the text turned off and the layer comp selected, click on the Update icon to save the layer comp. Okay, now we can cycling threw them. This will now let us quickly turn off all the HTML text with a single click, which will lets us to export slices much faster.
Continue Reading
Pixil.info - Episode 4 - Web Buildout
So on my last tutorial, we took a look at using layer comps and smart object for web build out. Today, we're going to take a closer look at the How-To's and Go In-depth. Alright so when your design is ready for build out, you'll want to first make text layer comps. This will help us easily export our slices. So just click on the new layer comp icon in your layer comp palette, and name it Text On. Make sure you only have "visibility" checked. Next, make a Text Off layer comp. Then start turning off all the HTML text. To select a text layer with the move tool, you can hold down cmd or control key and click on the layer. So with all the text turned off and the layer comp selected, click on the Update icon to save the layer comp. Okay, now we can cycling threw them.
This will now let us quickly turn off all the HTML text with a single click, which will lets us to export slices much faster.
How to setup the Navigation for build out (with Smart Objects):
Next, let's take a look at our navigation. The goal here is to set up the document to have roll over graphics. we can do this by converting the nav into a smart object, and then create roll over graphics along with layer comps and slices. First make a selection of the background layer, make it the size you want the smart object to be and convert it that into a smart object. So just copy merge, Paste, and name the layer. Right click the layer and convert to a smart object. Now open the smart object and copy the graphics over. just click and drag on the folder, and plop it into place. Now we have to double our canvas height. Basically we're going to set up the navigation for the CSS sliding doors technique. Duplicate the background layers and folders then shift them down. Create some cool graphics for the roll overs and save. When you switch back to our main layout, make the same marque selection of the background layer. Make that into a mask so you can mask out the roll over graphics. Also you might get warnings the layer comp palette. All you have to do to fix these is to hit the update icon or double click on the warning icon to clear the warning flag. So just cycle threw the layer comps and make sure their set properly.
How to setup Sidebar for build out:
Okay next, we'll convert our sidebar into a smart object. So just like before, create a marque selection to determine a canvas size for our smart object. drag over the graphics Adjust the layers, save it. Next create text layer comps. These may become tedious if your layers aren't organized, so its important to have layer organization.
How to create slices for build out:
Creating slices is a much better method then manually making selections, and exporting each image, piece by piece. By creating slices, we're able to save image name, compression setting, dimension, and the ability to export them out all at the same time. Before we start slicing, make sure we have guidelines set up so that they snap easily. Now draw out some slices. Name your slices simple and Make sure they're all consistent. So having a naming convention comes in handy. Next create slices in your smart objects. When you export your slices, make sure you switch to the Text Off layer comps. In the Save for Web & Devices dialog, you can change the name of the slices and set the image compression settings. In our save window, we can set to export selected slices only. I almost always have it have it set to this setting. Next export the slices inside the smart objects. You can select multiple slices by holding down the shift key and set the compression settings for all them at the same time. Check on our images when you're finished. Alright, that's it for my web build out workflow. I hope you've gotten something out of it, try it out. Let me know what you think, by post some comments. I'll be posting the PSD file on our site for reference. So you can download it and test it out. Remember, its all about using slices, layer comps, and smart object's. Dont forget, the key to making it easy is to being organized. Until next time, im ecken, cya later.
Pixil.info - Episode 2 - Web Buildout (Overview)
On today's episode, an overview of using layer comps to set up sub-pages and ready-to export slices. Creating slices inside of smart objects and organize your layers and folders to help you structure your sub-pages.
Layer Comps for Build Out
Layer comp are a convenient way to store a snapshot of certain aspects in a document. Here we're able to save a layer's visibility. Take a look at these two layer comps, text on and text off. When we cycle thru these two you'll notice that all this is really doesing is turn off and on the soon-to-be HTML text. By having your comp setup this way, it allows us to quickly export slices with out having to worry about the html text getting exported along with a background image.
Smart Objects & Slicing
Here we have an entire sub-page reside in one smart object. Inside our smart oubject we have slices and layer comps. Thats right folks, smart objects support slices.
Continue Reading
Pixil.info - Episode 2 - Web Buildout (Overview)
On today's episode, overview of using layer comps to set up sub-pages and ready-to export slices.
Creating slices inside of smart objects and organize your layers and folders to help you structure your sub-pages.
Layer Comps for Build Out
Layer comp are a convenient way to store a snapshot of certain aspects in a document. Here we're able to save a layer's visibility. Take a look at these two layer comps, text on and text off. When we cycle thru these two you'll notice that all this is really doesing is turn off and on the soon-to-be HTML text. By having your comp setup this way, it allows us to quickly export slices with out having to worry about the html text getting exported along with a background image.
Smart Objects & Slicing
Here we have an entire sub-page reside in one smart object. Inside our smart oubject we have slices and layer comps. Thats right folks, smart objects support slices. By converting your sub-page into a smart object, your able to create new slices for each new page. Also, notice we have our handy text on and text off layer comps. This is essential for exporting your slices. So in addition to converting your sub-pages into a smart objects, lets take a look at how we have our navigation set up. Here you'll find our favorite text on and text off layer comps. We also have our slices.
Just by looking at the layout, you'll notice we have it set up for the CSS sliding doors technique. This basically allows one background image contain different anchor states. so If you've done css menus before, you know the drill. thats basically all their is to the navigation. Alright so to sum thing ups, lets take a look at what we've learned so far.
- Use layer comps to set up sub-pages and ready-to export slices.
- Create your slices inside of smart objects.
- Organize your layers and folders to help you structure your sub-pages.
- Don't forget you can convert pieces of your website into smart objects.
Animated Buttons in Flash
Find out how to turn any graphic into an animated button. These look great on banners!
- Create roll over and roll out animations
- Use action script to control button behaviors
- Get familiar with frame labels to set up your animation states
View Tutorial
Download Files
Seamless Loop Animations
Create seamless animations for banners, websites and other media creatives.
- Great for bonuses, values, and seals
- Can swap text to display whatever you want.
View Tutorial
Download Files
Shine Effect in Flash
Shine Effect in FlashIn this tutorial, we'll be creating an eye popping shine effect in flash.
- Works great for vector and bitmap graphics
- Shine color can be changed to any color
- Take advantage of the new blend modes
View Tutorial
Download Files
Wrapping Text around Images in Photoshop
Find out how to wrap text in photoshop the dynamic way! Create custom text boxes with the pen tool. You can wrap text inside or outside a vector path.Dynamically edit the text box and watch as the text automatically updates.
View Tutorial
Download Files