| Photoshop Tutorials » Web » Blog |
Finally, the Web 2.0 Blog Layout is here as promised! Several new techniques are covered in this tutorial, such as interesting use of the drop shadow element. We'll also cover creating a see-through navigation bar, as well as creating our own unique icons for this layout!
A while back I did a group discussion asking about how many of you blogged. If you missed that discussion, you can check it out here, Do you blog? It seems that everyone has some sort of a blog going. Some use it to promote their business, while other just do it for fun. Regardless of why you blog, I decided to showcase everyone that participated in the discussion. There are a few really good ones in here. You may end up subscribing to some more blogs! http://www.blogthememachine.com/
ALBERTO SEVESO is a illustrator/Graphic Designer from Italy, his works speaks for himself, Particularly Alberto's?? illustration works on the photographs are just amazing, I'm very much inspired by his works and hope you will be
I agree with Simon SC, the North Star Fund brochure is amazing. Brochures can be one of the most taxing things to design. To come out with results like this, you can tell that the designers really had some love for the project.
I do think it would benefit your article if you provided examples of the original pieces of design which have inspired those above. Some of us weren't around for the first iteration. Also it would strengthen the argument if you provided alternative examples of modern print design rather than a single designer as you have done with the websites.
In a new layer draw a large white rounded rectangle just below your website name. This will be the body of the template. Then under Layer Style (Layer > Layer Style) add a Stroke blending option.
Let's begin work on the heading part of our body. Add a simple title to your article, and throw a solid bottom border below it (Use the same color as the right column.). Then put your typical blog posting information on the bottom-right side of the heading.
That wraps up our creative fliers series. I've got some exciting things planned for this blog in '09, so stay tuned. Have a Merry Christmas and a wonderful New Year!
This entry was posted on Monday, October 20th, 2008 at 1:56 pm and is filed under Inspiration, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
We all have our favorites - from Pantone colors to stylistic approaches to fonts. Designers are at their best when they like the elements they are designing with. Find out what fonts these 8 designers love and why - AND see them in use!
What Products I Used I have been working on a redesign for Outlaw Design Blog for a while now in my spare time. The current layout and design just isn't doing it for me anymore. Anyways, I decided I wanted a combination of the hand drawn look, a nice bit of grunge, and some bold color and textures. Because this is right up Go Medias alley, I decided to see what they had going on.
� 2008-09 PSDVIBE. All Rights Reserved. All tutorials are property of PSDVIBE and may not be redistributed without the written consent of PSDVIBE
There are many other things, but these simple idea's can come together to create a stunning picture. Chapter 1: A good picture is sometimes emphasised by its contrast, here we have 3 examples of what I mean:
Select the same layer again, and while it????????s selected, click the background layer. Go to Select -> Modify -> Expand and expand with 20 pixels. Adjust levels again by pressing CTRL + L and put 1.25 in the middle box. Now you should have this:
In this tutorial I will be teaching you how to make a blog entry box for your blog web site like the one below, using Adobe Photoshop.
Next we are going to cut out your new car layer to match the original car. (note: I prefer the polygon lasso tool but you can use the pen or magic wand tool.)
Now we are going to add some light to our �Push pin�. Make a layer on top each of these layers: �Top�, �Body�, and �Bottom�. Now name each one �Light 1?, �Light 2?, and �Light 3?. Your layer's palette should look like this:
Now that you have your two images, let's begin. Start by dragging and positioning the pattern image into the shoe document, like below:
In this tutorial I will show you how to begin with vectors. The easiest way in my opinion is tracing anime/cartoons. I will trace Gogeta from Dragon Ball Z.
There are a thousand beauty retouching tutorials out there, but just because someone writes a tutorial, it doesn???t mean that they necessarily teach you something good. I have recently browsed through a list of 40 beauty retouching tutorials in a long article at PSDTuts and I was astonished by the amount of nonsense published there. Now, don???t get me wrong, I love PSDTuts, they have great tutorials, but this particular article was low standard. It???s enough to look to the preview images to see how amateurish the Photoshop effects are.?? The good tutorials ??? I could easily count on one hand. Therefore I decided to make a list of the most common misconceptions and amateurish techniques in beauty retouching. And their cure. Maybe this will help reduce the amount of plastic face spread all over the internet (and not only).
You can also find on the web ready-to-use actions that you can use to speed up your work. We have offered one in our Download gallery. It???s an action that I use all the time when I cut out objects for a comp because it saves me a great deal of time. You can also run actions directly from Bridge, on a large number of images. Select your images and then choose: Tools > Photoshop > Batch. A great tool for running complex actions. Choose the action you want to run and go make yourself a cup of coffee. When you???re back, the job is done.
Title: Create a web 2.0 style icon or web graphics for the blog website. Design using photoshop tricks a web 2.0 style icon or a comment box image/web graphics for the blog website or a comment box image.
[...] en blog.qbrushes un tutorial para hacer el header de tu blog utilizando los brushes en Photoshop, en realidad es la forma más sencilla que he visto para hacer un header creativo y preciso, si no [...]
With this tutorial I am going to show you a way to draw a simple Christmas holly like this one using Adobe Photoshop.
This entry was posted on Tuesday, November 22nd, 2005 at 4:28 am and is filed under Effects, Photoshop, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
This tutorial explains a simple way of creating a fitness related logo using mostly shapes. The final result of this Photoshop tutorial can be seen below.
With this tutorial I am going to show you a way to create a nice glowing planet (sphere) effect. Here is an example 1. Start by creating a new document 40*40 pixels. Get the Paint bucket tool and fill it with a light blue color. Then with the Elliptical Marquee tool and select a perfet circle (hold down Shift while selecting) at the center of your document and fill it with white. You should now have an image like this.
This entry was posted on Monday, June 5th, 2006 at 1:42 pm and is filed under Miscellaneous, Photoshop, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Let's start 1) Open the photo you want to sharpen and make sure you are viewing it at 100% 2) Duplicate the background layer by hitting Ctrl+J or just go to Layer-> Duplicate Layer 3) Now it's time to apply the High Pass filter at the duplicate layer. Go to Filter-> Other -> High Pass. I usually use a radius somewhere between 9 and 12. In this case I used a radius of 11.5
I know that lately I've been blogging a lot about� well blogging actually. However, I'm interested in covering as many topics as possible that are relevant and helpful to the design/webmaster community. This tutorial will be the first of hopefully many completely original photoshop tutorials that show some of my personal techniques for designing.
This tutorial will focus on how to showcase your images in a far more impressive and attractive way. For this example I've used the Push Standards logo, but you can really use it with anything - icons, product boxes, website thumbnails etc� You will impress your clients and visitors far more than simply posting a regular boring image. Next time you launch a new competition on your blog, or announce a new product, why not really make it stand out!
[...] This will be our first tutorial on the subject of re-touching a photograph in photoshop. We will be working on a photo of a model and using a few techniques to smooth and even out the skin.read more | digg story [...]
[...] » Photo Retouching - Teeth Whitening Photoshop Tutorial Tutorial Blog - » Photo Retouching - Teeth Whitening Photoshop Tutorial. [...]
Now open the pattern in photoshop, select it and cut and paste into your header psd, ctrl + click on the pattern layer to select it, like so :
Enrico - you could go from dark hair to light hair by using the same method, mask out the hair then desaturate it, use hue saturation and light to lighten the hair right up, then colorize it to blonde. I may do a tutorial on this method aswell.
This tutorial will show you how to create some realistic lightning using photoshop's rendering capabilities, to make it look like someone has lightning shooting from their hands.
[...] » Create a software box Photoshop Tutorial The Tutorial Blog Interesting tutorial on building a fake software box in Photoshop (tags: photoshop box software download) [...]
Creating visually interesting blog designs is an art. And as far as creating art goes, it can be both a very frustrating and rewarding experience. Staring at an empty white canvas can be intimidating, especially if you don't know where to start or you don't have any inspiration. At this point, it is very tempting to do nothing and procrastinate. Then weeks will go by and nothing happens. It sucks, but that blog design isn't going to create itself. If you are reading this, then that means you are at least motivated since that takes effort. I mean if you were mindlessly surfing youtube like some probably are right now (I know I have in the past) you won't be any closer to getting that awesome blog design done.
it would also help to show us how you go about changing your colors when doing the overlays. I do realize that you assume a basic familiarity with photoshop, but there may be noobs who want to start blog designing, and because they cant seem to follow quite well you just lost 1 visitor right there.
Hola Diego, me parece que este es de los mejores tutoriales del blog, es super util lo que explicaste y queda muy bien! Saludos�
Hola diego, como estas? Soy nuevo en esto de photoshop y tengo el mismo problema que arriba tuvo marcela y Gio. A la hora de presionar Ctrl para seleccionar las particulas no se selecciona nada y no puedo lograr terminar el efecto. Tengo Adobe Photoshop 10 CS3 en español. Gracias.
[...] Bronceado perfecto en Photoshop, un tutorial interesante, de esos a los que nos tiene acostumbrados el gran Diego Mattei. [...]
-Now select layer1 and put your brush in the middle of the 'image' and click 1 time. You can also adjust your opacity or brush to your wishes.
The Lucisart plugin has been quite popular and still emerges daily on photos pushing the hdr-effect look beyond its boundaries.It's a very handy plugin in order to recover detail from your images.
Bram from Sweetbeat.be tells you how he got the rainbow in the photo above using photoshop : - Open new document 20�20cm. - Make a new layer and select it. - Select the pen tool en draw a bowed line.Make sure when you have the pen tool selected to have the paths icon selected and not shape layers or fill pixels
2. You need an image for the thumbnail. You can use any image you like - you may use the one this example uses. Whatever image you decide you use you need to get it into Photoshop. Save the file you need to use to your local hard drive and then choose File > Open. Find the image and you want to use and click Open.
This entry was posted by Tim on Tuesday, August 7th, 2007 at 2:35 pm and is filed under Photoshop, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
This entry was posted by Tim on Friday, October 10th, 2008 at 3:17 pm and is filed under Photoshop, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
6. Now it's time to create the frosted glass effect; we'll start with some lense blur. Choose Filter > Blur > Lense Blur. Choose your settings thus:
33. This is one �strength� done. You will need a series of strengths. To do this you should move the Pointer layer closer to the right each time, refill the Strength Base layer with a different colour, change the text and carry out steps 31 and 32 on the Strength Base layer. You should create several versions like this:
Wow! 30 seconds - that\'s terrific! Normally it would take me up to a day or more to really do a proper job of slicing and cropping a .PSD and converting it by hand to HTML/CSS code (I\'m sure that the ImageReady code is equal to any HTML/CSS I could write myself - cross-browser compliant, valid, etc.). You\'re really saving me a great deal of time with your insightful blog post Jean-Jacque! I wonder if I can still charge my clients for 8 hours?
Maybe another tutorial (for dummies like me ) of how to create a depth-map using 4d-Cinema (starting with a photo), to be used later for fake DOF with photoshop would be nice
This part I of a Website Header and Navigation tutorial has been rewritten as of 7/14/08, to make the header and navigation coding a little easier to follow.
Now that we have our 3 variations on different layer comps, we are ready to make our slideshow. The good news is, this is made tremendously easy through one of Photoshop's scripts. Click File-Scripts-Layer Comps to PDF. Choose a destination to save the file to, that is easy for you to remember. I almost always save things to the desktop first, and then file things later. Just makes my workflow simplier. You can play with the duration of the images and if you want the show to loop. When you have the settings in order, click Run.
FREE BLOG TEMPLATES BlogSkins offers designs from the best of the blogging community. Blogger Templates offers original skins to personalize your blog. Blog Fashions offers an assortment of attractive blog templates. Elated Page Kits has some really nice blog templates with PSD files. Layout Gala offers over 40 free CSS templates.. FREE BLOG BACKGROUNDS, TILES & PATTERNS CitrusMoon offers a wide assortment of pretty tiles and backgrounds. SquidFingers has a big selection of beautiful patterns. For more free patterns and textures visit our Free Backgrounds page. BLOG OVERVIEW - DEFINITION OF A BLOG Wikipedia - You'll find a good amount of info about blogs here, with a short description of the different types of weblogs, which include Personal, Thoughtful, FriendBlog, Topical, News, Collaborative, Political, Legal, Directory, Media, Corporate, Advice, Religious, Audio, Photography, and Video. Lots and lots of links on this page. BLOG PUBLISHING TOOLS Blogger - Free, automated weblog publishing tool that sends updates to a site via FTP. Good for beginners. Create an account, name your blog, and choose from predesigned templates or design your own template. Put your blog on your web host or use Blogger.com's free hosting service, Blogspot.com. LiveJournal - LiveJournal is an easy but powerful and customizable personal publishing tool, built on open source software. Joining the site is free. Users can choose to upgrade their accounts for extra features. Movable Type - Movable Type is a weblog publishing platform for businesses, organizations, developers, and web designers. Has powerful customization options, and a simple and clear interface. WordPress - WordPress is a personal blog publishing platform with a focus on web standards and usability. Free. TypePad - TypePad is an easy-to-use blogging service for both beginners and professionals. Offers a 30-day free trial. BLOG SOFTWARE - COMPARISON CHART Online Journalism Review - compares the standard features of popular blogging tools. BLOG SOFTWARE - REVIEWS Forbes - Best Of The Web - Blog Tools - short reviews of sites that offer the best tools for setting up and managing a blog. BLOGGING JARGON & TERMS USC Annenberg - offers a short glossary of blog technology (scroll down the page). List of blogging terms Blogging terms from Wikipedia - this is a list of blogging terms. Blogging, like any hobby, has developed something of a specialised vocabulary. The list is an attempt to explain a few of the more common phr...
Of course your settings can be different from mine, but this gives you a pretty good example how to solve a overexposed image. Here you can see the �before and after�. The contrast is much better and there is more color information.
(Learn how to create a navigation button bar for a website In this lesson you will take a picture of a web browser screen to use as a template, then make a navigation bar for your website.)
In this Photoshop tutorial you will learn how to create a professional-looking web adbanner for a domain registration website. As seen below:
Firstly, thanks for visiting YourPhotoshopSource! In this easy, step-by-step Photoshop tutorial I'm going to be showing you how to design some nice, wooden tabs (navigation buttons) for your website. Similar to the ones shown in the below image:
Design Logix is a specialist digital media agency, committed to delivering effective and measurable online solutions to every client. Being Specialists in Web development and e-marketing strategies we aim to drive your business forward using creative thinking and the latest online technologies.
Contour: Use this option to specify how the glow effect transitions from opaque at the layer boundary (or at the center of the layer content if using an Inner Glow with the Center setting) to transparent at the edge of the glow. Pick a contour from the Contour box, and the glow follows that contour, working from the layer boundary (or center) on the right to the edge of the blur on the left. The higher the point on the curve, the more opaque the result. Choose from a preset contour by clicking the downward-pointing arrow next to the box, or create your own contour by clicking the graph in the box.
Now we may give to this part of the ornament a special perspective: Edit>Transform>Perspective by combining preliminary these two layers: Layer>Merge Down (ctrl+e).
Some things to take note of when working with layer style effects and the Layer Style dialog: - Layer styles cannot be applied to the Background layer. - Layer styles can be applied to only a single selected layer at a time???not to multiple selected layers or to layer groups. - Layer styles are attached to the layer. Therefore, when you move the layer in the Layers palette, the effects tag along. - Type layers remain editable even after a layer style effect is applied. - Layer styles can be copied from one layer to another. - Adobe Photoshop displays applied Layer style effects as items in the Layers palette. - Clicking the eye icon next to each effect???s name in the Layers palette temporarily disables the layer style. Click the eye next to the word Effects to temporarily disable all the applied layer styles for that layer. - Lowering the Fill percentage in the Layers palette reduces the Opacity of the layer, but not the applied Layer styles. - The Global Light option in the Layer Style dialog box tells Adobe Photoshop to apply the same angle to all direction-dependent effects, such as Drop Shadow, Inner Shadow, and Bevel And Emboss. The idea here is to simulate consistent real-world lighting. - Combinations of layer style effects can be saved for later use in the Styles palette.
Step 14. For the further actions it is necessary for us to keep work in a format jpg, and then to open by Photoshop. Let's change Brightness and Contrast (through the menu Image - Adjustments - Brightness/Contrasts) of the collage as it is shown on the picture.
Step 17. We start with the Arch. For the beginning it is necessary to find a photo of the suitable size and quality. We'll insert it on a new layer.
The second very important step is to ???pick up??? the palette of colors for work. I have chosen a few shades of light pink, to paint distant petals, and a few shades of rose - for lateral. On the palette are shown basic colors, but for coloring I used more shades which are somewhere between them.
You can use associated keyboard shortcut to quickly select a tool without having to always use the Tools palette to select the tool you wish to use. For example, pressing B on the keyboard will activate the Brush Tool in the Tools palette. Where more than one tool shares the same keyboard shortcut, you can cycle through these other tools by holding down the Shift key as you press the keyboard shortcut. If you prefer to restore the old behavior whereby repeated pressing of the key would cycle the tool selection, go to the Adobe Photoshop CS3 menu, select Preferences > General and deselect the Use Shift Key for Tool Switch option. You can also Alt-click the tool icon in the Tools palette to cycle through the grouped tools.
On this occasion we are introducing a new section on the Ardis website ??? the Download section, which will, in time, be packed with all sorts of goodies for your designing needs. And best of all ??? they???re free to use in any project you wish, commercial or not! For starters, have yourself some brushes, a few styles and actions. But don???t forget to bookmark the page because soon you can expect more Photoshop goodies, an image gallery with photographs that you can use to practice our tutorials, or even in your projects, and a section dedicated to code snippets, CSS goodies and Flash magic.
Start building your own libraries of custom brushes, patterns and shapes. This tutorial will guide you through the steps to create re-usable presets from your artwork.
So in this article I'll show you how to create 2 types of brushes that can be used to create the grunge effect. Like always this is just one way of doing things as I'm sure there are others also. In a next tutorial I'll explain another way to create a similar effect in Photoshop if you just want borders. A brush is better because you can apply it everywhere and it gives you more creative freedom then the other technique.
Step 3: Open any image that we want to apply the drawing effect (File >Open > Select An Image). I happened to chose a image of Bill Gates. You can use the same image if you like below.
[...] http://tutorialblog.org/photoshop-magnifying-glass-tutorial This entry was posted on Jueves, Abril 26th, 2007 at 12:22 pm. You can follow any responses to [...]
This entry was posted by Tim on Wednesday, June 13th, 2007 at 11:50 am and is filed under Photoshop, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
In this tutorial, we're going to create a nice abstract fractured text effect. This effect works best on bold fonts at large sizes, as illustrated below, but could be applied to a variety of texts and shapes to create some interesting looks. I'm going to make my text blue, but you can use any color you like. Start by creating a new document with a black background and enter your text in white.
In this tutorial, we're going to create the text effect seen on the new Battlestar Galactical logo (check out the website at www.sci-fi.com/battlestar for an example).
This is the home, playground and blog of Ryan Coughlin - a 20 year old web and graphic designer from Maine. One stop shop for home brewed: illustrator, jquery, ajax, and coding articles.
With this tutorial I am going to show you how you can create custom unique text from the fonts you already have installed at your computer. This technique is very useful especially for the design of logos or signatures. Start by creating a new document any size. Select the Horizontal Type Tool and type your text. For this tutorial I have simply typed �text�.
Then add a black background, and the text you want - A fat text like the one I use gives the best effect:
This entry was posted on Friday, December 23rd, 2005 at 1:44 pm and is filed under Photoshop, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
When its white right click the layer and go to Blending Options.
This is our starter image :
Create a new document, and then make a new layer (call it �bar�. Now grab the rectangular marquee tool and create a selection the length of your nav bar and 25px in height. Fill it with the color of your choice. I'm using #9e005d.
In this Adobe Photoshop tutorial, I will teach you how to make the living appear to be undead. Freaky! Eh?
1. Open the image, you can check your level (optional)
Create a layer above the base layer, use the Rectangular Marquee Tool and select an area the width of a single menu item. Fill that layer and lower the Fill to 0%.
2. Make a text.
1.Create a psd file, the size of mine is width 590, height 705; 2.Fill in the background layer with some very light grey color, for ex: #edecec; 3.Use Filter �> Noise �> Add Noise with an amount 2%; 4.Then I took «burn tool» and made some burning at the bottom of the layer;
La creación de la luna es muy sencilla en este caso. Básicamente necesitaremos dos cÃrculos blancos. Uno irá con blur gaussiano y el otro no. Asi que creamos una nueva capa llamada �luz de luna�. El ella dibujamos un cÃrculo blanco (la forma mas rápida de hacerlo es con la herramienta de selección elÃptica y luego volcar blanco dentro con el bote de pintura).
Next, let’s use the Rounded Rectangle tool to create our browser’s main window. We’ll use a grey color overlay, as well as 1 px black stroke and an inner glow set to white:
That's it .
Este será el efecto que intentaremos lograr:
The starting image:
PIXELART saved as Gif 64 colors = 8.976 kb
First, Download the first image here we'll be using for this tutorial. Open it in your photoshop program (File>Open).
We got the result.
Screencasts and video blogging is coming more and more increasingly popular nowadays so thought id write up a tutorial on how to make a nice simplistic layout. Right lets get started, create a new document 900 x 1200 pixels. Double click your background layer to unlock its locked state, then add this simple gradient overlay.
Please click in the image to see it
1. Generales: Veamos en imágenes y luego explicamos.
I’ve obviously already got my pictures selected. You’ll want to organize them on your document in a way that makes sense for a comic book:
In order to achieve a natural sewing effect, we will apply a few settings through the Photoshop Brush Engine:-
Next we'll add some layer effects to the type. You can choose layer styles from the fx menu at the bottom of the Layers palette, or as I've done here simply double click at the far right, in the blank area, of the type layer in the Layer's palette. In the Layer Style dialog I've chosen Drop Shadow, and left the default Drop Shadow settings. Then I chose Bevel and Emboss, and chose Outer Bevel from the drop down menu. The effects preview as they are chosen, but once we are done with the next steps it's easy to double click in the Layers palette again to bring up the Layer Styles dialog to make changes. When satisfied with the effects click �OK� to dismiss the dialog. Create a Clipping Mask with a duplicate of the Background Now we need a duplicate of the Background layer that we can move upstairs to the top of the Layers palette, in order to use it, along with the type layer, to create a Clipping Mask from the type's shape.
Compact and lightweight, this medium-telephoto has 18°50? picture angle that is equivalent to a focal length of 127.5mm in Nikon FX- and 35mm-format cameras.
In this Photoshop tutorial I would like to walk you through the designing of a creative, paper-crumpled Blog/website footer area like the one shown here:
Create a New file in Photoshop with 600 x 600 resolution and transparent background. Draw a shape of a PDA using the Pen Tool as shown in the picture and convert it into a selection by clicking on the shape using right button of the mouse and select Make Selection. Now color it with light grey color. Your final picture should be similar to the picture shown below.
Preview full size layout
To start off, we need to create three duplicates of our background layer, so hit Ctrl+J 3 times. Go back to the Layers palette and name these layers, from the top one down, �line,� �shape,� and �texture.� Now click on the eye next to the thumbnail for the �shape� and �line� layers to hide them.
In this tutorial you will learn how to create a 468�60 ad banner shown below:
To start with, we?ll need a not so great photo. I?m ashamed to admit it, but I took this photo of my friend?s drooling baby a little while ago. The lighting was poor to start with, the space was cramped so I had to use a wider angle lens than I?d wanted to, and the little guy just wouldn?t be still.
2.You should know have a path set out, now fill it with a darker color of your choice. As you can see, we chose a darker-light-blue to fill ours with since we intend on the bar being light blue. You can fill your path by going to the paths tab, and clicking on the filled in icon on the bottom of your panel. When done with this, make your path into a selection; click the dotted circle on the footer of the panel.
First open up Photoshop and make a new file. The size I choose was 600�130pixels.
1) Hi, Welcome to the tutorial! In this tutorial we will see how we can use Photoshop effectively to create a Gaming Template. The techniques which are used in this tutorials are very easy to follow :
Tips for fixed selection for marquee selection tool. Change the style in option bar Normal to fixed size. Apply width and Height of selection as per requirement.
The following is the unaltered photo of a lady snoozin.
In the previous part of this tutorial, we conceptualized our website, which is a travel blog, by deciding on a color scheme and structure and by brainstorming some ideas. Now it's time for the fun part, designing! Open up Photoshop and let's start.Create a new document 900px wide and 1200px tall. The height part isn't too important since we can change it arbitrarily later, but the width is important here. There are many different screen resolutions used out there, so it's important to keep that in mind while developing a website. There are multiple options that one can use to go about doing this. Many designers will set up guidelines on both sides of the document and then increase the canvas' width. This will allow them to make their website within the guidelines but also create a background that will work well with widescreen resolutions. We'll be using a very similar method although we won't be using guidelines and we don't be designing the entire background, most of that will be done with XHTML/CSS. If this doesn't make any sense to you, relax. It will all come together soon.
Don't use the default photoshop drop-shadow. It looks tacky.