Learn Photo Editing
Photoshop website design is a very common starting ground in modern web application design. People often tend to design their layout in Photoshop by adding image mirroring, shadows, transparencies, and other filters, and also visual enhancements in addition to defining the basic layout patterns. In this section, we will cover the procedure of replicating (I prefer the term replication over cutting, you will see why in a while) your PSD Photoshop theme to XHTML and CSS. If you are the one who creates the designs, just as a general advice, try not to completely mock up all the elements in too much detail. This is because, in HTML, there is always the danger of not being able to replicate the proposed look and feel. The key concept is only to cut out from Photoshop parts and images that you cannot get along without and leave everything else to handle in CSS magic. So, things such as the following should always be used as is from your PSD After we have provided some general guidelines, we...
The GIMP can save image files in a wide variety of formats, including JPEG, TIFF, and PNG. For images that you'll work on later, it's best to use the GIMP's native XCF file format. This format isn't widely recognized by other graphics programs, so it's not a great choice for final output or sharing with people who use different software. Having said that, it's a high-quality format with support for saving layers, channels, and paths. In these respects, it's similar to the native PSD format used by Adobe Photoshop. The GIMP can also save and open PSD files, so if you're working side-by-side with Photoshop users, PSD may be a better choice for you (see Figure 3-12). Of course, these high-quality, multilayered formats take Select File Type (Photoshop image) Select File Type (Photoshop image) Photoshop image Figure 3-12. The GIMP can save images in Adobe Photoshop's PSD format, but they will probably be larger than nativeXCF files.
Nearly everyone is drawn to color first and structure second. In some cases a design may be available in several different colors. The color may be controlled from within Drupal, or you may need to choose which colors you want to download the right theme. Designs can also be easily modified by altering the CSS style sheet and using the Colorize function within a graphics program such as GiMP or Photoshop. By altering the lightness and the hue of a color, you can convert a gray-scale design into
At this stage you should sketch out what your Web site will look like, including all of the elements that will be displayed on the page. You might use a graphic design tool such as Illustrator, Photoshop, or the GiMP to accomplish this step, or you may want to start with paper and a pencil.
The most important issue in configuring the Image module is choosing and setting up the conversion library that you will use. The conversion library will be given the responsibility of taking the original images that are uploaded to the site and resizing them to standard sizes and thumbnails. Drupal automatically has support for the GD2 library (http www.php.net image), which has been bundled with PHP since version 4.3. The Image module adds support for the ImageMagick library as well. To choose which library should be used, navigate to administer settings (admin settings), and in the Image Handling group, select an image processing toolkit. If you choose a library other than GD2, you will need to save the changes and then fill in the additional field to specify a path to the binary library file that you have chosen. If you want to use ImageMagick, for example, you will first need to select ImageMagick Toolkit, save the changes, and then enter a value for the Location of the Convert...
Installing the Image module is quite straightforward. Just download the module from http drupal.org project image, place the entire image folder in the modules directory, and activate the module from the admin modules page. If you wish to use the ImageMagick library (http www.imagemagick.org script index.php) for converting and resizing images, you will also need to move the modules image image.imagemagick.inc file into the includes directory of your Drupal installation. If you wish to use the Image module's gallery-building functions, you need to make sure that the Taxonomy module is enabled.
F-Spot's image-editing capabilities are basic compared to what the GIMP can achieve but F-Spot does have tools for common tasks, hidden at left (see Figure 3-6) you may need to click and drag out the left side of the window to see these tools. They include buttons for cropping, red-eye reduction, and adjusting the color of your photos. Note that when you make an edit using the tools in F-Spot, there is no Undo button. Instead, you can revert to the unmodified image by selecting original from the Version drop-down menu in the left-side toolbar.
XSane has a plug-in that enables scanners to be used directly inside the GIMP (GNU Linux, Windows, Mac). Because you'll get creative with your scanned and imported images, using the plug-in is often quicker and more convenient than using XSane in stand-alone mode. In Ubuntu, start the GIMP by choosing Applications Graphics GIMP Image Editor on the GNOME menu. After the main GIMP window fills your screen, select File Create XSane Device dialog the XSane device-selection window appears again.
Browse to admin build themes settings fusion_starter to configure the settings of Fusion Starter theme. There you will find the default settings of every Drupal theme, such as logo image settings or shortcut icon settings. However, there is also a new section, named Fusion theme settings. There, you can easily change the basic styles and the layout of your theme, such as font family, font size, fixed or fluid layout without using any CSS at all. Click on Save configuration to store your settings.
In order to have the freedom to manipulate images as required by your site, you really need to use a reasonably powerful image editor. Photoshop or Paint Shop Pro are examples of good image-editing environments, but anything that allows you to save files in a variety of different formats and provides resizing capabilities should be sufficient. Of course, if you have to take digital
At the simplest level, taxonomy provides a mechanism for categorizing content on your site. One of the benefits of a library is that the librarians have taken the time to examine every book, movie, periodical, and music item that they have on the shelves in their building. The librarians, or the publishers, have painstakingly thought about how to categorize each item so that it easy to locate. Not only is it easy to locate an item in the library, it is also easy to locate items that are similar to the item that you are interested in. For example, you could walk into a library and locate the section for all items related to web design. In that section, you could find books on topics ranging from using Photoshop to create graphics to programming in PHP, all thanks to the work of the librarians and the use of a system to categorize similar items.
With Drupal installed, the next step in the process is to pick a visual design. There are three general approaches to this find an off-the-shelf theme at Drupal.org project themes, find a starter theme on Drupal.org, or start from scratch using a Photoshop file. The theme that I created in Chapter 13 is the perfect starting point for this project. The theme is simple, clean, and provides all of the flexibility that I need for this project. I'll copy both the sites all themes genesis and the I'll upload the organization's logo using the Logo image settings feature provided by Drupal. I'll uncheck the Use the default logo box that reveals a file-upload feature. I'll click on the Choose file feature and upload the organization's logo. I'll then click on the Save configuration button before continuing.
The ImageMagick toolkit is said to produce higher quality images as well as reduced CPU processing time. Of course technology changes rapidly so be sure to check the latest status on GD, ImageMagick, or any other image toolkit you want to try. Information on GD toolkit can be found at http php.net gd. You can read more about ImageMagick at http imagemagick.org.
Imagemagick library j,i There is the option to use the imagemagick library (although this may C require additional configurations on the server), this is faster than GD and can handle images better. The i mage. i mag ick. inc file within the image module folder contains more information and settings for this.
You'l first need to make a drop shadow image in your favorite image editor. This image needs to be large enough to cover the block area behind the image. You might make it slightly larger than the images if using ImajeCache. Or for versatility and reusability, you might rather just make a large image, say 800x800 pixels. In Gimp, you would use the Shadcuv option m the Script-Fu menu after creating a blank white layer. In Photoshop, you'll use Payer Layer Style Drop Shadow. Other editors probably have similar methods to create drop shadows. Save the image as a PNG
ImageCache allows you to set up presets for image processing. If an ImageCache derivative doesn't exist, the web server's rewrite rules will pass the request to Drupal which in turn hands it off to ImageCache to dynamically generate the file. The following image shows the presets that are in use on the project site. Full and thumbnail are created by the module, and will be used for job photos. The bio type was created for use with the biography photograph. These presets are selectable as format options from within Views.
Understanding Adobe Photoshop Features You Will Use
Adobe Photoshop can be a complex tool only because you can do so much with it, however for in this video series, we're going to keep it as simple as possible. In fact, in this video you'll see an overview of the few tools and Adobe Photoshop features we will use. When you see this video, you'll see how you can do so much with so few features, but you'll learn how to use them in depth in the future videos.