The “Love Design” iPhone Wallpaper

by Steve Tolley

This tutorial will teach you how to make a cool “Love Design” wallpaper for you iPhone, obviously not everyone has an iPhone so if you wanted you could use the techniques and scale it up to a wallpaper for you desktop for instance, the main idea is to teach you how to get cool effects.

This is what we will be making:

Final

Step 1 - New Document

First of all we need to create a new docurment, with the sizes 320 x 480 (W x H) in pixels, this is size needed for it to fit on the iPhone screen and leave all other settings as default.

Step 2 - Gradient Background

Next we need to create a gradient on the background layer, to do this select the gradient tool in the left hand toolbar and use the below colours:

Gradient Settings

And make sure that the radial gradient is selected, when this is done click in the middle and drag to any corner of the canvas and let go to get your gradient like below:

Gradient

Step 3 - Draw First Rectangle

When this is done, make sure the primary colour is set to #931D1D and draw a rectangle across the canvas as shown below:

First Rectangle

Step 4 - Shadowing

Now we need to create some shadowing to do this set the primary colour to #D5C38A and draw a rectangle in the same way you did with the first one but draw it a lot thinner and at the top of the first one as below:

Small Rectangle

When this is done press (CTRL +J) to make a direct copy of the selected layer and move it to the same place but at the bottom of the first rectangle as below:

Small Rectangle 2

With this done, select the first small rectangle you drew and go to Filters > Blur > Gaussian Blur and set it to 3, and then do this process again with the second small rectangle and you should have something like this when done:

Small Rectangle blur

Step 5 - Adding The “Love Heart”

Next we need to get the heart, I did a quick Google search for “love heart” and found a suitable one so I put it into the document and resized it to fit where I wanted it to go, after this use these settings below using the blending options to get the right colour and effects:

Inner Shadow

Heart Shadow

Color Overlay

Heart Color

When these are done you should be left with something like this:

Heart Done

Step 6 - Creating A Square

Next we need to create the box that goes behind the heart this is simple, choose the rectangle tool again and set the primary colour to #690F0F and hold shift and click and drag a box around your heart so that the heart fits nicely inside the box as below:

Heart Box

Once you are happy with the size put the below settings on the layer using the blending options:

Drop Shadow

Heart Box Shadow

Once these are done you should be left with the below:

Heart Box Done

Step 7 - Add The “Design” Text

Next we need to add the design text, this is simple pick the text tool on the sidebar and select the Arial font and make sure it is bold, next to where you have placed your heart click and write the word “Design” when this is done use the settings below (again using the blending options) to get the right effect:

Text Shadow

When this is done you will have something like this:

Text Done

Step 8 - More Shadowing

The penultimate step is to create some darker patches at the top and the bottom of the original rectangle this is again to give the idea of shading, to do this do the same as the other two small rectangles (Step 4) but use the colour # 801B1B and place them just inside the top and bottom of the original rectangle:

Shadowing 2

When this is done again apply a Gaussian blur of 2 with this done you will have this:

Shadowing 2 Blur

Step 9 - Adding Texture

The final step is what makes this wallpaper comes and alive, as we all know textures make things jump out and give things depth, so what we are going to do is add a texture I again found THIS cool texture, of paint on a canvas, copy this and paste it onto the canvas and place around this area (with the top left of the image in the top left of the canvas)

Texture

With this in place make sure the texture layer is selected and go to Image > Adjustments > Black & White and then set the layer mode to Color Burn this will give you the finished wallpaper as shown below:

Final

iPhone Test

Also below is what the wallpaper will look like on the iPhone:

Wallpaper Test

If you want to know how to make the iPhone itself, leave a comment on this tutorial and if enough people want to see how it’s done then I will make it for the next tutorial.

It would be cool to see what you come up with so feel free to upload them to the Photoshop Tutorials Flickr Group and leave me a comment to say when you have uploaded one so people can comment on them,

And as always if you have any problems with this tutorial then don’t hesitate to leave me a comment or head over to the Online-Photoshop Tutorials Forums and post in the Tutorials Problems section and I and others will be able to help you.

http://forums.online-photoshoptutorials.com/

psd-download

Category : Designing
Tags : , , , , ,
18 Comm

Defining The Photoshop File Types

by Steve Tolley

This post is going to give the definitions for each file type that you can save as in Photoshop CS3 (as this is the one I use) Most of the below file types you won’t need but I thought it would be useful for you all to know and understand what each of them are for just in case.

Lets start with the most used file type:

Photoshop File (*.PSD*.PDD)

What is it?
Photoshop format (PSD) is the default file format and the only format, besides the Large Document Format (PSB), that supports most Photoshop features. Because of the tight integration between Adobe products, other Adobe applications, such as Adobe Illustrator, Adobe InDesign, Adobe Premiere, Adobe After Effects, and Adobe GoLive, can directly import PSD files and preserve many Photoshop features.

The .PDD (PhotoDeluxe Document) format is a version of .PSD that only supports the features found in the discontinued PhotoDeluxe software.

BMP (*.BMP*.RLE*.DIB)

What is it?
The BMP file format, sometimes called bitmap or DIB file format (for device-independent bitmap), is an image file format used to store bitmap digital images, especially on Microsoft Windows and OS/2 operating systems. Many graphical user interfaces use bitmaps in their built-in graphics subsystems.

File Size/Compression?
While most BMP files have a relatively large file size due to lack of any compression, many BMP files can be considerably compressed with lossless data compression algorithms such as ZIP (up to 0.1% of original size) because they contain redundant data.

CompuServe GIF (*.GIF) - Lossless

I found this awesome GIF image that represents this file type perfectly:

stickmananimation

What is it?
The Graphics Interchange Format (GIF) is a bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability.

The format supports up to 8 bits per pixel, allowing a single image to reference a palette of up to 256 distinct colors chosen from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for simpler images such as graphics or logos with solid areas of color.

File Size/Compression?
GIF images are compressed using the Lempel-Ziv-Welch (LZW) lossless data compression technique to reduce the file size without degrading the visual quality.

Dicom (*.DCM*.DC3*.DIC)

What is it?
Digital Imaging and Communications in Medicine (DICOM) is the most common standard for receiving medical scans. Photoshop Extended allows you to open and work with DICOM (.DC3, .DCM .DIC, or no extension) files. DICOM files can contain multiple “slices” or frames, which represent different layers of a scan.
Photoshop reads all frames from a DICOM file and converts them to Photoshop layers. Photoshop can read 8 , 10 , 12 , or 16 bit DICOM files. (Photoshop converts 10 and 12 bit files to 16 bit files.)

Photoshop EPS (*.EPS)

What is it?
Encapsulated PostScript (EPS) language file format can contain both vector and bitmap graphics and is supported by virtually all graphics, illustration, and page-layout programs. EPS format is used to transfer PostScript artwork between applications. When you open an EPS file containing vector graphics, Photoshop rasterizes the image, converting the vector graphics to pixels.
EPS format supports Lab, CMYK, RGB, Indexed Color, Duotone, Grayscale, and Bitmap color modes, and does not support alpha channels. EPS does support clipping paths. Desktop Color Separations (DCS) format, a version of the standard EPS format, lets you save color separations of CMYK images.

Photoshop DCS 1.0 (*.EPS) / Photoshop DCS 2.0 (*.EPS)

What is it?
Desktop Color Separations (DCS) format is a version of the standard EPS format that lets you save color separations of CMYK images. You can use DCS 2.0 format to export images containing spot channels. To print DCS files, you must use a PostScript printer.

JPEG (*.JPG*.JPEG*.JPE) - Lossy

An image that represents the lossiness of a JPEG image:

ball

What is it?
Joint Photographic Experts Group (JPEG) format is commonly used to display photographs and other continuous-tone images in HTML documents over the Internet and other online services. JPEG format supports CMYK, RGB, and Grayscale color modes, and does not support alpha channels. Unlike GIF format, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data.

File Size/Compression?
A JPEG image is automatically decompressed when opened. A higher level of compression results in lower image quality, and a lower level of compression results in better image quality. In most cases, the Maximum quality option produces a result indistinguishable from the original.

Large Document Format (*.PSB)

What is it?
The Large Document Format (PSB) supports documents up to 300,000 pixels in any dimension. All Photoshop features, such as layers, effects, and filters, are supported. You can save high dynamic range, 32 bits-per-channel images as PSB files. Currently, if you save a document in PSB format, it can be opened only in Photoshop CS or later. Other applications and earlier versions of Photoshop cannot open documents saved in PSB format.

PCX (*.PCX)

What is it?
PCX format is commonly used by IBM PC compatible computers. Most PC software supports version 5 of PCX format. A standard VGA color palette is used with version 3 files, which do not support custom color palettes. PCX format supports Bitmap, Grayscale, Indexed Color, and RGB color modes, and does not support alpha channels.

File Size/Compression?
PCX supports the RLE compression method. Images can have a bit depth of 1, 4, 8, or 24.

Photoshop PDF (*.PDF*.PDP)

What is it?
Self explanatory, this file format saves the Photoshop file you are working on as a PDF file to be opened with Adobe Acrobat Reader.

Photoshop RAW (*.RAW)

What is it?
If you’ve saved the file in raw mode (when using a digital camera) when it is subsequently loaded into a raw conversion program and then saved to a TIFF or .PSD format file it can be exported in 16 bit mode. The 12 or 14 bits recorded by the camera are then spread over the full 16 bit workspace. If you’ve saved the file in-camera as a JPG then it is converted by the camera’s software to 8 bit mode and you will only ever have 256 brightness levels to work with.

File Size/Compression?
Files sizes are usually quite large as the name suggests the photo is in a RAW state therefore no compression has been done to it.

PICT File (*.PCT*.PICT)

What is it?
Image file saved in the Macintosh PICT format; may contain both vector and bitmap data and can use thousands of colors; also supports RLE (Run-length encoding) and JPEG compression to reduce the file size.

File Size/Compression?
File sizes are relatively small as it uses the same compression method as JPEG

Pixar (*.PXR)

What is it?
The Pixar format is designed specifically for high-end graphics applications, such as those used for rendering three-dimensional images and animation. Pixar format supports RGB and grayscale images with a single alpha channel.

PNG (*.PNG) - Lossless

This image represents how transparency is achieved in Photoshop:

transparent

What is it?
Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license, PNG also offers a variety of transparency options available.

Portable Bit Map (*.PBM*.PGM*.PPM*.PNM*.PFM*.PAM)

What is it?
The Portable Bit Map (PBM) file format, also known as Portable Bitmap Library and Portable Binary Map, supports monochrome bitmaps (1 bit per pixel). The format can be used for lossless data transfer because many applications support this format. You can even edit or create such files within a simple text editor.
While the PBM file format stores monochrome bitmaps, PGM additionally stores grayscale bitmaps, and PPM can also store color bitmaps. PNM is not a different file format in itself, but a PNM file can hold PBM, PGM, or PPN files. PFM is a floating-point image format that can be used for 32 bits-per-channel HDR files.

Scitex CT (*.SCT)

What is it?
Scitex Continuous Tone (CT) format is used for high-end image processing on Scitex computers. Contact Creo to obtain utilities for transferring files saved in Scitex CT format to a Scitex system. Scitex CT format supports CMYK, RGB, and grayscale images and does not support alpha channels.

File Size/Compression?
CMYK images saved in Scitex CT format often have extremely large file sizes. These files are generated for input using a Scitex scanner. It is often demanded in professional color work—for example, ads in magazines.

Targa (*.TGA*.VDA*.ICB*.VST)

What is it?
The Targa® (TGA) format is designed for systems using the Truevision® video board and is commonly supported by MS DOS color applications. Targa format supports 16 bit RGB images (5 bits x 3 color channels, plus one unused bit), 24 bit RGB images (8 bits x 3 color channels), and 32 bit RGB images (8 bits x 3 color channels plus a single 8 bit alpha channel). Targa format also supports indexed-color and grayscale images without alpha channels.

File Size/Compression?
When saving an RGB image in this format, you can choose a pixel depth and select RLE encoding to compress the image.

TIFF (*.TIF*.TIFF) - Lossless

What is it?
Tagged-Image File Format (TIFF, TIF) is used to exchange files between applications and computer platforms. TIFF is a flexible bitmap image format supported by virtually all paint, image-editing, and page-layout applications. Also, virtually all desktop scanners can produce TIFF images. TIFF documents have a maximum file size of 4 GB. Photoshop CS and later supports large documents saved in TIFF format. However, most other applications and older versions of Photoshop do not support documents with file sizes greater than 2 GB.

TIFF format supports CMYK, RGB, Lab, Indexed Color, and Grayscale images with alpha channels and Bitmap mode images without alpha channels. Photoshop can save layers in a TIFF file; however, if you open the file in another application, only the flattened image is visible. Photoshop can also save annotations, transparency, and multiresolution pyramid data in TIFF format. In Photoshop, TIFF image files have a bit depth of 8, 16, or 32 bits per channel. You can save high dynamic range images as 32 bits-per-channel TIFF files.

Conclusion

As you can see some of the file types are redundant unless you have specific software/hardware and most of you wont ever need to use them, but now you know what they are and what they do, so if you ever need to know what file type to use for a project check back here and you can find out which is best!

If there is any information here that you feel to be incorrect or would like me to add then leave a comment on the bottom and I will moderate what I think needs adding/deleting.

Category : Articles
Tags : , , , , , , ,
5 Comm