Archive for the ‘Web Design’ Category
Recently Adobe introduced some additional tools to the layers palette that have proven to be a huge progression. The tools are not entirely new but the way in which they are used is slightly different and way more robust for several reasons.
Lets say you wanted to adjust the color saturation of an image in your layout. Traditionally you would select your image layer then select your effect from the filter menu. Once you were satisfied with your adjustment you would then carry on with your design business.
However that maneuver was done in a way that isolates your effects into a step within your actions history. The only way to go back and change those effects would be to step back using undo, which inherently undoes all the steps you made along the way. Also, once you hit save those steps are history pal.
Here is where layer styles do the same thing but in a much more robust way. In that same scenario, rather than using the pull down filter menu, use the layer styles tool at the base of your layers panel. It opens an almost identical set of tools as the filter menu. The difference here is the effects apply on an object level directly to your layer. There is no timeline associated with these effects. Essentially you can add an unlimited number of effects to your layers which you can then toggle, adjust, and tune without any need to undo your steps.
What this does is give you design flexibility and complete control over your canvas. all of the elements in your design are available at the same time and you can adjust them individually and independently of any timeline. What a huge improvement. Additionally if a client wants to make changes three months down the road – if you’ve used layer styles you will surely be in a stronger position to accommodate the client than if you hadn’t.
For these reasons you should always choose layer styles over filters.
Posted on Apr 1, 2010 by Tommy to Web Design
Ok, so something I’ve seen a decent amount of website owners really going for these days are shiny gold text effects. The problem is that most of them end up looking a little too gaudy or just really poor quality.
So what I’ve got for you today is a tutorial on how you can create a professional, realistic gold text in Photoshop. Here are the steps (and there’s a video below).
Step 1: Open Photoshop 
Step 2: Type your name (or desired text) and use the following specifications: Georgia, Bold, #666666 (this is the hex code for web-based colors, it turns out to be the gray you see here). By the way the font size I use in this demonstration is 138 point.
Step 3: Open up the Layer Options Dialog box by double-clicking the text layer of the text you desire to make gold.
Step 4: Now the first thing you want to do is add a Drop Shadow. So, click the “Drop Shadow” option in the Layer Styles dialog box. Now make your settings exactly like the settings in the picture below:
Step 5: Now it is time to add an Inner Shadow. Click the “Inner Shadow” option in the Layer Styles dialog box and set the settings exactly as you see in the picture below (the yellow color is #ffcc33):
Step 6: Now it is time to add a gradient overlay. First, you need to click the “Gradient Overlay” option in the Layer Styles dialog box. Now look below the “Opacity” slider and you will see where it says “Gradient” with a color bar next to it. Click that color bar to open the Gradient Editor which looks like this:
To achieve the golden gradient you see in the color bar above, use the following settings:
#cc9966 location 0%
#cc9966 location 14%
#ffcc99 location 33%
#ff9966 location 50%
#ffff99 location 64%
#ffcc66 location 82%
#ffffcc location 99%
Now, click “OK”.
We’re still on Step 6, because now you need to make sure the “Gradient Overlay” settings are exactly as you see it in the following picture:
Step 7: Now, we need to add a stroke. So, click the “Stroke” option in your Layer Styles dialog box. Make sure that the settings are exactly the same as the following picture. Please note the FILL TYPE should be changed to Gradient, then open the Gradient editor and use the following settings:
#ffffcc location 1%
#cc9966 location 16%
#996633 location 27%
#ffcc99 location 45%
#ffffcc location 60%
#cc6666 location 91%
#ffffcc location 100%
Step 8: Congrats! You now have Gold Text! Save the settings so you don’t have to redo this every time you want some gold text effects.
Thanks for checking out this photoshop gold text tutorial and I’ll talk to you soon!
Tommy
Tags: gold text, photoshop gold text tutorial, photoshop tutorials
Businesses are increasingly realizing that building a successful website is essential to their existence. Apart from selling, building a good website can create a platform for spreading awareness and gaining recognition. Thus, following website building tips, such as having a user-friendly design and proper optimization, can spell success for organizations.
Read the rest of this entry »
Tags: building a good website, building a successful website, website building tips
I recently read an article that introduced a new concept called attention maps. An attention map is basically a list of goals for a page that basically assigns a point value of importance to sections of a website then distributes those areas onto a page. The most important areas are larger and also fill up more dominant sections while less important areas get pushed down and/or to the right.
From a designers perspective, this is something that is often done without the use of a map. Generally, you put the navigation up top then bring in a fantastic photo and put a catchy slogan in there followed by a link to convert the viewer into a buyer. Pretty simple formula that has proven to be effective.
However, what if you client has multiple areas of expertise and they are struggling internally to decide which areas carry more importance than others? Maybe the board of directors needs a tool or diagram that demonstrates how a reorganization of priorities may look? This is where an attention map comes into play.
First establish a point value for all goals.
Example point distribution:
-20 points allocated among four goals
Example result:
* product photo and description : 10 points
* features : 6 points
* Other products: 2 points
* News: 2 points
Translated into design this is what would happen. the 10 point item is obviously front and center taking up the majority of the page. The features could fall to the right of this product section since it holds a value of 6. The other items: Other Products and News would fit in below. This is an effective distribution of space that should translate into a good webpage.
In another scenario, the client puts a value of 4 on his main product but then spreads the rest of the 16 points evenly across 8 items. This breakdown divides his page into small parcels which will translate into a boxey and innefective design.
In a nutshell the Attention Map can be a useful way to map out the screen real estate. Additionally, its a great way to show your client that there is logic involved. To create an effective website it takes more than just good design. An effective website is a combination of great design and logic.
These days, companies pour an incredible amount of money into designing, redesigning, and improving their websites. The problem with laying down a sacrosanct list of web design tips is that website beauty and even functionality is in the eye of the beholder.
Read the rest of this entry »
Tags: web design tips
Selecting appropriate web site color is critical, as it increases readability, makes the navigation clearer and spurs emotions that may impact the popularity of a site. A study commissioned by RightNow Technologies and conducted by YouGov Plc in end 2007 indicates that trouble in searching for information related to products and delivery frustrates consumers, resulting in them abandoning the shopping cart.
Read the rest of this entry »
Tags: Page Layout, site color scheme, website color, website color theme
Posted on Jun 8, 2009 by Rich to Technology Trends, Web Design
So I have been reading lately on the evolution of web development and how it will affect our culture as a whole. I have seen many blogs and articles state that mobile development will grow substantially. I totally agree with this item. Most websites now have evolved into thinking of mobile website presentation as an important part of their design and development. Some may argue in having a separate presentation for your mobile edition like yoursite.com/mobile or m.yoursite.com others might argue that something like “Progressive Enhancement” might be the solution. While others still might have their own reasons for doing what they do. I personally feel like there is no right answer. The biggest question to me is something that plagues us as developers and designers on the regular computer browsers. That is cross-browser compatibility. For example, I went from a sidekick slide to a G1 and now to the iPhone. Each phone supports different functionality and such. which makes it very difficult to have the mobile edition look the same across all phones. Yikes!
Another thing I have read about lately has been on the “I hope IE 6 Dies” mentality. While me as a Developer would truly hope so, we might not have that even in 2012. With the prices of these systems, licensing costs, lack of IT manpower or whatever else could be impeding the upgrade of computer systems in larger corporations we might still have to deal with this disease.
Frameworks Frameworks Frameworks. Developers have their preference. Some might tell you to learn all, some might say stick to one. At the end of the day, I can see them integrating concepts together to form the ultimate framework like voltron.js
I would talk about HTML5 and CSS3, but why. If not all browsers support it, then we are back to 2009.
Tags: CSS, CSS3, Dojo, HTML5, jQuery, Progressive Enhancement, Prototype
Web design trends for 2009 seem to hint that, while advancements on certain fronts will give way to novel designs, many of the old favorites will be back in fashion.
Read the rest of this entry »
Tags: new trends in web design, Page Layout, trends in web design, web design trends
There is a popular commercial on television for a company that claims to “move at the speed of business.” As anyone who owns a small business can tell you, time truly is money, and sometimes, it helps to have a system for web design that cuts down on the mistakes and maximizes the number of people you can reach with your site. The 960 Grid System is named for the web design idea of having 960 lines per web page.
Read the rest of this entry »
Tags: 960 grid, CSS, Page Layout, web design
The Mega Menu is becoming a successful tool for the websites of today.
The usual drop down menu has now been improved upon. Many web developers have fought tooth and nail to avoid having to code a drop down menu. It was also a question of whether or not drop down menus were just trends. A new bigger and better drop down menu has started to pick up popularity. The Mega Menu is standing up to the web developers and is becoming a successful tool for the websites of today.
The Mega Menu is Big, has two-dimensional drop-down panels that are grouped into navigation options, they eliminate scrolling and use typography, icons, and tool tips to explain the user’s choices.
Mega Menus group and organize navigational options. They are easy to read and help the design and flow of the site. Mega Menus display everything and by helping the user find more, it will help the site sell more. The Navigation choices are structured through the layout, typography and icons. It renders fast, which is an important component for the interface.
There are a few downsides to the Mega Menu. First, they cover up a lot of content when you roll over the button so if you accidentally roll over one, the content you were looking at disappears under the menu. If you have a small monitor the text on the Mega Menu could get jumbled and overlap, making it non-functional.
The Mega Menu has more Pros than cons. Done right this new menu can guide users to exactly what they are looking for.
Below are examples of some places where the Mega Menu has been successful.
The Mega Menu was introduced in the 2007 Microsoft Word Program.
Vertical mega drop-down from Target.com
Vertical mega drop-down from foodnetwork.com
The Mega drop downs are better than Regular Drop Down Menus:
It has always been suggested to use Drop down menus sparingly. This is because they can be confusing from a usability standpoint and are usually more trouble than they’re worth.
A few good things about the Regular drop down menus is they conserve screen space and help the user with selections they may not know. Simple drop down menus are functional and recognizable by any user.
The Ugly
The following are types of drop down menus that can ruin your site flow and annoy your user. Interacting menus, users get confused when options come and go. Very long menus. Menus of state abbreviations, write out the entire state name. This goes for Dates as well, January looks so much better than Jan. Menus of data well known to users, such as the month and year of their birth. Users are hard wired to type in when they were born, they don’t need to see a menu of years. Lastly, Scrolling menus should not be used because the user isn’t able to see all of the information.
The following tutorials may help you in developing a Mega Menu for your next site. If you find any other tutorials on this please participate in this blog and post them.
Make a Mega Drop-Down Menu with jQuery
Get the jQuery listmenu plugin
It creates a top level alphabetical navigation menu from a plain old UL, LI or any set of html nodes. Has good options for specifying how many columns in the dropdown, was created with css-styling in mind, etc.
Tags: website architecture
Making flowplayer.swf files play in IE where gzip is enabled
Ipad 2, get ready
THAT Agency launches hotel website for Iron Horse Hotel
2010 Social Media Statistics
THAT Agency designs and develops website for Club Safari
THAT Agency launches Scozia Insurance
NYJTL partners with THAT Agency for new website
THAT Agency launches WhyWeight
Online B2B Advertising with LinkedIn DirectAds
A Quick Way to Measure the SEO Value of Press Releases
Kat : Thanks so much. Great little s
cili : When having images and text, t
Jean Has Been Shopping : I figured it out. In style.cs
Jean Has Been Shopping : Love this theme, and all of th
egollas : How can I change the slide up
Liberty wrestling : You know, I wish there had bee
Lovers : This is good stuff...right her
hunter : I am so lazy sometimes, althou
Rick : You've not had success with us
Dorothy : Love the theme. But can't figu
-
Newsletter Signup
-
Find Us On...
