venerdì 18 febbraio 2011

25 Beautiful Minimalist Designs

"Simplify, simplify, simplify."
It's one of Thoreau's most enduring witticisms, and with good reason. When faced with the ever-increasing barrage of information that is modern life, many people find solace in minimalism. This trend has taken an especially strong hold on the Web.
Minimalism and simplification draw attention to important page elements. Using lots and lots of empty space makes content stand out. The overall effect is calming and sophisticated, a welcome break from the typical gauntlet of advertisements and traffic and television and whatever else screams incessantly for your attention.
For your inspiration, here are 25 beautiful minimalist designs. Some are charming, some powerful, some stunning, but they’re all linked by the same idea: simplicity, simplicity, simplicity.

Miguel Ripoll
Miguel Ripoll's homepage, a white background with black serif text of varying sizes

26000 Vodka
26000 Vodka's Natural Grain Spirit page, a hand cupping some grain with a short paragraph of description

Weather Flash
Weather Flash displaying Atlanta's weather. An uncluttered blue background with bubbly icons and basic weather information.

FRKT
FRKT's Website, monochromatic with only one image

Cascading Style S--t
Cascading Style Shit, a plain white background with neatly arranged, visually spare icons that link to various CSS blogs

The Big Word Project
The Big Word Project, a white page containing magnet-art-style words linking to various Websites

WordPress AntiVirus
WordPress AntiVirus homepage, containing a short paragraph of text and a chunky image of the WordPress icon wearing a camouflage hat

For a Beautiful Web
For a Beautiful Web homepage, a brown background with large, white text

Have You Flossed Today?
Flossed Today homepage, a blue and pink background with two icons of a happy tooth and a sad tooth

Tajloro
Tajloro homepage, with a white background, neatly arranged text elements, and a few unintrusive images

jeromeM
JeromeM, an earthy color scheme with minimal visual elements

min-style
min-style homepage, containing minimalist font and one large image

Delicious Design Studio
Delicious Design Studio, with a mulled, pastel color scheme, rectangular page elements, and a solid background

Plush Department
Plush Department, with a white background, chunky pink and black text, and one large image

Troiani Design
Troiani Design homepage, with a faded gradient background, a clean layout, and small images

Get and Give
Get and Give's Care for Kids Farm page is drenched in white space

Black Estate
Black Estate homepage, black background with white text and a black wine bottle shrouded in shadow

The Unexpected Pit Bull
The Unexpected Pit Bull homepage has a sky background fading to white, a faded text nav bar down the left-hand side, and a large image in the middle that shifts between pictures of gentle-looking pit bulls

Go Go Gunner
Go Go Gunner page displaying a large image against a white background and minimal black text navigation

A Woman in the Mirror
A Woman in the Mirror homepage, with a plain background, neatly organized chunks of text, and one simple image of a flower

zupadupa
Zupadupa homepage, consisting of a black background and graceful green and white lines and text navigation

Organic SEO
Organic SEO homepage has earthy colors, an image of a treetop, and neatly organized blocks of text

The How To Stretching Zone
How to Stretch homepage, featuring a built, shirtless man balancing on one hand next to a list of text links to different stretches

Made By On
MadeByOn homepage, black-and-white with a large featured design commanding most of the visual space

Popmatik
Popmatik homepage, featuring an image of a water bottle with a small starburst background and a ton of white space

Website Design & Development

Website Design, Development, and E-Commerce

With my experience in graphic design, website development, and e-commerce programming, you can be confident that whatever your project demands, I can deliver on time and on budget. View the Web Design Process and request a no cost, no obligation Web Design Quote now!
contact me: diego.benna@gmail.com

Here you can see one of my recent work for the study of landscape architecture, panGea: www.pangeaprogetti.it

mercoledì 16 febbraio 2011

Increasing Permgen size in your Web Server

In previous posts , we had talked about Increasing the Heap size of your server
Here will talk about the Permgen space , how it is different from heap size and why just increasing the heap size will not help you in getting rid of this error 
Java.lang.OutOfMemoryError: PermGen space

The permanent generation should not be ignored, because you need enough memory allocated to it to hold all classes in all of your applications including the JSP’s. So if you have an application which uses a good number of third party libraries , has lot of files , you will definitely need a lot of Permgen space. If you are running two applications on the same server , definitely allocate some good chunk of memory to your Perm gen.

How to increase PermGen?

When you add this line in your catalina.bat or catalina.sh

export JAVA_OPTS=-Xms128m -Xmx192m

It only increase heap size. This is how it would look like (assuming your default PermGen is 64MB)

Increasing PermGen on tomcat

PermGen does not change
To increase PermGen , it would be

export JAVA_OPTS=-Xms128m -Xmx192m -XX:MaxPermSize=256m

See how the size of PermGen has increased.

Perm Gen increased

Perm Gen increased
This was done on Tomcat 6.0.14

How to increase heap size in Tomcat 6

Most of us who have worked with Apache-Tomcat in productions systems, would have faced out of memory errors sometimes or other.  It is not that it always happens in tomcat but let us look at why does this occur and how to solve it.

 

Understanding Java Virtual Machine 

A Java Virtual Machine on 32-bit operating systems typically has a maximum heap size of 64Mb. The JVM heap space is where all Java objects are stored, as well as memory used by the garbage collector. Sun recommends increasing this value for server applications.

Large server applications often experience two problems with these defaults. One is slow startup, because the initial heap is small and must be resized over many major collections. A more pressing problem is that the default maximum heap size is unreasonably small for most server applications.
64MB  is the heap size in tomcat as well by default and is too less for real world systems. When your application runs and you are able to analyze the app, this is what you would see

heap size in tomcat
heap size in tomcat 

How to increase the heap size?

On windows :

Go to catalina.bat and set this
set JAVA_OPTS=-Xms128m -Xmx192m

On linux :

export CATALINA_OPTS="-Xms16m -Xmx256m";

-Xms – is the minimum or initial size of your heap
-Xmx – is the maximim size

export JAVA_OPTS="-Xms128m -Xmx256m";

On linux , you can also set in setenv.shin the bin folder. The catalina.sh script has logic to call into this script.

Note that CATALINA_OPTS is a better place than JAVA_OPTS. The former is only used when actually starting the Tomcat instance. JAVA_OPTS is also used to start JVMs that only interact with Tomcat (for example the JVM instance that is used to send the shutdown-message to a running Tomcat instance).

You can have a look at this article High Performance in Tomcat. Although this article is pretty old (dates back to Tomcat 4) , it still has lot of good points.
Once you have set the heap , how to check heap size ?

How to check heap size in linux

The output of jmap -heap <pid>.
Some more information can be found here http://wiki.apache.org/tomcat/OutOfMemory

sabato 12 febbraio 2011

Round Web 2.0 Button with a Metal Ring, Glass effect

round web 2.0 button with metal ring preview
In this Gimp tutorial we will create a round web 2.0 button/icon with a metal ring around it. This button is very handy for download icons and such, and it can easily be customized, especially with gradients.
FINAL IMAGE PREVIEW
This is what we’re going to create, we will also look at some variations of the button afterwards.
Final image preview
Step 1
Create a new image with a white background. I made mine 600×400.
Now create a new layer and name it “ring”.
Use the Ellipse Select Tool to create a circle that measures 250×250.
250x250 selection
Step 2
Set your FG and BG color to a dark gray (333333) and white (ffffff).
Use the Blend Tool to create a gradient from the top of the selection to the bottom of it.
The gradient should be Reversed, the shape set to Radial, the Offset should be set to 20, and Adaptive Supersampling should be enabled.
Gradient settings
The offset simply makes it so that we get more white on the top of the button, while Adaptive Supersampling makes it smoother. Our image should look like this now:
Selection with radial gradient
Step 3
Shrink the selection by 25px. (Select->Shrink)
Shrink selection by 25
Use the Blend Tool to create a gradient from the bottom of the selection to the top of it.
Use the same settings as last time.
Gradient inside the other gradient
Step 4
Create a new layer and name it “sphere”. Shrink the selection by 5px (Select->Shrink), then fill the selection with a blue color (216eda) using the Bucket Fill tool.
Sphere layer
Now set your FG color to cyan (4feeff).
Create a radial gradient a little bit above the bottom of the selection and approximately 120px up.
The Gradient should be set to FG to Transparent, it should not be reversed, set the Offset to 20, and make sure Adaptive Supersampling is disabled.
Gradient settings
That should give us this result:
Cyan gradient added
Step 5
Set your FG color to white (ffffff). We’re going to use the Paintbrush tool to add a little white at the bottom of the button.
Set the opacity of the brush to 70%, use a large fuzzy brush (Circle Fuzzy 19) and set the scale to 10.
Position the brush so that half of it is inside the selection, then click just once with the mouse.
Adding white with fuzzy brush
That should give us a gentle touch of white like this:
Gentel touch of white
Step 6
We’re going to create an inner shadow, to do this we first need to create a new layer and name it “inner shadow”.
Now grow the selection by 1px. Select->Grow.
Grow selection by 1
Then we fill the selection with black (000000) using the Bucket Fill tool.
Next go to Select->Feather.
Feather the selection by 20.
Feather by 20
Now hit the Delete button on the keyboard.
Also, we don’t need the selection anymore so get rid of it by going to Select->None.
After deleting
Next, duplicate the layer so that the inner shadow becomes stronger.
Duplicate the inner shadow layer
Step 7
Create a new layer and name it “gloss”.
Create a selection where you want the gloss to be.
Gloss selection
Set your FG color to white (ffffff).
Create a gradient from the top of the selection to the bottom of it.
The Gradient should be set to FG to Transparent, the Shape to linear, Offset to 0.
Gloss gradient
Now reduce the opacity of the gloss layer to 75 so that it blends in more smoothly with the rest of the button.
Reduce opacity to 75
Step 8
Time to add some text, select a font you like and write something on the button, these kinds of buttons are very good for adding short words like GO! or a symbol such as a downwards arrow for a download button.
I simply added the letter Z. The font is Verdana Bold size 100.
text settings
Next we give the text an outline.
To do that go to Filters->Light and Shadow->Drop shadow.
Set Offset X and Offset Y to 0.
Drop shadow settings
That should give us a nice dark outline around the text like this:
Z with dark outline
Step 9
Almost done know, we just need to give the whole button an outline, and soften it a little.
Select the layer named “ring”, and then give it a drop shadow with the same settings as we used on the text.
Add dropshadow to the ring layer
Now we need to soften the button a little bit just where the inner shadow meets the metal ring.
We have two layers with inner shadow, so we need to merge them into one. In the Layer Dialog, select the top layer with inner shadow, right-click and choose Merge Down.
Next we’re going to give the inner shadow layer a Gaussian blur of 2. (Filters->Blur->Gaussian Blur)
Gaussian blur the inner shadow
That’s it, the button is done:
Round Web 2.0 Button with a Metal Ring
Variations
It’s also very easy to make variations of this button by using gradients instead of all that
blue and cyan we made in step 4 and step 5.
Here is the button with the gradient called Deep Sea, the gradient was created
from the bottom of the selection and 450px up.
Round Web 2.0 Metal Ring button deep sea gradient
Here is the same gradient from the top of the selection to almost the bottom of it, and with the gloss shaped differently.
Round Web 2.0 Metal Ring button
Here it is with the gradient Incandescent from the top of the selection to the bottom of it.
Round Web 2.0 Metal Ring button Incandescent gradient
That’s it, it’s the end of the tutorial, tell us what you think in the comments.