Left-Brained vs. Right-Brained – The Developer/Designer Paradox

Leave a reply

Two Schools of Thought

Psychologists argue that most people are either right or left-brained. That is to say, they are either analytical or creative thinkers. Given that the brain is evenly divided into two distinctly different hemispheres it is reasonable to think that the different sides control the different thinking modes. Although many researchers scoff at the idea of the brain functioning 100% in that manner, it does make for a dynamic topic when you contemplate the inherent differences between a designer and a developer.

The Inevitable Battle

I think you’d agree after looking at the list above that right-brained thinkers sound like designers, and left-brained thinkers sound like developers. So it stands to reason that the common struggles that occur between designers and developers are nothing more than the predictable nature of a right-brained thinker versus a left-brained thinker. Moreover, it makes perfect sense that if these two mind sets can find some common ground, they can produce greater results together than they ever could apart from one another. So the key issue becomes, how to benefit from the different schools of thought, rather than allowing them to have a detrimental effect.

To get a better idea of how designers and developers can successfully work together it would be wise to first understand what makes them tick.

The Designer/Developer Viewpoints

The designer’s primary focus is on color, aesthetics, and branding. Because they tend to be visual, creative thinkers, they strive for a visually appealing user experience. This explains why many of the designer’s portfolio websites are uniquely beautiful. That being said, it is common for the designer to overlook things like proper coding practices and form testing. At some point form needs to meet function and that’s where the developer’s strengths lie.

Developers are logical, procedural thinkers. They have a strong desire to do things the “right way”, and for the site to just “work”. They are that guy in your math class who doodled calculus equations in his margins instead Situs Judi Bola of the stick figures you were drawing. They are focused on function and things like an mvc approach, reusable code and web standards.

The Benefits of Bridging the Gap

An effective designer/developer workflow is imperative to success on large-scale web projects. It’s extremely beneficial for designers to learn and understand the development side of things and vice versa. Webdesigner Depot recently put together a fantastic list of 6 Reasons Why Designers Should Code, and I couldn’t agree more with their viewpoints. Exercising both sides of your brain will help you grow as a designer. All the study on typography, colors and the like can only take you so far.

Without the help of a designer, developers will often overlook important design elements. A lot of times they fall into mistakes like, “oh that font will work”, or “what can we fill that space with”. The bottom line is that by working together, or in the case of a 1 person project, exercising both sides of your brain, you will become a much better creator of websites

Final Thoughts

I’m sure plenty of you reading this article feel as though you lie somewhere in the middle of right and left-brained. I feel like I am a bit of a “hybrid” myself. Which is funny because in most areas of my life I’m fairly analytical and procedural, but with websites I’m probably more of a designer than I am a developer. If you’d like to discover more about the way you think, you may find this test to be an interesting one.

Join the discussion, I’d love to get the design community’s feedback on this topic. What side of your brain is more dominant? How can designers and developers improve their workflow and communication?

Create an Awesome Grass Texture in Photoshop

Leave a reply

Myinkblog - This is the fourth and final installment of my series on creating textures in Photoshop. If you missed the first three, they were creating: Water Texture, Wood Texture and Stone Texture. This tutorial will combine much of what we learned about in the first three installments, we will also go over some new techniques, and add some finishing touches that pull the whole look together.

Onward, to the Tutorial…

  • Bring up Photoshop and create a new document at a size that you like. I used 500px by 500px
  • The first thing we need to do is make a dirt background to show through from underneath the grass we will create. Set your foreground and background colors to black and white. Slot88 A shortcut for this is to restore Photoshop’s color defaults by pressing ‘d’ on your keyboard
  • Rename the background layer you are working on, call it dirt, or something applicable. (We will be using a couple layers in this tutorial so this will help organize things.
    Go to the toolbar at the top and click filter->render->clouds. This will give us a nice base to work from.
  • Add some noise and interest to our dirt. Click filter->noise->add noise. Change the amount to 44%, the distribution to gaussian and make sure monochromatic is checked on. (All these types of settings are merely suggestions, it’s by tweaking these settings, that you will really begin to get a grasp on Photoshop filters.)
  • Add a gaussian blur to the dirt layer. Click filter->blur->gaussian blur. Set the radius to 0.9 pixels.
  • Let’s add one more filter to this dirt layer. Click filter->brush strokes->splatter. Set the spray radius to 21 and the smoothness to 2.
  • Now we need to give the dirt layer it’s color. Click image->adjustments->hue/saturation. Make sure to check preview and colorize. Then change the setting to a nice brown. I used: Hue: 49, Saturation: 29, Lightness: -38. Click OK.
  • OK, we are now finished with the dirt layer. That gives us a nice texture and color underneath the grass we are about to create. Let’s start on the grass. Create a new layer and name it “Grass.”
  • Change your background color to a grassy color green, I used, #52782F. Hit ‘ctrl, backspace’ to fill your current layer (Grass) with the green color you selected.
  • Add some noise to your new grass layer. Click filer->add noise->noise. Choose 30% for the amount, gaussian for the distribution, and check monchromatic. Click OK.
  • Blur the grass layer. Click filter->blur->gaussian blur. Change the radius to 0.9 pixels, click OK.
  • We are getting closer, but it still doesn’t look a whole lot like any grass I’ve ever seen. We can use a couple of wind filters to lengthen the grass and simulate the look of blades. Click filter->stylize->wind, and change the settings to: method, stagger and direction, from the right. Click OK.
  • That looks a little better, but grass doesn’t grow all in one direction. So we need to add a little more direction and interest to our layer. First click image->rotate canvas->90 CW. Click OK.
  • We are going to repeat the last two steps now, but go in the opposite direction. So go to filter->stylize->wind again and choose stagger, from the left. Click OK.
  • Now flip the image so the grass looks verticle. Click image->rotate canvas->90 CCW. Below is what I’ve got so far…
  • I think this grass could use a little more contrast. Change the levels by clicking image->adjustments->levels. Drag the white and black sliders towards the middle till you get the variance you are after. Click OK.
  • This is already a pretty useful grass texture, but we are going to take this tutorial a bit further. If all you need is the grass, you may want to jump down to the steps on masking to reveal some of the dirt layer underneath. Otherwise, stick with these steps to add some lines to our field of grass to make it look like a football field. First off create a new layer, make sure you add it to the top of the layers (ie above Dirt and Grass), and name this layer Lines.
  • Grab the brush tool (’b’ is your keyboard shortcut). Open up you brushes palette, window->brushes. Locate and click on your watercolor loaded brush 63 (shown in the image below). This is a cool Photoshop brush with some rough edges.
  • Change your foreground color to white. Start somewhere in the bottom left and click and drag toward the right side. You may have to try a couple times (if you are like me) to get a straight enough line. If you mess up just hit ‘ctrl, z’ on the keyboard to undo the brush stroke you drew.
  • Use the same brush but scale the width down to about 45 pixels, either by pressing the ‘[’ on the keyboard or locating the size options in the properties box at the top for brushes. Make a line perpendicular to the first line you drew, going from that line to the bottom right hand corner.
  • Add noise to the lines. Click filter->noise->add noise. I used 11% for the amount.
  • We should make the lines look like they are painted into the grass so we are going to add a subtle inner shadow. Double-click next to the name in the layer palette (if you are following along it should be lines), this will bring up the layer style dialog box. Check inner shadow and change the opacity to 60, the distance to 4 and the size to 4. Click OK.
    The lines are starting to make sense on the field, but let’s try to blend them even more so. Change the opacity to 90 and the fill to 95.
  • Now we are going to put the 50 yard marker on the field. Click on the text tool and in the properties for the text tool at the top of the screen, change your font to a stencil type font. I used ’stencil std’ but you can use whatever you think works best. Just a quick side note, their are many really good free font sites out there, one of my favorites is www.dafont.com. Change the font size to something like 72 (we can adjust the size later) and the color to white. Now click anywhere on the field itself with the text tool still selected. This will create a new layer at the top of the layers for us. Now type 50.
  • Hit ‘ctrl, t’ on the keyboard to bring up the free transform tools. Hover over the middle of the 50 and click and drag it into the correct area. Then resize it to your liking by clicking and dragging any of the corners out (if you’d like to keep the proportions hold shift down while you drag). Finally, rotate the angle to the way you’d like. Hover over a corner until you get a double arrow with an arch for the curser, then click and drag.
  • Convert the 50 layer to a smart object by right clicking (ctrl click on the mac) on the layer and selecting convert to smart object. This will allow us to handle this layer just like the others, in this case we need to add a filter. Keep in mind that once you convert a text layer to a smart object you lose the ability to change the text.
  • Now we add the same amount of noise to this layer as we did with the lines. Because the last filter we used was noise, all we have to do is click filter->add noise
  • Next up, we need to put the inner shadow on the 50 layer. Right click on the Lines layer and choose copy layer style. Then right click on the 50 layer and choose paste layer style. This will copy and paste the same layer style properties to the 50.
  • That looks pretty cool, but their are a couple more things we can do. First off, we still have a dirt layer underneath, that we’d like some part of showing through. Let’s put all the layers besides the ‘Dirt’ on their own. Click on the 50 layer, then with the shift key held down click on the grass layer to highlight everything but the dirt layer. On the keyboard hit ‘ctrl, shift, alt, e’. This will place all these layers on top by itself. Rename this layer ‘Field’. Then hide 50, Lines and Grass layers by clicking on the eyeball icons near each one. All that should be showing now is ‘Field’ and ‘Dirt’.
  • Add a layer mask to the ‘Field’ layer, by clicking the mask icon at the bottom of the layers palette.
    Now we will paint on the layer mask to reveal some of the dirt layer underneath. Change the foreground color to black. (Black reveals and white hides).
  • Grab the brush tool again and open up your brushes window. Now click on the small arrow shown below to reveal all your brushes you have. Grab your favorite grunge brush set and click OK. If you don’t have grunge brushes, you can play around with what may work. However, I would suggest you head on over to bittbox, deviantart or brusheezy to find some grunge brushes you can use, they will come in handy often. Then place the brushes into your Photoshop brushes for use, you can learn some more about that and creating your own in this article.
  • Now that you have a grunge brush you like begin painting black on the mask of the ‘Field’ layer to reveal the dirt layer underneath. Subtle dabs here and there work best, don’t overdo it, however if you do, you can always paint white back on the layer mask (which is the joy of using them :))
  • Their is one more thing I did on mine to help the overall feel of a field with lights, and that is a nice lighting effect. Click back to the field layer, not the mask, and click filter->render->lighting effects. The defaults for spotlight aren’t bad, but play around with the sliders and the spotlight thumbnail on the left side. When you like the preview click ok. Below are the settings I used.
  • That’s pretty much it. I finished my field off by playing with the levels to increase the contrast and cropping the image to make it more horizontal. I hope this gives you a good idea of the power of filters in Photoshop. If you come up with an interesting variation, I’d love to see it, send me an email. Below is my finished field.

    • read more

    CSS Tips I Wish I Knew When I First Started

    Leave a reply

    I’ve been working with CSS for quite a while now, and even though it’s relatively easy to learn, there are always new tips and tricks to be found. I’m learning new stuff all the time. I wanted to take a moment to put together this helpful list of CSS tips I wish I knew when I first started. Although many of these tips are common knowledge, I think you’ll find them helpful. At the very least I hope you’ll be nodding your head in agreement.

    Use Overflow: Hidden; to Clear Floats

    It wasn’t until recently that my style sheets were littered with unnecessary clearing floats that looked like the following.

    1 2 3 4 5 6.clear { clear: both; } <div id=”columns”> <div id=”column1″></div> <div id=”column2″></div> <div class=”clear”></div> </div>

    These clearing floats will work perfectly fine, but they are unnecessary. Instead you can just use overflow: hidden; on the parent div to clear the children elements, like in the following example.

    1 2 3 4 5#columns { overflow: hidden; } <div id=”columns”> <div id=”column1″></div> <div id=”column2″></div> </div>

    Group Elements Together

    One of the mantras of good coding 101 is to keep your code as simple and concise as possible. This helps its readability and performance. If you have a couple of elements that are doing the same thing, it’s wise to string them together. So instead of…

    1 2h1 { color: #333; font-weight: bold; } h2 { color: #333; font-weight: bold; }

    You can group these elements like so…

    1h1, h2 { color: #333; font-weight: bold; }

    Comments Are Important

    Many of the sites that I create are 1-man projects. The last thing I want to do when I get into the flow of coding a design is to stop my progress to add some comments. However, when I go back to that code a year later I often have no idea what I was trying to accomplish. By adding logical comments throughout I can give myself very readable reminders about my code. And if, someone else gets the pleasure of looking through it they’ll have a better chance of understanding what I was trying to do.

    Add Some Base Styles to the Body

    This goes back to the code-less principle I discussed earlier. I like to get a nice base of font styles setup right on the body tag rather than redefining font-styles for every element. Here is an example of what I mean…

    1 2 3body { color: #555; font: normal .8em/1.5em helvetica, arial, sans-serif; } <!- Then I can just set weight, and size by percentage -> h2 { font-size: 150%; font-weight: bold; }

    Use Some Kind of CSS Reset

    One of the first difficult lessons that CSS noobs run into is the differences between browsers, especially when it comes to padding and margin styles. The best way to combat these inconsistencies is to start with some kind of CSS reset. There are a ton out there. Perhaps the most popular and the one I start with the most is Eric Meyer’s CSS Reset. Sometimes I just put together my own. At the very least you should use a simple global reset like this…

    1* { margin: 0; padding: 0; }

    Use CSS Shorthand

    This is me preaching about writing as little code as possible again! Why write this much code?

    Our Sugestion Articel for you read
    Big Typography Snowboarding Poster

    1 2 3 4 5p { font-family: verdana, helvetica, sans-serif; font-size: .8em; line-height: 1.5em; margin-bottom: 10px; margin-top: 10px; }

    When you can shorten it to this

    1p { font: normal .8em/1.5em verdana, helvetica, sans-serif; margin: 10px 0; }

    IE Sucks

    This well know fact has been covered more than enough, but I must admit that when I first started I wasn’t sure what all the fuss was about. After spending hours trying to make things look ‘ok’ in IE, you quickly come to realize just how much you loathe this piece. The best advice I can give on this subject is to fight through it, eventually you can tame the beast. Use hacks as little as possible, and in really tough situations target IE specific styles with a conditional statement like this.

    1 2 3<!-[if IE]> <link rel=”stylesheet” href=”ie.css” type=”text/css” /> <![endif]->

    Take Advantage of Progressive Enhancements

    Just because IE sucks doesn’t mean you can’t use technologies like CSS 3 and HTML 5 to add progressive enhancements to your site. So go ahead and add rounded corners in CSS, and box shadows (in moderation please!). And if you really want to get things looking pretty similar in IE here are 10 Ways to Make Internet Explorer Act Like a Modern Browser. Even so, it’s good to keep in mind that your site doesn’t need to look identical (not that it ever will) across every browser.

    Writing Clean Code Makes Me Sleep Better

    This tip goes along the same lines as commenting throughout your code. Writing cleaner code helps with readability for yourself, and for those poor folks who may have to read your code down the road. How exactly to clean up your code however, can get a little nit picky. There is plenty of debate about which way is best, for instance should you use hyphens, underscores or camelCase, others debate over whether to alphabetize or prioritize your properties, still others wrestle over whether to put css on one line or multiple lines. For the record, I use hyphens, alphabetize, and single line, and that’s definitely the right way to do it 🙂

    Big Typography Snowboarding Poster

    Leave a reply

    I’m thrilled to announce this is my second tutorial that is a direct result of someone using the Community Suggestion Box. Here’s what tripdragon suggested…

    I did some research on the awesome posters he linked to and found some more inspiration at sites like vi.sualize.us and flickr. Another cool reference that I found was Typography is Sexy Part I, II and III over at Fuel your Creativity.

    I quickly realized this was a bit of a vague and challenging subject to write about. However, big typography has always inspired me, so making a tutorial on this was something that I welcomed with open arms.

    Here’s How to Create It:

    Step 1
    Create a new document in Photoshop at the size you’d like, I used 1024×1500. Hit ‘d’ on the keyboard to reset your colors to the default black and white. Then hit ‘alt + backspace’ to fill your background layer with black.

    Step 2
    Find a picture that you’d like to use as you main subject. I used the snowboarder below. Your more than welcome to follow along using that as well. Open up that pic in a separate file in Photoshop.

    Step 3
    Now it’s time to extract the snowboarder from the picture. The next few steps are my suggestion for how to extract the snowboarder, however you’re welcome to Playwinn Agen Idn Poker Online Terpercaya use whichever technique you know the best. Grab the pen tool and begin taking the time to extract the snowboarder, although it’s tedious this will ensure crisp results. Within the shape layer that the pen tool is creating, I prefer to drop the opacity to around 15% in order to see my selection better. Go around the entire outside of the snowboarder.

    Step 4
    Make a copy of the background layer by clicking on it, then pressing ‘ctrl + j’. Delete the original background layer and put a blank layer at the bottom, so that your layers look like the ones below.

    Step 5
    Turn the shape you just drew in step 3 into a selection by pressing ‘ctrl + click’ on the shape thumbnail in the layers palette. Then click, ‘ctrl + shift + i’ in order to select the inverse. Lastly, with the snowboarder layer selected (if you followed along ‘background copy’) press ‘ctrl + x’ to cut the background.

    Step 6
    Repeat the same extraction techniques to get rid of the sky showing between the board and his leg. Have both the black canvas and the snowboarder image up. Grab the move tool (shortcut ‘v’ on the keyboard), click and drag the snowboarder onto your poster. Position him like below.

    Step 7
    I wanted the snowboarder to have a graphic, drawn kind of look. I discovered a pretty nice effect just using a couple of filters. First, click Filter->Artistic->Cutout. Change the settings to what is shown in the image below:

    Step 8
    For the second filter I used watercolor. Click Filter->Artistic->Watercolor. Use the image below as a reference for the settings:

    A Little About Color Theory
    I’ve spoke about it before in my Design Inspiration with a Yellow Focus post, but I really enjoy the simplicity and elegance of a one-color theme design. It was because of that inspiration that I decided to keep my colors for this poster simple. Given the eventual poster saying (’Go Big or Go Home’), and the snowboarding culture, I felt the poster lent itself beautifully to a bright, vibrant color. You’d be amazed at just how much our minds associate certain colors with distinct feelings. Cymbolism is a newer site that attempts to learn more about the connection between color and mood. Or to put it in their words:

    Step 9
    With that color theory fresh in our minds lets use a Hue/Saturation adjustment to get the vibrant green that we are going to use throughout our design. Click Image->Adjustments->Hue/Saturation. Check the colorize box and move the sliders to the following settings:

    Step 10
    I wanted the contrast to be even more exaggerated so I adjusted the levels. Click Image->Adjustments->Levels. Change the settings to something like below:

    Step 11
    That looks pretty good for our purposes, however I didn’t like the board being so white and there were some other places worth cleaning up. So make a selection of the board and any other parts you want to fill. Sample a portion of the bright green using the eyedropper tool (shortcut ‘i’ on the keyboard) and fill your selection with that color till you get something like the image below.

    Step 12
    Next up we are going to add a simple glow effect to our snowboarder. Select the snowboarder by ‘ctrl + clicking’ on the thumbnail in the snowboarder layer. Then click ‘Select->Modify->Expand’. Choose 5 px for the amount.

    Step 13
    Add a new layer below the snowboarder, then fill your selection with white. Then click ‘Filter->Blur->Gaussian Blur’. Change the amount to 5.

    Step 14
    Add another new layer below both the snowboarder and the snowboarder glow. Grab some simple grunge brushes. I highly recommend trying out 33 Subtle Grunge Textures and Effects from WeFunction. Using the the same green color drop in some subtle grunge effects behind our snowboarder. Drop the opacity of this layer to around 50%. Here’s what my grunge effect looks like. read more

    5 Reasons to use silverstripe for your next cms

    Leave a reply

    myinkblog - I know from personal experience that when I begin a web project it’s so easy to choose a Content Management System (CMS) that I’m already familiar with. Even more so, it’s easy for me to reach for the popular choice that’s already well established. Many times this reasoning works the best. In the past, I’ve tinkered around with Drupal, Joomla and WordPress, amongst a few others. All of them have their own distinct advantages and disadvantages.

    Recently, I’ve had a chance to give SilverStripe a test drive. While it’s not perfect, it is brilliantly developed and easy to use. In this post I’ll present 5 reasons why SilverStripe may be the best option for your next big project.

    1. The Community

    Simply put, the SilverStripe community is awesome. Every time I have posted a question on the forum it’s been answered within 24 hours. The community is very active and intelligent. Which should ease your mind a little about the relative obscurity and newness of this CMS. By the way, they have been around since 2000 and were developed by a talented group of New Zealanders. They’ve won a host of awards, most recently claiming the 2008 Most Promising Open Source CMS award.

    The entire SilverStripe brand has just been relaunched and divided into two sites. SilverStripe.org is where you’ll find all the open source software you’ll need. And SilverStripe.com hosts the company info. The redesigned forum is now even easier to navigate and find help. Plus, you’ll enjoy good documentation and a frequently updated blog.

    2. An MVC Approach

    SilverStripe is built on the backbone of an object-oriented PHP5 web framework called Sapphire. Their MVC (Model-View-Controller) approach allows you to easily separate code from logic. The out of the box classes in Sapphire provide a sturdy foundation for you to build from. The folks at SilverStripe boast about how flexible the platform is. Using their modular approach it’s easy to understand why. The code that’s already written and the code you will write when extending the CMS is very logical, and easily reusable.

    The SilverStripe template engine is set up deliberately simple in an effort to further emphasize separating logic from design. Using the templates allows you to interact through control loops that are built in and others that you can add by extending your pages. If you are familiar with frameworks like Ruby on Rails you will definitely by in your element.

    3. The CMS is Very Customizable

    Extending the CMS is easy and intuitive thanks to the database relationships you can create between pages and data objects. SilverStripe uses it’s Object-Relational Mapper (ORM) to create database tables based off of the objects you create from simple object oriented PHP 5 syntax. In other words, learn a few basic lines of code and the databases are created for you! Within the CMS it then becomes easy to add tabs and complex table fields. As your knowledge grows, so do your options.

    4. AJAX Style Site Tree

    I absolutely love the site tree that is used within the CMS. The site hierarchy is extremely logical. You can expand and collapse pages in the site tree which makes it quick and simple to find the page you need to edit. Parent/Child relationships are dependent upon where you place your pages and are established when the page is first created. If you change your mind about where a page should reside along the tree, you can move it with a quick drag and drop.

    5. Quick Learning Curve

    Getting up to speed on how to develop a nice SilverStripe website is a relatively quick process. I’m not saying you’ll be an expert overnight, but I’ve found it much quicker that some of the others like Drupal.

    The SilverStripe documentation is laid out well in a Wiki format. There you will find recipes, docs and tutorials. The five basic tutorials is a great place to start