Archive for the ‘Photoshop’ Category

How to create a clean and design portfolio layout using Photoshop

Tutorial Photoshop - Layout Template and webdesign

Step 1 – Create a new document

To start the creation you need of course to create a new document, go to File> New (Ctrl/Cmd + N) and edit the name (Template in my example), change the canvas width (980px) and height (1000px).

Tutorial Photoshop - Layout Template and webdesign

Step 2 – Create the background

Change the foreground colour to dark brown (#38332f) and go to Edit> Fill or hit Shift + F5. The layer “Background” is insistently filled in brown.

Tutorial Photoshop - Layout Template and webdesign

Step 3 – Create the guides

Go to View> Show> Guides (or use the shortcut Ctrl/Cmd + ;) , and create a new horizontal guide on 80th pixels, to do it go to View> New guide> select horizontal, enter 80px and hit Ok. Do it again to create a horizontal guide on each pixel: 30, 40, 80, 310, 320, 330, 350, 570, 770 and 780. And now do it again with the vertical guides: 50, 330, 350, 630, 650, 660, 920, and to finish 930.

Tutorial Photoshop - Layout Template and webdesign

Step 4 – Create the header

Create a new group and name it “header”. Select with the Rectangular marquee tool (M) the top of the canvas (height 80px). Create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “header bg”, now use the white colour to fill in the selection.

Step 5 – Fill in the header

Now you’re going to add a gradient into the header, go to Layer> Layer style> Gradient overlay and configure the colour: grey to light grey.

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

Step 6 – Add the logotype

To create the logotype you have to start with the creation of a new group (name it “logotype”) then create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “cube” On this layer create a cube (use the Rectangular marquee tool (M) to do it, don’t forget to hit the Shift to keep a good proportion) fill it with a gradient (use the layer styles).

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

Use the Type tool to add a big 2 above the cube, drop it on the bottom right corner. Then, right-click on layer “2” and select Rasterize type. To finish, go to Layer> Layer style> Inner shadow and use the settings from the following image for Inner Shadow.

Tutorial Photoshop - Layout Template and webdesign

And to finish the logotype, use once again the Type tool to add the title (for your information I used the Kabel font in this example).

Tutorial Photoshop - Layout Template and webdesign

Step 7 – Create the menu

Begin the menu to create a new group (go to Layer> New> Group) and name it “Menu” then select the Rounded Rectangle Tool (U), set the radius to 50px and create a rounded rectangle on the top side on the right of the lofotype. Use the guides to help.

Tutorial Photoshop - Layout Template and webdesign

Rename the layer “menu bg” and design it with a gradient and a stroke (use the layer styles to add them). Go to Layer> Layer style> Gradient overlay and use the settings from the following images.

Tutorial Photoshop - Layout Template and webdesign

Use the Type tool to add the links.

Tutorial Photoshop - Layout Template and webdesign

Right-click on the layer “menu bg” and select duplicate the layer. To create the hover effect on the menu you’re going to change the colour of the first link to red (just change the layer styles on the menu bg copy layer)!

Tutorial Photoshop - Layout Template and webdesign

Now right-click on the layer “menu bg copy” and select Rasterize layer and cut the right side. Then change the colour of the first link to the white.

Tutorial Photoshop - Layout Template and webdesign

And to finish add a drop shadow on the layer “menu bg”, use the settings from the following image.

Tutorial Photoshop - Layout Template and webdesign

And to finish the menu you must create a separation between the links. To do it create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “separation”, use the Rectangular marquee tool (M) to create a selection from the top to the bottom. This separation is made with a first grey line (#c2c2c2) and a second white line (#fff). Take a look at the following image for reference.

Tutorial Photoshop - Layout Template and webdesign

And duplicate the layer separation time to time.

Tutorial Photoshop - Layout Template and webdesign

Step 8 – Create the carousel

Create a new group (go to Layer> New> Group) and name it “Carousel”. In this group create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “Carousel bg”. Then use the Rectangular marquee tool (M) to create a rectangular selection of 280×300px on the right side of your document. Change the foreground colour to the white and go to Edit> Fill.

Create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “shadow”, now change the foreground colour by the black and hit Ctrl/Cmd + D. Go now to Filter> Blur> Gaussian blur (5px). To finish reduce the opacity to 20%.

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

Create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “picture”, go to Select> Modify> contract and enter 10 px and hit Ok. Then fill in the selection with a dark grey.

Step 9 – New header

Create a new group and name it “header 2”. Select the Rectangle Tool (U) and create a brown rectangle beneath the top header. Use the Type tool (T) to add a little description.

Tutorial Photoshop - Layout Template and webdesign

Add the button*

Tutorial Photoshop - Layout Template and webdesign

Select the Rectangle Tool (U) and create a lighted brown rectangle beneath the header 2. Add an inner shadow (go to Layer> Layer Style> Inner shadow) into this rectangle, using the settings from the following image.

Tutorial Photoshop - Layout Template and webdesign

Add a little text with the type tool (T).

Step 10 – The content

Create a new main group and name it “Content”, create directly three new groups inside and name them “bloc1”, “bloc2” and “bloc3”.

Select the Rectangle Tool (U) and create a white rectangle.

Use the Type tool (T) to add the first title and a description. Drop it in “bloc1”.

Tutorial Photoshop - Layout Template and webdesign

Download this icons pack from here: http://www.tutorial9.net/resources/nixus-icon-pack-60-beautiful-premium-icons-free/ and import an icon in your bloc1.

Tutorial Photoshop - Layout Template and webdesign

And do these last steps two more times to fill in the bloc 2 and 3.

Tutorial Photoshop - Layout Template and webdesign

Step 11 – Testimonial

Create a new group and name it “Testimonial”, in this group create a new layer and name it “testimonial bg”.

Using the Rectangular marquee tool (M) select the bottom side of the white rectangle. Then fill it in with light grey #e5e5e5.

Tutorial Photoshop - Layout Template and webdesign

Create a new layer and name it “stroke”, move to the top the selection of 2px and fill in the selection with the same grey, now move it down to 1px and hit Delete.

Tutorial Photoshop - Layout Template and webdesign

Using the Type tool (T) add a title and a description.

Tutorial Photoshop - Layout Template and webdesign

And duplicate the button* (already created in the header) and drop it to the right of the title.

Tutorial Photoshop - Layout Template and webdesign

And to finish, add the picture** of the customer on the left of the message.

Tutorial Photoshop - Layout Template and webdesign

Step 12 – The footer

The tutorial is soon finished : ) you have to create the footer and it will be done!

So, create a new main group (go to Layer> New> Group) and name it “Footer”, in this group create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “dark stroke”. Using the Rectangular marquee tool (M) create a selection of 5px beneath the testimonial area. Change the foreground colour to the dark brown (#171513) and fill in the selection.

Tutorial Photoshop - Layout Template and webdesign

Select the three layers of the titles on the content area and right click and select duplicate the layers. Drag and drop them on the footer group and move these titles in the footer. Switch the colour to light grey (#e5e5e5).

Tutorial Photoshop - Layout Template and webdesign

Use the Type tool (T) to add a list beneath the first title on the footer.

Tutorial Photoshop - Layout Template and webdesign

Using the Custom shape tool (U) create a little arrow before the link in the list. Add a drop shadow, go to Layer> Layer style> Drop shadow, using the settings from the following image.

Tutorial Photoshop - Layout Template and webdesign

Duplicate the arrow and put one of them before each link.

Bring together all layers of the first bloc in the footer in a new group (bloc1). Create two news groups and name them “bloc2” and “bloc3”. Duplicate the list (text and arrow) and put one of them on the bloc2 and the other in the bloc3.

Facultative step, in the bloc1 you can delete the list to add a little form. To create the form use the Rounded rectangle tool (U) with a radius of 10px. I used the colour: light grey # e5e5e5 and red #e83116. Use the Type tool (T) to add the label and Send in the red button.

Tutorial Photoshop - Layout Template and webdesign

Step 13 – Copyright

And to finish this tutorial create the last group on the group “footer” and name it “copyright”. Use the Rectangular marquee tool (M) to select the bottom of your document, create a new layer (Layer> New> Layer) and fill in this selection with this colour: # 47413c, move down the selection to 1px and fill in it again with this other colour: #171513.

Create a new layer and use the foreground > transparent gradient (Gradient tool) to create a gradient on the top of the copyright area (use the black #000000).

Use the type tool to add a little copyright (on the left) and duplicate the logo and drop the copy to the bottom right side.

Tutorial Photoshop - Layout Template and webdesign

Further information

Watch the following images to know how to create the button:

Tutorial Photoshop - Layout Template and webdesign

Watch the following images to know how to create the picture in the testimonial area:

Tutorial Photoshop - Layout Template and webdesign

If you need some information regarding the process to create the button or the picture, please, let me know it in the comments.

Final result

click here to download the psd file

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

So, thank you very much to you for reading my Photoshop tutorial and if you enjoy this post, this template and this blog, please, follow us up on RSS or Twitter I see you later by another 2expertsdesign.com tutorial!

15 Fresh Quality Adobe Photoshop Tutorials

photoshop tutorials

Visit Tutorial

Frayed Denim Patch With Stitches

photoshop tutorials

Visit Tutorial

Text In Stitches

photoshop tutorials

Visit Tutorial

How to Create a Somber Composition in Photoshop

photoshop tutorials

Visit Tutorial

How to Create a Fun, Red-Haired Boy Character

photoshop tutorials

Visit Tutorial

Create a Professional Web 2.0 Layout

photoshop tutorials

Visit Tutorial

Create a Shiny Earth with Photoshop 3D Layers

photoshop tutorials

Visit Tutorial

Design a Surreal Desert Scene in Photoshop

photoshop tutorials

Visit Tutorial

Dance Photo Manipulation Part 1

photoshop tutorials

Visit Tutorial

Dazzling Dance Photo Manipulation

photoshop tutorials

Visit Tutorial

Making a Grungy Business Card

photoshop tutorials

Visit Tutorial

Create a Cute Cartoon Beast

photoshop tutorials

Visit Tutorial

Create a NFL Style Advertisement in Photoshop

Visit Tutorial

Designing a war movie poster

photoshop tutorials

Visit Tutorial

150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques

Web Interface Design Tutorials

Create a Magic Night Themed Web Design from Scratch in Photoshop

Web Design from Scratch in Photoshop

How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

Simple Layout Can Be Mixed ‘n’ Matched with Patterns

Create a Vibrant Modern Blog Design in Photoshop

Create a Vibrant Modern Blog Design in Photoshop

Tutorial Site Blog Design

Tutorial Site Blog Design

Website Gallery Layout Design

Website Gallery Layout Design

Design Studio Layout

Design Studio Layout

Design Lab TV Styled Layout

Design Studio Layout

Chocolate Pro WordPress Style Layout

Chocolate Pro WordPress Style Layout

Design a Web Template using the 960 Grid System

Design a Web Template using the 960 Grid System

List of 100s of other resources to Website Interface Design Tutorials

40+ Greatest Web Interface Design Photoshop Tutorials

40+ Greatest Web Interface Design Photoshop Tutorials

The 60 Best Photoshop Tutorials to Design Your Own Amazing Site

The 60 Best Photoshop Tutorials

27 Web Layout Design in Photoshop Tutorials

27 Best Photoshop Web Layout Design Tutorials

Convert Photoshop Layout from PSD 2 XHTML Tutorials

Encoding a Photoshop Mockup into XHTML & CSS

Encoding a Photoshop Mockup into XHTML & CSS

List of 13 More Photoshop Layout from PSD 2 XHTML Tutorials

13 Tutorials for PSD to XHTML Conversion

PSD to XHTML Conversion

Tool For: CSS Development With FireBug Tutorial

Quick & Easy CSS Development with Firebug

Quick & Easy CSS Development with Firebug

How to do a glossy and animated jQuery button 1/2 Photoshop part

How to create a guide on Photoshop?

Really easy, for example, to create a vertical guide on the left of your canvas, click on the left ruler and drop it on the left border! Then, you can move it (every time) click on the guide with the Move tool (V) and move it where you want!

5 Tips To Make Modern Web 2.0 Buttons, Text, Badges & More In Photoshop CS4

In this Photoshop tutorial, I am going to walk you through 5 different tips which I think define standard “Web 2.0” design principles. The tutorial will walk you through the creation of several website buttons, badges, glossy spheres, and finally the classic technique of reflections.  Please let us know what you think of our Web 2.0 buttons Photoshop tutorial and thanks for stopping by.

Tip #1:Gradients Are the Key To Web 2.0 Buttons

In my opinion, it is impossible to create web 2.0 style buttons without using gradients.  Gradients are one of the defining characteristics of web 2.0 design style.  So for our first tip, I’m going to explore a couple of the standard gradient techniques that produce web 2.0 buttons.   Remember, feel free to use your own color scheme, the colors provided are not set in stone, and are open to experimentation.

First, let’s create a new document.  I’m going to make mine 1500px X 1500px, but that’s only because I am going to create all 5 web 2.0 Photoshop tips in one PSD file.

After you’ve created your document, we’re going to work with the Rounded Rectangle Tool, since rounded corners are another staple of web 2.0 design.

After selecting the Rounded Rectangle Tool, we’re going to set our Radius in the toolbar to 15px.

Now that we’ve set the Radius of our rounded corners, let’s go to our canvas and create our first button.  My foreground color is a light blue, meaning the button I am creating is going to be light blue.  You should make sure you change your color to light blue as well before creating the button.

When the button has been created, we’re going to be working with the Blending Options of that layer.  This is an area we are going to visit frequently throughout all 5 Web 2.0 Photoshop tips.  To access a layer’s Blending Options, simply pull up the Layer’s bar, then right click on the layer you wish to blend and select Blending Options from the menu.

Once we’re inside the Blending Options for our button, it’s time to apply a gradient.  We do this by clicking the check box that says: “Gradient Overlay”.  On the right side of the Blending Options window, you should see the following Gradient Overlay settings screen.  Let’s set the opacity to 50%

With our opacity set, let’s modify the gradient itself to meet our needs.  To edit a gradient, click directly on the Gradient picture inside the Gradient Overlay settings box .  Now click just outside the gradient picture directly in the center, at the bottom edge.  This will create a new color in the gradient.  Set it to light blue, and adjust until your settings look similar to this:

Now that our new gradient applied, the last thing we need to do to finish our first Web 2.0 button is to put a Stroke (which is a line surrounding the object.)  Let’s make the stroke size 2px and leave the color as black.

Since our first button is created and out of the way, let’s create a new shape to illustrate another gradient method common in Web 2.0 style buttons.  Create a new rounded rectangle below your first button, and color it light green.

Now just like with our last button, let’s open up this layer’s Blending Options, apply a Gradient Overlay, edit the gradient, and create the following settings, noting the diamond on the bottom right side is set to 5%.

Moving on, let’s create a 3rd button.  This button will continue with the progress we’ve made on the last two buttons, but we’ll add an Inner Glow blending effect, which is another common Web 2.0 Photoshop trick.  We’ll make this button orange, and use the following gradient to start it out

To create an Inner Glow, simply check the Inner Glow checkbox.  Change the color to a light orange/pink and change the Blend Mode to Screen.

Here’s a preview of how your button should look with these settings:

Let’s create a final button to illustrate Web 2.0 gradients in Photoshop.  Remember that these four basic gradient types can be reused over and over again using different color schemes.  That’s really the point of this first Photoshop tutorial, to give you the four basic gradients used in Web 2.0 design.  Our final gradient is very common, being very standard.  What makes it appealing is the fact that the start color is very similar to the end color, meaning it’s a milder gradient than most.  Here’s the gradients settings:

With all 4 of our standard web 2.0 gradients done, here’s what our Photoshop canvas looks like:

Tip #2: Adding Stripes for More Web 2.0 Goodness

Our first tip was about gradients, which I said is one of the most defining characteristics of Web 2.0 Photoshop design.  However, stripes are perhaps the 2nd most defining Web 2.0 style, so let’s talk about creating them and implementing them with our previous buttons.

To do that, first let’s create a new document with square dimensions.  My canvas is 500×500 pixels.

Next, let’s create a new Rectangle, using the Rectangle Tool.  We’re going to create a big line across the center of our canvas.  This line will serve as our stripe pattern.

Once you’ve created your rectangle, hit CTRL+T or goto Edit > Transform > Rotate to rotate the rectangle.  We want to position it exactly in the middle, so that when we create a repeating pattern from this picture, it lines up perfectly.

Next we’re going to need to put two copies of our rectangle on the top left and bottom right respectively, again so that we make this a pattern, it will repeat seamlessly.  To do that, I am going to create 4 guides.  To create guides, first make sure that the Ruler is visible (goto View and make sure there is a checkmark next to Rulers) and also insure that guides are visible (goto View > Show and make sure Guides are checked off.)  After  you’re sure that guides and the Ruler are displayed, the way you create a new guide is to click and drag from the ruler, to your document, like so:

You’ll notice that my four guides are setup to tell me where the current rectangle goes off screen.  This is because we’ll need to put two copies of the rectangle onto our canvas as I mentioned earlier.   Right click on your Rectangle layer and click Duplicate Layer.  Repeat.  Now drag them into position as indicated in the screenshot below.  Once both duplicated layers are position correctly, goto the Layer menu and select Flatten Image.

Now that the image has been flattened, it’s time to make our pattern.  We do that by selecting the entire canvas (CTRL + A)  With the entire canvas selected, goto Edit > Define Pattern…  and name your pattern.

With our custom stripe pattern defined, we’re ready to add them to our previous buttons from earlier.  Select all the layers of your buttons and right click, select Duplicate Layers.  Now choose the Move Tool and drag the newly duplicated buttons to the right of the originals.   To apply the pattern, right click on the Rounded Rectangle layer of your button, choose Blending Options, then check the box next to Pattern Overlay.  Find your pattern in the drop down pattern selection screen, and change your opacity to 6%.

Here’s what our buttons look like now with the stripes applied.  As you can see, they are very “Web 2.0” looking at this point.

Tip #3: Web
2.0 Badges Are Still Sexy

Despite the Web 2.0 design trends having been around for years, they are still modern and not at all out of style.  Badges are another staple of this design paradigm, so let’s explore how to quickly create one.  To start out, let’s use the Custom Shape tool.

Let’s create a layer with our custom shape:

We should color it light yellow, manila almost.  Remember, you can use whatever color scheme you want.

Let’s add a Stroke to our badge, size 3, with a darker orange.

Next, we’re going to add an Inner Shadow, use these settings:

Next, we’re going to add a Web 2.0 glossy look to our badge.  To do that, first let’s duplicate our custom shape layer.  After that, right click on the duplicated layer, click on “Convert to Smart Object” then right click again and select “Rasterize Layer”.

Now select the Elliptical Marquee Tool, we’re going to use it to delete most of our duplicated layer.

Select the bottom right of our duplicated layer as pictured below.  Once you’ve done that, goto the Select menu and then click Inverse.

Now hit the DELETE button on your keyboard.  Your layer should look like this:

Let’s make this layer stand out now by tweaking it’s Blending Options.  We’re going to add a Gradient Overlay with the following settings:

With the gradient applied, it’s time to move onto an Outer Glow. We’re going to overboard with this and make the size of the glow 92px.

Finally, let’s change the opacity of the entire layer to 56%

Add some text that says Beta and we’re done:

Tip #4: Glossy Spheres Are Easy to Make & Look Great

Like badges, glossy spheres are common but look great. We’re going to make one by using the Ellipse Tool and making an orange circle (hold shift down while creating your ellipse to make a perfect circle.)  Once your circle is created, let’s add an Inner Shadow.  Use these settings, paying attention to the size at 59px:

Next we’re going to add a Gradient Overlay with these settings:

Now for an Inner Glow:

With the foundation done, we can now work on the glossy effect.  To do that, we’re going to add a new layer with the Ellipse Tool. This time, we’re going to make an oval, as pictured:

To make the oval align correctly with our underlying circle, let’s use the Warp tool to move the top of the oval slightly.  The Warp tool is available from Edit > Transform > Warp

We’re going to add a Gradient Overlay to this layer now, to give it the look of a glossy shine.  Use these settings, noting the angle:

]

Let’s duplicate that oval layer.  Once duplicated, immediately right click on the layer, choose Convert to Smart Object, and then right click on the layer again and choose Rasterize.  Once rasterized, hit CTRL + T and invert the oval as picture below.  Move it the bottom and resize it so that it is much smaller than the original:

Now decrease the opacity to 47% and add your text to finish the glossy button!

Here’s the final results:

Tip #5: Last But Not Least, Reflections!

What roundup of Web 2.0 tips would be complete without a tutorial on creating reflections?  Seriously, along with stripes, gradients, and badges, nothing says “Web 2.0” like an image with a reflection.  So let’s grab a duplicate of one of our buttons from earlier, and give it a reflection. We’ll also add an arrow that tells web users what to click on… namely your button!

Once you’ve duplicated one of your buttons from earlier, let’s use the Customer Shape Tool and select an arrow:

Dragging it over our button, we end up with something like this:

Since this is web 2.0 design, I’m going to style the arrow with a gradient… go figure.

Now to make a reflection, I am going to duplicate everything I wish to reflect.  Once they are duplicated I am going to select all the reflection layers together at the same time, and then right click and select Convert to Smart Object, then right click on the newly created smart object layer and select Rasterize.  With the layer rasterized, I will hit CTRL + T to transform the layer, and will again invert it by dragging down the top center box until I get a screen that looks like this:

Now to line up the reflections:

We want the reflection to look angled, and will use Edit > Transform > Distort to accomplish this.

This is how we want our distort transformation to look:

Let’s delete anything that overlaps.  We’ll select it then hit the DELETE key.

In order to simulate a reflection, we’ll use a standard black and white gradient over the reflection layer, only changing one of the positions as indicated below:

Since our background is white, we will use Lighten on our gradient.

Finally, we turn down the opacity of the entire layer to 37%, giving us the following final image:

So there you have it!  Five web 2.0 tips that are still useful even after all these years.  Have questions, comments, or concerns.  Let us know, we’d love to hear from you.  Thanks for reading and have a great life!

45 Photoshop Tutorials for Better Navigation

Stunning Vista inspired menu from PSDTuts

stunning vista inspired menu

Slick blue navigation menu from SigTutorials

Slick blue navigation menu

Glossy navigation bar from Core GFX

Glossy navigation

Quick glass buttons from Bits O’ NewMedia

Quick glass buttons

Basic sleek button from psFreak.com

Basic sleek button

Sleek buttons from OriginMaker

Sleek buttons

Vista styled button from psFreak

Vista styled button

Shiny green button from psFreak

Shiny green button

Sleek glossy blue button from AnotherTutorialSite

Sleek glossy blue button

Stylish button from OriginMaker

Stylish button

Glowing buttons from OriginMaker

Glowing buttons

Stylish blue button from Photoshop-Tutorials.us

Stylish blue button

Shiny orange button from TutorialSubmitter

Shiny orange button

Unique blue button from OriginMaker

Unique blue button

Stylish black nav bar from Dicat.us

Stylish black nav bar

Vista buttons using styles only from The Not Simple Solution

Vista buttons using styles only

Black Vista style button from Great Design

Black vista style button

XP style navigation from Tutorial Guide

XP style navigation

Glossy navigation menu from Gamexe.net

glossy navigation menu

Glossy style carbon fibre navigation from Photshop Star

glossy style carbon fibre navigation

Professional glossy buttons from Photoshop Star

professional glossy buttons

Simple glossy navigation buttons from Photoshop Star

simple glossy buttons

Image sprite navigation using CSS from Style Meltdown

Image sprites navigation

Orb button effect from Boonage

Orb button

Clean and dark navigation bar from Aviva Directory

Clean and dark navigation

Nice, clean vertical menu from bwebi.com

Vertical menu

Flexible buttons using Photoshop shapes and styles from Veerle

Flexible buttons

Web 2.0 style buttons from Iris Design

Web 2.0 style buttons

Vista style nav bar from Aviva Directory

Vista style nav bar

Web 2.0 buttons from BlogWatts

Web 2.0 buttons

XBox360 style nav bar from EvoGFX

XBox style nav

Simple and clean menu bar from Photoshop Pack

Simple and clean menu

Glass type navigation bar from Pixel Digest

Glass type navigation

Tabbed navigation menu from UPUP Media

Tabbed nav menu

Vertical navigation menu from EvoGFX

Vertical menu

Plastic navigation bar from Tutorial Park

Plastic navigation bar

Blue button from Toxic Lab

Blue button

Glossy web 2.0 buttons from Aviva Directory

Glossy button

Pixel style navigation box from Aviva Directory

Pixel style navigation

Red “order now” button from Caged Flame

order now

Aqua button from Pragt.net

Aqua button

Mac button from Pragt.net

Mac button

Duotone vertical menu from Pegaweb

Duotone vertical

Glass button from Depiction.net

Glass button

Simple web button from 3by9

Simple web button

Professional dark button from Aviva Directory

Professional dark button

10 Online Photoshop Alternatives For Simple Photo Editing

Title-collection-of-useful-web-based-image-editorsThere are very few circumstances in which you have to work on other computer that doesn’t have Photoshop installed. What to do in such a moment? The easiest way is to visit one of these 10 websites, which are quite closely related to Photoshop. Not all features are always available, but the simplest will remain.

I would like to say that a very big plus is a fact that these sites practically do not use your computer memory, so you can always be sure that none of your images will disappear. And you don’t have to worry about getting your computer crashed if you have slow one 🙂

1. Pixlr

Pixlr is a perfect online image editing application that is designed for non professional users and allows them to easily edit images. It combines image design and paint tools with photo editing and adjustment features more convincingly than any other online image editing program.

Major features:

  • Create an image or open one from your hard drive or a URL
  • Save your image to your desktop
  • Undo/Redo
  • Resize an image
  • Rotate an image
  • Use layers – something not heard of with other online image editors
  • Change the brightness, contrast, hue and saturation of the image
  • Apply different effects to the photo

pixlr-collection-of-useful-web-based-image-editors

pixlr-1-collection-of-useful-web-based-image-editors

2. Sumo Paint

Sumo Paint is an online image editing application similar to Adobe Photoshop.

Major features:

  • Layers with blending modes
  • Layer Effects
  • Shape Tools, Brush, Ink, Clone Stamp, Eraser, Gradient, Custom Shape, Symmetry, Transform, Magic Wand, Lasso, Smudge, Line, Blur, Curve, Zoom Tool
  • Color Picker
  • Swatches
  • Saving images with multiple layers
  • Selection Modify

sumo-paint-collection-of-useful-web-based-image-editors

sumo-paint-1-collection-of-useful-web-based-image-editors

3. Splashup

Splashup is a powerful editing tool and photo manager. With the features professionals use and novices want, it’s easy to use, works in real-time and allows you to edit many images at once. Splashup runs in all browsers, integrates seamlessly with top photo-sharing sites, and even has its own file format so you can save your work in progress.

Major features:

  • Online graphic editor
  • Take pictures directly from a web cam
  • Tool bar that almost matches Photoshop or Gimp
  • Similar interface to most desktop graphic applications
  • Sharing features to share images and photos with friends

splashup-collection-of-useful-web-based-image-editors

splashup-1-collection-of-useful-web-based-image-editors

4. PicMagick

PicMagick is an online photo editor that enables you to make ordinary photos look wonderful within a few clicks. It will surprise you how fabulous your photos can be and how easily this can be done.

Major features:

  • Designed to be simple and intuitive
  • Enhance colors and details of your photos
  • Expose hidden details in shadows and highlights
  • Professional yet simple skin retouch
  • Remove red-eyes or unwanted color casts
  • All common tasks: crop, rotate, sharpen, etc.
  • Absolutely free, no registration, no download

pic-magick-collection-of-useful-web-based-image-editors

pic-magick-1-collection-of-useful-web-based-image-editors

5. Photoshop.com

Photoshop.com is the complete solution for managing, editing, storing, and sharing your photos online, with tutorials, inspiration, and more. Photoshop.com is available from any web-enabled computer, compatible mobile phones, and directly from within Adobe Photoshop Elements 7 or Adobe Premiere Elements 7 software. With Photoshop.com, you can organize, tweak, create, e-mail, display, and store your photos.

Major features:

  • Personal URL to access your account
  • Online private and public sharing
  • Tutorials
  • Online photo management, editing, and interactive photo galleries
  • Browser-based upload and download
  • Anywhere access to your photos and videos from Photoshop Elements 7 and Adobe Premiere Elements 7, including syncing and backup from your desktop to the web
  • Mobile access
  • 2 GB of online storage space
  • The Plus version adds special artwork, album templates, and effects, and 20 GB or 100 GB of online storage.

photoshop-collection-of-useful-web-based-image-editors

photoshop-1-collection-of-useful-web-based-image-editors

6. Pixer.us

pixer.us lets you manipulate, edit, enhance and apply filters to your digital pictures using only your web browser.

Major features:

  • Simple lightweight photo editor.
  • Perform most common image editing functions like resize, crop, rotate, flip, saturation, blur, sharpen etc.
  • Instantly apply and preview the effects using the slide bar.
  • Revert changes to previous or to the original image version.
  • Upload, edit and save images without registration.
  • Save edited images in multiple image formats (JPEG, GIF, PNG or BMP).

pixer-us-collection-of-useful-web-based-image-editors

pixer-us-1-collection-of-useful-web-based-image-editors

7. Phoenix

Edit photographs with this online photo and graphics editing tool, which does much more than adjust brightness or remove red-eye. Aviary’s purpose is to “make creation accessible to artists of all genres,” including graphics and even audio editing. Phoenix is only one of many editors

Major features:

  • Peacock – for creating patterns
  • Toucan – color swatches and palettes creation
  • Raven – a vector art editor
  • Hummingbird – create 3D Models and skins
  • Myna – audio editor
  • Roc – music generator
  • Horus – font editor
  • Tern – terrain generator
  • Pigeon – a painting simulator
  • Owl – desktop publishing layout editor
  • Woodpecker – image resizer

phoenix-collection-of-useful-web-based-image-editors

phoenix-1-collection-of-useful-web-based-image-editors

8. Picnik

Picnik makes your photos fabulous with easy to use yet powerful editing tools. Tweak to your heart’s content, then get creative with oodles of effects, fonts, shapes, and frames.
It’s fast, easy, and fun.

Major features:

  • Fix your photos in just one click
  • Use advanced controls to fine-tune your results
  • Crop, resize, and rotate in real-time
  • Tons of special effects, from artsy to fun
  • Astoundingly fast, right in your browser
  • Awesome fonts and top-quality type tool
  • Basketfuls of shapes from hand-picked designers
  • Works on Mac, Windows, and Linux
  • No download required, nothing to install

picnik-collection-of-useful-web-based-image-editors

picnik-1-collection-of-useful-web-based-image-editors

9. Snipshot

Snipshot is a fast online image editor. You can use it right from your browser, no downloads or Flash required.

Major features:

  • Use Snipshot with Open IT Online—the best way to open any kind of document
  • Our free API lets you use Snipshot for your own website
  • No download necessary—100% browser based, no plug-ins required
  • One-click import from any web site with our bookmarklet
  • Save as GIF, JPG, PDF, or PNG
  • One-click enhance improves most images
  • Basic editing tools like crop, rotate, resize
  • Basic image adjustments like contrast, brightness, saturation, sharpness and hue
  • Unlimited undo and redo (Ctrl+Z and Ctrl+Y, or ?Z and ?Y on your Mac)
  • Nondestructive editing—we always work from the original
  • Edit big pictures—up to 10 MB, or 25 megapixels (5000×5000 pixels)
  • Import PDF (first page only)

snipshot-collection-of-useful-web-based-image-editors

snipshot-1-collection-of-useful-web-based-image-editors

10. Flauntr

Lots of one-click options to edit your digital photos instantly.

Major features:

  • Defined tabs with unique tools and features for photo and image editing, photo and image styling, text and embellishments and others
  • One-step batch uploads and gallery creation
  • Instant export to cell phones and PDA devices with visual make/model search engine
  • Built-in store where prints, posters, wall decals and greeting cards can be ordered directly; no need to be directed to another website

flauntr-collection-of-useful-web-based-image-editors

flauntr-1-collection-of-useful-web-based-image-editors

Source:  www.1stwebdesigner.com