ADDED DEC 6, 2010, UNDER: WEB DESIGN
You can never have too much of a good thing–and two good things we rely on in our work are tips and tricks . Nuggets of information, presented clearly and succinctly, help us build solutions and learn best practices. In a previous article, we shared a jam-packed list of 250 quick web design tips . It seems only right to continue the trend by showcasing 100 fresh–and hopefully useful–CSS tips and tricks. General Not everything in this list was easy to categorize. All of the tips that are relevant and worthy of mention but don’t cleanly fit into a category are listed in this section. Conditional comments have been a godsend for resolving Internet Explorer inconsistencies. 1 It’s critical when working with CSS to be aware of the various properties at your disposal and how to use them correctly. 2 Using a good editor can increase productivity. Syntax highlighting and auto-complete functionality (plus validation and code references) make life easy. Check out Notepad++ , Coda , and don’t discount Dreamweaver CS’s code view until you try it. 3 In many ways, experimentation is the mother of innovation. Give yourself time to play; trial and error will help you learn and memorize techniques quickly. Check out these CSS3 experiments, for inspiration: How to Create Inset Typography with CSS3 , Semantic CSS3 Lightboxes , and 10 Interesting CSS3 Experiments and Demos . 4 Enable Gzip compression server-side whenever possible; it shrinks the size of files such as CSS and JavaScript without removing any of the content. 5 Caching will conserve bandwidth for visitors and account for much faster speeds. Take advantage of it whenever you can. Learn about optimizing browser caching. 6 Whitespace is important for CSS readability. Using whitespace to format your stylesheet adds bytes to the file size, but it’s made up for in increased readability. 7 Avoid using inline code (in either elements using the style attribute or in the HTML document within tags), and put them instead in your external stylesheets. It’ll be easier to maintain and also takes advantage of browser caching. 8 Whatever method you use to lay code out, be consistent. You’ll avoid potential problems such as misinterpretation. 9 Conditional comments can help you target versions of Internet Explorer for style. Filtering vendor-specific code isn’t ideal, and comments are safer than ugly hacks. 10 This tip is slightly controversial, but I recommend using a single stylesheet rather than multiple ones. It reduces the number of HTTP requests and improves maintainability, giving your site a performance gain. This is a tip supported by Google Page Speed guidelines . 11 When there are conflicting style rules, style rules that are later down the stylesheet supersedes the ones that come before it. Thus, put mission-critical declarations at the end, where they won’t be in danger of being overridden by other styles. 12 If you encounter a bug and can’t determine its cause, disable CSS (using something like Firebug or the Web Developer add-on ) or simply comment out all of the styles, and then bring selectors back one by one until the fault is replicated (and thus identified). 13 Make sure your code works in various browsers. Check it against the latest versions of the top five : Internet Explorer, Firefox, Chrome, Safari and Opera. 14 Additionally, ensure that your code will degrade gracefully when CSS is disabled in the user’s browser. To test this, either turn styles off in every browser or use a text browser such as Lynx. 15 Ensuring that your code degrades gracefully is obviously important, but many people forget that some visitors will have a dodgy browser or have styles turned off, so check that your fallbacks work. 16 Every browser has a built-in debugger. In IE and Firefox you can get to the inspector by hitting F12; for Chrome, Safari and Opera, press Ctrl + Shift + I. 17 Browser emulators can’t replace the real thing, so use a real or virtualized edition of a browser or device. 18 Did you know that PHP code can create dynamic CSS files? Here’s a tutorial on that . Just give the file a .php extension and ensure that the file declares the document header with a text/css content type. 19 Naming CSS files can be tricky. One of the best ways to approach the task is to keep file names short and descriptive, like screen.css , styles.css or print.css . 20 Any code or process you create is valuable, and recycling what you’ve produced for other projects is not a bad thing: pre-existing code is a great timesaver, and this is how JavaScript and CSS frameworks are born. 21 While comments in CSS files can assist other people who read or maintain them, avoid writing comments unless they are required. Comments consume bandwidth. Write CSS in a self-explanatory manner by organizing them intuitively and using good naming conventions. 22 If you’re struggling to remember what’s available in CSS (or even CSS3), get some cheat sheets. They’re simple and can help you get used to the syntax. Here are some excellent CSS cheat sheets: CSS Cheat Sheet (Added Bytes), CSS Shorthand Cheat Sheet (Michael Leigeber), CSS 2.1 and CSS 3 Help Cheat Sheets (PDF) (Smashing Magazine). 23 Bad code breaks more websites than anything else. Validate your code by using the free, web-based W3C CSS Validation Service to reduce potential faults. 24 Vendor-specific CSS won’t validate under the current W3C specifications (CSS2.1), but could give your design some useful enhancements. Plus, if you’d like to use some CSS3 for progressive enhancement, there’s no way around using them in some instances. For example, the -webkit-transform and -moz-transform property was used to progressively enhance these CSS3-animated cards for users using Safari, Chrome, and Mozilla Firefox. 25 Keep multiple CSS files in a single directory, with an intuitive name such as css/ . If your website has hundreds of pages, maintainability and information architecture are vital. At-rules, Selectors, Pseudo-classes, and Pseudo-elements Targeting your code for styling is one of the primary functions of CSS. Whether you’re trying to make your code mobile-friendly , printer-friendly or just good old screen-friendly, you’ll be following certain conventions. Ensuring that styles aren’t in conflict, using CSS inheritance correctly and triggering actions in response to events (such as hovering) are all part of the CSS package. This section is dedicated to useful tips related to conventions. With CSS3 media queries, designing for non-standard experiences has become easier. 26 Be careful when using the media attribute in your HTML declaration for an external CSS file. You might be unable to use media queries to better provide pre-cached alternative visuals. 27 If you find elements that use the same properties and values, group them together by using a comma ( , ) to separate each selector. This will save you from repetition. For example, if you have the following: h1 { color:#000; } h2 { color:#000; } Combine them as such: h1, h2 { color:#000; } 28 Printer-friendly stylesheets are very important if you want to save your visitors’ ink and paper. Use the @media print at-rule, and remove anything that isn’t necessary on the printed page. 29 Accessibility also has to do with how the written word is spoken. The aural (now deprecated in CSS) and speech media queries can improve usability for screen readers. 30 Unfortunately, the handheld media query in CSS isn’t widely supported. If you want your website to work on mobile devices, don’t depend on it to serve the correct visuals to mobile devices. 31 Take the time to eliminate duplicate references and conflicts in your CSS. It will take some time, but you’ll get a more streamlined render and fewer bytes in your files. 32 When working with mouse hover events, deal with the (1) :link pseudo-class, then (2) :visited , then (3) :hover and finally (4) :active — in that order. This is necessary because of the cascade. 33 Making a website work well on Apple iOS devices is straightforward: to scale your design, just use CSS3 media queries with the appropriate min-width and max-width values. Here’s a tutorial for that . 34 Make the most of CSS inheritance by applying required styles to parent elements before applying them to the children. You could hit several birds with one stone. 35 You can apply multiple classes to an element with space separation, which is great if you want to share properties with numerous elements without overwriting other styles. 36 If you don’t want to deal with IE6’s conditional comment quirks–they require a separate CSS file–then you can use the star hack ( * html ) selector, which is clean and validates. 37 HTML tooltips are fine for plain text, but the :hover pseudo-class for CSS tooltips gives you more options for showing styled content. Check out this tutorial on how to create CSS-only tooltips . 38 Using attribute selectors, you can add icons or unique styles depending on the file type you link to in an anchor. Here’s an example with which you can add style to a PDF link: a[href$='.pdf] . 39 You can also use attribute selectors to target a specific pseudo-protocol such as mailto or skype : [href^="skype:"] . 40 Rendering CSS takes time, and listing selectors adds bytes. Reduce the workload of a renderer by using only the selectors you require (an id is better than many child references). 41 Not everyone will agree with this, but I recommend writing every “custom” selector down as a class (before making it an id ) to help eliminate duplicate entries. 42 When structuring your CSS file by selectors, the convention is to list elements, then classes (for common components) and finally any ids (for specific, unique styles). 43 Naming conventions for selectors are important. Never use names that describe physical attributes (such as redLink ), because changing the value later could render the name inappropriate. 44 Case sensitivity relates to naming conventions. Some people use dashes (e.g. content-wrapper ) or underscores (i.e. content_wrapper ), but I highly recommend using camel case (e.g. contentWrapper ) for simplicity. 45 The universal selector ( * ) is used widely in CSS reset mechanisms to apply specific properties to everything. Avoid it if you can; it increases the rendering load. 46 With CSS3 media queries, you can easily target the orientation of a viewport with portrait or landscape mode. This way, handheld devices make the most of their display area. 47 Apple’s devices are unique in that they support a tag, which has stylistic value attached to it. You can use this to force the screen to zoom at a fixed rate of 100%. 48 The two CSS3 pseudo-elements, :target and :checked have great potential. They apply their designated style only to certain events and can be useful as hover event alternatives. 49 Embedding content in CSS is a unique way to give anchor links some description in printer-friendly stylesheets. Try them with the ::before or ::after pseudo-elements. 50 IDs can serve a dual purpose in CSS. They can be used to apply styling to a single element and to act as an anchoring fragment identifier to a particular point on the page. Layout and the Box Model When we’re not selecting elements for styling, we spend a lot of time figuring out how things should appear on the page. CSS resets and frameworks help us with consistency, but we should know how to correctly apply styles such as positioning and spacing. This cluster of useful tips relates to the aspects of CSS that fundamentally affect how the components of a website appear and are positioned. Positioning plays a critical role in the readability of information and should not be ignored. 51 Many designs are focused on grids and the rectangular regions of the viewport. Instead, create the illusion of breaking out of the box for added effect. 52 If margin: auto; on the left and right sides isn’t getting you the central point you desire, try using left: 50%; on position: absolute; and a negative margin half the width of the item. 53 Remember that the width of an item constitutes the specified width as well as the border width and any padding and margins. It’s basically a counting game! 54 Another controversial tip here: don’t use CSS resets. They are generally not needed if you take the time to code well. 55 A CSS framework such as Blueprint or YUI Grids CSS might assist you speed up development time. It’s a bit of extra code for the user to download, but it can save you time. 56 Remember that Internet Explorer 6 does not support fixed positioning. If you want a menu (or something else) to be sticky, it’ll require some hacks or hasLayout trickery. 57 Whitespace in web designs is amazing; don’t forget it. Use margins and padding to give your layout and its content some breathing room. You’ll create a better user experience. 58 If one thing overcomplicates the task of scaling a design the way you want, it’s using inconsistent measurements. Standardize the way you style. 59 Different browsers have different implementations; visually impaired users may want to zoom in, for example. Give your layout a quick zoom-test in web browsers to ensure the style doesn’t break! 60 Most browsers can use box-shadow without extra HTML. IE can do the same with filter: progid:DXImageTransform.Microsoft.Shadow(color=’#CCCCCC’, Direction=135, Strength=5); 61 Rounded corners aren’t as difficult to make as they used to be. CSS3 lets you use the border-radius property to declare the curvature of each corner without surplus mark-up and the use of images. 62 One disadvantage of liquid layouts is that viewing on a large screen makes content spill across the viewport. Retain your desired layout and its limits by using min-width and max-width . 63 WebKit animations and transitions might work only in Safari and Chrome, but they do add a few extra unique, graceful flourishes worthy of inclusion in interactive content. 64 If you want to layer certain elements over one another, use the z-index property; the index you assign will pull an element to the front or push it behind an item with a higher value. 65 Viewport sizes aren’t a matter of resolution. Your visitors may have any number of toolbars, sidebars or window sizes (e.g. they don’t use their browsers maximized) that alter the amount of available space. 66 Removing clutter from an interface using display:none might seem like a good idea, but screen-reader users won’t be able to read the content at all. 67 Be careful with the overflow CSS property when catering to touch-screen mobile devices. The iPhone, for example, requires two fingers (not one) to scroll an overflowed region, which can be tricky. 68 Have you ever come across CSS expressions ? They were Microsoft’s proprietary method of inserting DOM scripts into CSS. Don’t bother with them now; they’re totally deprecated. 69 While the CSS cursor property can be useful in certain circumstances, don’t manipulate it in such a way as to make finding the cursor on the screen more difficult. 70 Horizontal scrolling might seem like a unique way to position and style content, but most people aren’t used to it. Decide carefully when such conventions should be used. 71 Until Internet Explorer 9 is final, CSS3 will have some critical compatibility issues. Don’t rely too heavily on it for stable layouts. Use progressive enhancement concepts. 72 CSS makes it possible to provide information on demand. If you can give people information in small chunks, they’ll be more likely to read it. 73 When showcasing a menu in CSS, be consistent in implementation. People want to know about the relationship between objects, and it’s important to avoid dissonance. 74 CSS isn’t a solution to all of your layout woes–it’s a tool to aid your visual journey. Whatever you produce should be usable and logically designed for users (not search engines). 75 Once your layout is marked up with CSS, get feedback on how usable it really is; ask friends, family, co-workers, visitors or strangers for their opinions. Typography and Color If one thing deserves its own set of tips, it’s the complex matter of adding typography, color and imagery to CSS. We want readable content and we want it in a consistent layout. In this section, we’ll learn to take advantage of typography and color, which are powerful conventions in design. I’ll talk about “web-safe” and share tips relating to the latest craze of embedding fonts. “Web-safe” concepts have changed over time and could soon become a non-issue. 76 Squeezing content too close together can decrease overall readability. Use the line-height property to space lines of text appropriately. 77 Be cautious about letter-spacing : too much space and words will become illegible, too little and the letters will overlap. 78 Unless you have good reason, don’t uppercase (i.e. text-transform:uppercase; ) long passages of text (e.g. HEY GUYS AND GALS WHAT’S UP?). People hate reading what comes off as shouting. 79 Accessible websites have good contrasting colors. Tools exist to measure foreground colors against background colors and give you a contrast ratio. Check out this list of tools for checking your design’s colors . Be sure your text is legible. 80 Remember that default styles might differ greatly from browser to browser. If you want stylistic flourish, reinforce the behavior in the stylesheet. 81 In the old days, the number of colors that a screen could display was rather limited. Some people still use old monitors, but the need for web-safe colors has drastically reduced. 82 Building a font stack is essential when making a design degrade gracefully. Make sure that fallback typefaces exist in case the one you request isn’t available. 83 With Vista, Windows 7 and MS Office 07–10 (and their free viewers), a number of cool new web-safe fonts have become available, such as Candara, Calibri and Constantina. Read about Windows fonts . 84 Plenty of smartphone apps can boost your ability to build a stylesheet, but Typefaces for the iPhone and other iOS4 devices is particularly useful because it shows you every font installed. 85 Web-safe fonts are no guarantee; people could quite possibly uninstall a font even as ubiquitous as Arial (or Comic Sans !). Then their browsers wouldn’t be able to render it. 86 Avoid underlining content with the text-decoration property unless it’s a real link. People associate underlined text with hyperlinks , and an underlined word could give the impression that a link is broken. 87 Avoid the temptation to use symbolic typefaces like Wingdings or Webdings in the layout. It might save KBs on imagery, but it’ll serve nonsensical letters to screen-reader users. 88 Remember that @font-face has different file format requirements depending on which browser the user is on, such as EOT, WOFF , TTF and OTF (as you would find on a PC). Serve the appropriate format to each browser. 89 The outline property is seriously underused as an aid to web accessibility. Rather than leaving it set to the default value, use border styles to enhance an active event’s visibility. 90 Smartphones do not have the same level of core support for web typography that desktop browsers do, which means fewer web-safe fonts and no conventional @font-face embedding. 91 Cross-browser opacity that degrades gracefully can be applied using the -ms- , -moz- , -khtml- vendor prefixes and the filter: alpha(opacity=75); property for Internet Explorer. 92 You can make background-image bullets by using list-style-type:none; , adding a padding-left indent and positioning the background-image to the left (with the required pixel offset). 93 Helping users identify an input box is easy; just add a background image of the name (like “Search” or “Password”) and set it so that the image disappears when the box is clicked on by using the :focus pseudo-class and then setting the background property to none . 94 Large and visible click regions enhance the usefulness and usability of anchor links, which in turn guide people among pages. Be attentive when you style these. 95 Remember that background images do not replace textual content. If a negative indent is applied, for example, and images are disabled, then the title will be invisible. 96 Navigation items need to be labeled appropriately. If you use a call-to-action button or an image-based toolbar, make sure a textual description is available for screen readers. 97 If the idea of applying opacity with a bunch of proprietary elements doesn’t appeal to you, try RGBA transparency (in CSS3) instead of background-color: rgba(0,0,0,0.5); . 98 If your visitors use IE6, avoid using px as the unit of measurement for text. IE6 users have no zoom functionality; they rely on text resizing, which doesn’t work with px. Use a relative unit instead, such as em . 99 Providing alternative stylesheets for supported browsers such as Firefox and Opera can enhance readability, as in the case of high-contrast alternatives. 100 If you find choosing colors difficult, web-based tools like Adobe Kuler , desktop tools like ColorSchemer Studio and mobile apps like Palettes Pro might help. Style Can Be Stylish! CSS has come a long way in recent years. With browser makers implementing the CSS3 specification even before it’s finalized, adding unique proprietary styles (such as WebKit transformations) to the mix and increasingly supporting web standards, there has never been a better time to be a web designer. In the past, we could only hope that our styles would be correctly applied, but it seems that desktop and mobile platforms are improving like never before. Web designs have come a long way since the ’90s, and that’s a good thing. Implementing CSS can be frustrating, what with ongoing web-browser issues, but it’s still one of the most fun web languages you can engage with. Rather than laying out the structure of objects or fiddling with complex mechanisms, you can dictate how content should appear. It’s like being given a blank piece of paper and a pack of crayons. And designers are experimenting with the available styles to create beautiful experiences for audiences. Consider the implications of every property and style you declare. CSS can turn the simplest or most minimalist layout into a complex structure of interactivity that would terrify all but the most dedicated individuals. As the capabilities and options in CSS grow and devices are updated to support them, a new wave of unique layouts will appear. Hopefully a number of them will be yours. Related Content 10 Random CSS Tricks You Might Want to Know About 12 Common CSS Mistakes Web Developers Make 3 Advanced CSS3 Techniques You Should Learn Related categories : CSS and Web Design Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter , SitePoint’s forums and other places, helping those in need.
By admin with 0 comments
ADDED DEC 6, 2010, UNDER: WEB DESIGN
Use the power of jQuery and the handy last.fm records plugin to create a showcase of your favourite music on your website. We’ll install the plugins to fetch the information from the Last.fm website, then style up the design with a cool retro vinyl record theme. The design we’ll be creating lists out the top albums from our Last.fm profile by displaying the cover art with a subtle shadow. When the link is hovered, a retro vinyl record will slide out from the cover, purely for visual interest and extra cool factor points. View the demo Creating the concept In order to build the working website, the basic idea and the graphical elements need to be creating in Photoshop. We’ll need to design a background for the demo, the vinyl record image and the subtle shadow graphic. Create a new document in Photoshop with a width of 2000px. Fill the background with grey and add a subtle noise texture using the Filter > Add Noise menu. Paint a strip down the center using a large soft white brush. Change this layer to around 20% opacity. Source an album cover to represent the covers that will be inserted by the Last.fm records plugin and scale it to 126px. Paint a dab of a soft black brush and press CMD+T to transform it. Squash the brush mark and place it underneath the album art to form a shadow. Adjust the opacity of the shadow to tone down its impact. Source a photo of a vinyl record and clip out the background using the marquee tool. Scale down the record to fit the dimensions of the album art. Toggle off all the layers and export a selection of the vinyl record. Use the PNG-24 format to allow for alpha transparency. Also save out a selection of the shadow as a PNG with alpha transparency. A thin selection of the background can be exported as a JPEG which will then repeat vertically. The 2000px width will fit inside the majority of screen resolutions. Writing the HTML The HTML for the demo is pretty simple. We have the basic structure of Doctype, linked up CSS stylesheet and an introductory H1, then the Javascript files that do all the work are referenced. Firstly we need the jQuery library to power everything, then the handy Last.fm records plugin from Jeroen Smeets which essentially does all the hard work for us. The final Javascript file is our own scripts file where we’ll write the final bits of jQuery to get everything working and to add the fancy sliding effect. The Last.fm records plugin inserts the albums into a div with an ID of lastfmrecords , so this is added to the HTML file in the desired place. Activating the jQuery plugin The documentation to activate the Last.fm records plugin can all be found on Jeroen’s website . Basically the plugin is configured with a few simple lines that declare the Last.fm username from which to fetch the information, the number of items to display and what kind of time period to collect the information from. One extra configuration option I’ve added from the main plugin file is an alternative image for any albums that don’t have cover art. Previewing the HTML file so far will show the jQuery plugin doing its job and displaying the relevant album art neatly linked to the artist’s Last.fm profile. Styling with CSS The HTML was super simple, and the CSS isn’t too complicated either. After setting up the overall styling for the demo background and heading, the main CSS for the actual album art is just to space out each element with 30px margin and to add the shadow graphic as a background-image. Adding position:relative; will allow the child elements of this list item to be positioned absolutely later. A preview of the file with all the CSS in place will show a fully working copy of the initial concept with all the albums filling the page. Creating the fancy sliding vinyl record We need another HTML object to attach the vinyl record to with CSS, so jQuery is used to append an empty span element inside each anchor. Then a hover function is added to create the effects when the user’s mouse hovers and leaves the links. The jQuery finds the child span of that particular link then animates the positioning to 95px at a speed of 500ms. On hover-out the positioning is returned to 38px, which sits the record exactly over the album cover. The addition of .stop(true,true) is a handy snippet to prevent any strange behaviour if a link is quickly passed with the mouse triggering a repeating effect. A touch more CSS styles up the newly created span into a vinyl record graphic using image replacement. The absolute positioning allows the record to sit exactly in place over the album art, then z-index adjusts the stacking order of the objects so the vinyl sits below the album art and is essentially hidden until it slides out from beneath it. Complete CSS body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { background: #606060 url(images/bg.jpg) repeat-y; } h1 { font: italic 60px Georgia, Serif; color: #333; text-shadow: 0px 3px 1px #606060; margin: 30px 0 50px 0; text-align: center; } #lastfmrecords { width: 700px; margin: 0 auto; } #lastfmrecords li { width: 200px; float: left; position: relative; text-align: center; margin: 0 30px 30px 0; padding: 0 0 7px 0; background: url(images/shadow.png) bottom no-repeat; } #lastfmrecords li a img { position: relative; z-index: 10; } #lastfmrecords li a span { display: block; width: 125px; height: 125px; background: url(images/vinyl.png); position: absolute; top: 0; left: 38px; z-index: 5; } Complete Javascript $(document).ready(function() { var _config = { username: ‘spoongraphics’, count: 9, period: ‘topalbums’, defaultthumb: ‘http://cdn.last.fm/flatness/catalogue/noimage/2/default_album_large.png’ }; lastFmRecords.init(_config); $(“#lastfmrecords a”).append(” “); $(“#lastfmrecords a”).hover( function () { $(this).children(“span”).stop(true,true).animate({“left”: “95px”}, 500); }, function () { $(this).children(“span”).animate({“left”: “38px”}, 500); } ); }); View the demo
By admin with 0 comments
ADDED DEC 1, 2010, UNDER: WEB DESIGN
This web design tutorial on Design Instruct (our other website) walks the learner through the creation of a beautiful and trendy web layout using Photoshop. The web design is best used on a personal portfolio site. Final Result Click the preview image below to go to the tutorial on Design Instruct . Other Things to Do Subscribe to the Design Instruct RSS feed Follow @ designinstruct on Twitter Related Content Make an Elegant and Simple Blog Web Layout Using Photoshop PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout How to Make a Light and Sleek Web Layout in Photoshop Related categories : Web Design and Tutorials About the Author Jacob Gube is the Founder and Chief Editor of Six Revisions . He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author . If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @ sixrevisions .
By admin with 0 comments
ADDED NOV 30, 2010, UNDER: NEWS,WEB DESIGN
In the Getting Started with Drupal guide, you were given a step-by-step walkthrough for setting up and using Drupal, the popular open source content management system (CMS). In this article, I’ll share some basic tips and tricks geared towards new Drupal developers. Introduction If you haven’t already, consider first reviewing the official Drupal.org reference on core concepts before delving into Drupal. If you don’t have Drupal set up yet, go over to the Getting Started with Drupal guide. Another place to find help is in the Drupal Forums ; search for the specific answer to your specific question. Here are some tips for posting to the Drupal forums . While Drupal is not for everyone, it is a popular platform that helps accomplish many common goals for website owners. 1. Install Drupal Quickly Using Profiles Drupal comes in the “core” format as a standard download from the official Drupal.org website (click the “Download” button on the Download page at Drupal.org for the most recent version). However, if you have a specific need, say a news site, or a political campaign site, consider using one of the contributed profiles or distributions that have been built off thousands of hours of development time from other coders. These pre-configured bundles have certain modules, themes, or pre-built functions that allow you to get your ideal site up and running, instead of you having to physically download and configure multiple modules to extend Drupal core. I use the Acquia distribution , which comes with many modules for a complex site with moderate to high functionality. 2. User #1 is Important Take good care to record the username, password, and e-mail address of the first user (typically the username will be admin). This is user number 1 — the owner of the site — and you’ll periodically return and log in as this first user to keep the site up-to-date. It’s also important to secure this account because it holds a lot of power over your Drupal installation. 3. Know the Basic URL Structure for Drupal Content Once you have a basic installation in place, you may create new content by navigating directly to this URL (where example.com is your domain name): http://example.com/node/add Content within a Drupal site are called nodes . A node may be an image, a page, a story, an announcement, a poll, a web form, or a job listing — you can think of a node as a single unit of content. For example, if you want to create a new page, you can go to the following URL: http://example.com/node/add/page Once you create content, you can find its nid (node ID), which is a unique identifier for that node, in the URL. To determine the nid through the URL of a web page, just use the following URL structure as a guide, where [nid] is the node ID of that page: http://example.com/node/ [nid] In the following image, the nid is 2. 4. Google Is Your Friend Right from the beginning, you may have installation errors, mostly because your local development environment, i.e. your installation of Drupal in your computer, may be different from your remote hosting environment, i.e. where your Drupal site will be hosted. Whenever you encounter a Drupal issue, Google is your friend. Copy and paste the exact error message, and consider putting the search term inside double quotes so that Google does a literal search. 5. Customize Your Site’s Error Pages The default error messages Drupal gives your users when they navigate to a web page that they don’t have permission to view or a page that is not found can be intimidating and not really useful. Configure the language of your 403 Access Denied and 404 Page through this URL: http://example.com/admin/settings/error-reporting 6. How to Troubleshoot the “White Screen of Death” When you navigate to your Drupal site and you see nothing but a white blank screen, playfully nicknamed white screen of death (probably as a reference to Microsoft Windows’s blue screen of death ), it typically means that Drupal encountered a PHP error. Many things can cause this, and it usually has to do with a development error. Even a missing semicolon can trigger the white screen of death. If you find yourself with a completely white screen (blank), you’ll want to enable PHP error reporting so you can find where the issue is being encountered. For more information, read this Drupal.org tutorial called White Screen of Death . 7. Install the Administrator Menu Module If you didn’t use an installation profile and you aren’t using Drupal 7, install the Administration menu module (admin_menu). It’s is a dropdown menu at the very top of the administration pages that links to admin pages, making it easier to find your way through the maze-like administration pages. 8. Back Up Your Database in a Safe Location The Backup and Migrate module is perfect for grabbing an SQL dump of your database for storage or if you need to move it from one host to another. I recommend storing these backups on a separate location of your site. For small sites, you can even get away with emailing the SQL file to yourself and storing it there. Not recommended for security purposes (since if your email account is compromised, then your site’s content will be exposed), but it just illustrates the types of places you can store your SQL files. 9. When Something Goes Wrong, Flush Your Cache Drupal creates caches of your content so that every time a page is requested, it doesn’t have to generate it dynamically all of the time, reducing the amount of PHP processes and SQL queries being made, which in turn increases the performance of your Drupal site. However, if your site acts strangely or you can’t see your theme edits during development, use the Flush Cache function. Flushing your cache clears out your Drupal cache and allows the site to rebuild itself with up-to-date information. The Drupal cache can also be disabled temporarily while you’re still in development under the Site Configuration page, under Performance. 10. Explain the Concept of Content Types to Clients One of the biggest challenges for your client is to understand the different types of content on their site. From the perspective of the end-user, a page of staff biographies, or a page of announcements, or a page of recent events all behave the same, so it might be difficult, for example, to explain why a Story is different from a Page. But in order for end-users to really use their system properly, this conversation needs to happen at hand-off. One thing to note is that they can create new types of content by going to Administer > Content types > Add content type (tab). From Drupal’s point of view, breaking down the site into unique content types, the site owner can easily make cascading changes for one content type. You could, for example, change commenting settings for a Page that would be different for a Story. Each of the different nodes within a specific content type may then be displayed on the front-facing sections of the Drupal site using Views (more on this later). By understanding what kinds of content will be used on the site, you can create “content types” to match. When you do the initial discovery phase with your client, help them break down all the content they want on their site into specific “content types.” 11. Understand User Roles and Permissions Once you have a grasp of all the modules you’ll be using, as well as the content types, then you may specify what types of users (“roles”) you’ll have on the site and which permissions those roles have. You can configure user permissions via: http://example.com/admin/user/permissions The default Drupal user roles are as follows: anonymous user – a user that is not logged in authenticated user – a user that is logged in and has an account on your Drupal site admin user – a user that is logged in, has an account on your Drupal site, and has rights to administer the website 12. Understand Basic Theme Development Concepts There are hundreds of themes available for free download, paid download, or for unique customization from a design comp created by your web designer. If I’m doing a custom theme, I usually use a modified version of the Framework Theme as a base, with all additional graphic design elements ( PNGs , backgrounds, icons, photos and logos) coming from Photoshop and with CSS edits directly to the stylesheet. A theme is made up of these major parts: *.info – has information about the different regions of the page; consider adding new sections such as a “Content Top” section or a “Bottom Footer” section if needed page.tpl.php – the default template for pages node.tpl.php – the default template for how a specific node will display; custom nodes can be created by creating a file using the following naming convention: node-[nodename].tpl.php (e.g. node-blog.tpl.php or node-product.tpl.php ) template.php – pulls the layout together and calls different functions into the overall layout of each page style.css – all custom CSS for the site There may be some additional *.php files such as block.php and/or comment.php if you or the theme designer decide to specify the layout of those elements. 13. Know Some Places for Getting Free Themes Sometimes your client will be able to find a theme that fits most of their needs, and you can do additional customizations to the CSS. If they would like to download public themes, I typically encourage clients to visit the following links. Free Themes: http://themegarden.org/drupal6/ http://drupal.org/project/Themes http://drupal2u.com/ Premium Themes: http://www.cmsquickstart.com/drupal-themes http://fusiondrupalthemes.com/browse 14. How to Install a Downloaded Theme To enable a downloaded theme, first move the unpacked file into a new directory: /sites/all/themes/[themedirectoryname] Next, choose your theme from Administer > Site Building > Themes or by navigating directly to this URL: http://example.com/admin/build/themes/select Choose which theme you would like as the Default and which ones you would like to have Enabled. If a theme is Enabled, it means it can be set as the Default. 15. Don’t Forget to Set Up Basic Site Information Some standard information gets collected and displayed on your basic Drupal setup, such as the name of the website, the e-mail address for any system messages, the slogan, mission statement, and text in the footer message. This information can then be called using the Drupal API in case you need to print them out on certain Drupal pages. You can set and view these through Admin > Site configuration > Site information or by navigating directly to this URL: http://example.com/admin/settings/site-information 16. Always Set Up Clean URLs Drupal, by default, uses unfriendly system URLs to refer to your web pages. For example, navigating to a page may look like this: http://example.com/?q=node/1 . Not very user-friendly or indicative of what the content is. It is also not very good for SEO. To solve this issue, enable Clean URLs by going to Administer > Site configuration > Clean URLs or navigating directly to the following URL: http://example.com/admin/settings/clean-urls 17. Install a WYSIWYG Module Your clients will demand an interface that allows them to compose their content easily and without knowledge of coding. Creating content should be as easy as writing and sending an email. There should be a GUI for doing things like bolding, italicizing, underlining text, creating bulleted lists, creating hyperlinked text , and so forth. I’m recommending the CKEditor module for handling WYSIWYG functionality. It is the successor of the popular FCKEditor. Try out the demo and read the project’s documentation for more info. CKEditor comes in two parts: A “wrapper” module: CKEditor for Drupal The main required component, which you can download directly from the CKEditor website 18. Deploy with a Contact Form Most of our clients require some sort of web form, and it’s usually going to be a contact form for their site users to be able to message them. Drupal core has a pre-built contact form, and it’s best to enable it and make necessary changes to it prior to deploying the Drupal site. First, you must enable the Contact module , which is an optional core module. Then, to configure the contact form, go to Administer > Site Building > Contact Form or navigate directly to: http://example.com/admin/build/contact Notice in the image above that you may edit many parts of the contact form, such as the different types of contact form categories available and different addresses to send a message, depending on its category. This could be very useful for multi-user sites, where you can have a category regarding advertising forwarded to the sales team and a question about technical support forwarded to the IT guys. 19. Manage Your Navigation Menus Drupal comes pre-configured with three menu blocks: Navigation links – provided by Drupal and the main interactive menu with personalized links Primary links – major sections of the site, typically like the tabs across the top of the page Secondary links – an additional set of links for items like legal notices, contact details and other less-important navigational elements You may manually edit these menus by using your Menu manager via Administer > Site building > Menus > List menus or navigating directly to: http://example.com/admin/build/menu/list Alternatively, you can add a new node, and from the data entry page, you may add that new node directly to the menu: just specify the desired menu and the text to appear within that menu. 20. Learn to Love Views Using Views gives you a terrific amount of control over the tedious task of creating displays of your information. Using the Views editor, you can filter your available nodes and publish them in various styles such as tables, grids, or lists, and sort them in the manner of your choosing. For example, from a content type of “people”, you can use Views to specify any of the following from the same set of records: A grid of faces that is an additional “block” to be placed on a Team page An alphabetical list by name and department on a Departments page An office-only list of e-mails and phone numbers on an Administration page I recommend reading this tutorial called A Beginners Guide to Using Views . Also, the Getting Started with Drupal: A Comprehensive Hands-On Guide walks you through the creation of a view. 21. Partner with a Hosting Provider You Trust Obviously, if your hosting provider does not have experience or a reputation in hosting Drupal, consider switching to a host with excellent tech support and a responsive team that understands your concerns, as well as those of your clients. I use Nexcess for all of our Drupal sites — their control panel is easy to use, they’re knowledgeable, their tech support team responds quickly, and they are set up to grow along with you. 22. Create a Checklist for Launch After you’ve configured your modules and fine-tuned your chosen theme, finished your data entry and user testing for quality assurance, it’s time to soft-launch the website. Here is my final checklist of items to review prior to the launch. Cron job Ask your hosting provider to help you set up a cron job. They will direct you either to a back-end manager or they will walk you through the process. Drupal’s default cron script is located at /cron.php . Rewriting htaccess Specify if your site will be something like this: www.example.com or something like this: example.com . These are considered different “entities” by search engines and the process of creating a main (canonical) URL is an ongoing challenge. Setting the base URL If, after you rewrite htaccess, you find yourself still having issues, review the site’s base URL. Seek this line in settings.php : # $base_url = ‘http://www.example.com’; // NO trailing slash! And change the $base_url variable assignment to your own website. Performance caching Once live, your website may benefit from caching to improve page response times . Use the caching function to help reduce calls to the database with every single user, on every single page. If you turned it off during development, turn it on again by going to Admin > Site configuration > Performance or navigating directly to: http://example.com/admin/settings/performance Conclusion There is a lot of ground to cover when you’re first getting accustomed to using Drupal. Find the types of functions that most match what your clients ask for, and then find a set of well-supported modules (multiple downloads, responsive maintainer) to use in your toolkit for deploying content management systems. Related Content CMS Showcase: 31 Remarkable Drupal Powered Websites Getting Started with Drupal: A Comprehensive Hands-On Guide 10 Drupal Modules You May Not Know About Related categories : Web Development and WordPress About the Author Monica S. Flores is a web developer through 10K Webdesign , which focuses on websites for progressive organizations and membership groups. She founded a member community for success-oriented women ASuccessfulWoman and one of the first green business directories by and for women GreenBusinessWomen . Contact her through Twitter .
By admin with 0 comments
ADDED NOV 22, 2010, UNDER: WEB DESIGN
Last week we went through the process of designing a detailed website design for Pinewood Forest. This week we’ll code up the Photoshop concept into a working web page. See how the design is exported into individual images, how the HTML skeleton is put together and how the CSS coding replicates the styling from the concept. In case you missed last week’s tutorial , here’s the design we’ll be building. The site features a large static background image that allows the main content to scroll over it, and the content itself is broken up into key focus areas with photography used to draw in the user. View the Photoshop tutorial Exporting the background images The first step of the build process is to chop up the concept into individual images. Some sections of the design can be replicated with pure CSS, but other areas will need to the help of a background image. The main portion of the design is the large photographic background image. With careful compression the filesize can be kept fairly low despite its huge size. Due to the design having a fixed background image, the content will have to scroll over the top of it. This means elements like the logo will need to be exported with transparency using the PNG-24 file option. The main content background also has a subtle element of transparency, so this also needs to be exported as a PNG graphic. The background will be split into three sections, the top, the bottom and a repeating section from the middle. The final collection of images is made up of a mix of PNG and JPEG files. Some are small images that will repeat to form a textured background, others are text replacement images for titles and headers. The HTML structure The index file is started out with the core HTML structure. A Strict doctype is used to maintain good practices, followed by the HTML which contains the page title and link to the CSS stylesheet. A div is added to the to contain all the following page structure. The design begins with a header div to contain the logo and navigation items. The logo itself is laid out as an image file inside an anchor. The title attribute inside the anchor provides a description for the user where the link will go, and the descriptive ALT attribute in the image tag describes the image as the Pinewood Forest logo for users without images enabled. The good old is the universal element for navigation menus as it accurately depicts the menu system in plain HTML form. In the design concept the logo sits between the navigation items, but to keep the HTML structure clear the two elements are separated completely. Later the CSS styling will move the individual elements into place to replicate the design concept. Following the header is the main content area. To keep the HTML structure clean and tidy this is all contained in its own div element. The large feature area appears first on the homepage, so this is contained in a child div so it can be accurately positioned on the page. The first main heading on the page is the ‘Explore the forest’ text, so this is given status. A class of btn is added to a paragraph element in the feature section so this particular element can be transformed into a button graphic with CSS later. The next level heading for the intro to the content area is a . The main content area itself is split into two columns, the larger of which is created as a div with the ID of main. Inside this div the main body copy is written out as individual paragraph elements. Don’t forget to convert links into HTML anchors and switch out any characters such as the ampersand to HTML entities. At the bottom of this column is an upcoming events section. The events list fits perfectly into the Definition List element, seeing as it compares two related elements – The date and the actual event. Using tags inside the definition list will allow unique styling of certain elements with CSS. The smaller of the two columns is laid out as another div, this time with an ID of ‘side’. The sidebar contains three mini-features, each including an image heading and description. Because each image contains text inside the actual image, the text content is replicated in the ALT attribute to keep everything accessible. At the bottom of the page the content div is closed, then a short footer div is added to contain a simple back to top anchor. At this stage the design can be previewed without any CSS styling and the content should be clearly readable with the HTML elements creating a natural hierarchy. Validating the code will ensure our HTML is in tip-top shape without any errors which could affect the styling of the page when CSS is applied. Styling with CSS Now the HTML structure is in place it’s time to style up the design with CSS. The first line in the stylesheet is a simple reset to remove any default browser styling, then the global font styling is added to the body. Also added to the body is the large photographic background image. Setting this image to ‘fixed’ at the top center will allow it to stay in place while the rest of the content scrolls over it. For those without background images enabled, or those with supremely large monitor resolutions a background colour is also added so the page is still legible on a plain dark blue background. The main container area is given a 960px fixed width and centred up using the common margin: 0 auto; declaration. The elements that make up the header are then moved into place and styled accordingly. The top section of the content panel is added as a background image to the bottom of the header div. The unique positioning of the logo and navigation menu is created using a mix of negative margin to align the elements according to the concept. Because the navigation items sit as either side of the logo the CSS3 nth-child property is used to target each individual list item and add an appropriate margin. The font is then styled to match the concept using letter-spacing to match the tracking used in the Photoshop design. The height of the content div will vary on each page, so a repeating background image is set to allow the content panel to expand without limitation. Left and right padding is also added to keep the page content away from the edges. Because the content area will contain two floating columns, the overflow:hidden; declaration is used to ensure these floats will be cleared. Relative positioning on the feature section allows the content to be moved exactly into place, and a touch of negative margin compensates for the padding on the parent content div to allow the feature area to sit flush with the edges of the page. Simple image replacement is used on the h1 to display the image graphic in place of the standard HTML text, but the smaller paragraph is styled entirely with CSS font styling. The small button is another element that is converted to an image using the image replacement technique. The main div is the wider of the two columns at 536px. The width of ‘main’ plus the width of ‘side’ along with the margin between them equates to the width of the parent content div minus its left and right padding. General font styling is added to the h2, anchors and paragraph elements, then the definition list is styled to match the layout in the design concept. The definition title is transformed into the date icon by giving it a specific width and height along with a grey background. The font styling displays the date as large white text, and the span is made slighly smaller so the month sits neatly underneath the larger number. Floated alongside the definition title is the definition description which contains the header and paragraph. One fancy CSS trick here is the visibility:hidden; declaration on the more info span. This is set to remain hidden until the description is hovered with the mouse, the span will subsequently turn to visible to display the ‘View more info’ link. Each aside element is given the textured watercolour graphic as a background, then the image headers are moved into place with a touch of padding. The following font styling is automatically added by the CSS set on the content div, which is continued down through each child element unless it is altered with specificity. The footer div is given a background image to close off the content panel and padding is added to accommodate this image. The back to top link sits outside the content div, so new styling for the anchor is needed. Because this link sits on a dark background rather than the light background the colours need to be altered from the main link styling on the rest of the page to keep it legible. This leaves us with a completely styled design as a fully working webpage. But we’re not finished quite yet! Firefox, Safari and Chrome have no problem rendering the CSS3 nth-child property, but Internet Explorer fails as usual. A couple of lines of jQuery soon sort that out though. The jQuery library and an ‘iefix.js’ Javascript file is linked from the HTML document. jQuery supports and implements the nth-child property without any problem even in Internet Explorer, so the appropriate margins are replicated from the CSS stylesheet in jQuery. Our webpage is now fully working in the latest Internet Explorer, Firefox, Safari and Chrome. The use of PNG graphics scare the pants off earlier versions of IE, but those could soon be fixed with a separate IE-only stylesheet and the help of the Belated PNG fix . I’d rather tear off my fingernails than fix IE bugs all day, so I’ll leave that task for you 
View the finished Pinewood Forest webpage
View the finished Pinewood Forest webpageBy admin with 0 comments
ADDED NOV 15, 2010, UNDER: WEB DESIGN
In part one of this website build project we’ll go through the process of creating a detailed concept for an outdoors site. The design is based on a range of textures and a mix of blue and greys to create a stylish and sophisticated website for ‘Pinewood Forest’. View the Pinewood Forest design concept Pinewood Forest is a fictional area of natural beauty and visitor attraction. The aim is to mock up a web design to showcase the forest, what it has to offer and inform visitors of upcoming events. We’ll be creating the design based on a sophisticated style with subtly textured elements and serif fonts. The background will feature a large static background image that allows the main content to scroll over it, and the content itself is broken up into key focus areas with photography used to draw in the user. In this first part of the site build we’ll go through the Photoshop stage and mock up the design concept for the homepage, stay tuned for next week’s tutorial when we’ll finish off the homepage into a fully coded webpage in HTML and CSS. Begin by creating a new document. I tend to create a canvas size at a typical large monitor resolution. With this design featuring a large background image we want to accommodate even the larger resolutions used by 24 or 27 inch monitors. Transform a marquee selection to 960px and drag guides to identify this portion of the page, this will be where the main content will be contained. Import a photograph for use as the large background image and scale to fill the majority of the screen, but leave a thin margin at either side. Drag a guide to identify a typical fold line for a large monitor resolution, say around 1920px. This particular image I have downloaded from ThinkStock , which was also the source of the range of blue and grey tones. Add a Layer Mask to the photograph and use a range of Watercolor brushes to fade out the edges. Drop the opacity of your brushes to create a cool layered and textured appearance where the image blends into the background. Create a logo for the forest and place it centrally in the header area of the page. Adjust the sizing of the fonts so the focus is on the word Pinewood, but align the two words by increasing the tracking on the word forest. A mix of sans-serif (League Gothic) and serif (Clarendon) works really well to combine the styles of modern and traditional. Add a Drop Shadow and Gradient Overlay layer style to the logo. Both effects add depth by lifting the logo from the page and giving it more prominence. Keep the contrast between the gradient and the opacity of the shadow low to maintain subtlety. Type out some navigation items to sit either side of the logo to form a menu. The serif Georgia font is a web safe alternative to the Clarendon typeface used in the logo, without needing any special web font treatment. The tracking in the design concept can be matched with CSS letter-spacing. Draw a large rectangular selection to outline the content area within the 960px guides. Fill this rectangle with a light grey colour selection from the logo’s gradient. Add a subtle Noise texture (Filter > Noise > Add Noise) of around 2.5% to give a tactile feel to the content panel. CMD-click the layer thumbnail of the content panel, then right click and select Transform Selection. Adjust the width and height to 40px smaller in size and fill the selection with white. Add a subtle Drop Shadow to lift the white panel from the grey border. Use a selection of paint roller brushes to rough up the edges of the grey border by painting onto a layer mask. Load the selection of the white panel and fill this area black on the layer mask to render it transparent, then drop the opacity of the grey border to around 60% to allow the photographic background to show through. Import a photograph to use as a background of the main feature area on the page. Draw a thin rectangular marquee selection to match the content panel, inverse the selection and delete out the excess from the photograph. The colours of the photo don’t really match the overall scheme of the website so make some adjustments with the Curves tool. Bend the Red and Green channels into very slight ‘S-bends’, then tweak the blue channel with an inverted ‘S’ shape. Decrease the saturation of the image to tone down the colours, the result is a colour cast on the image that matches the cool blues and greys of the surrounding design. Use one of the paint roller brushes from Colorburned to paint in a background for some text in the feature area. Tweak the size and tracking of the title text to create a cool typographic header, then set the following paragraph as typical 14px body text. Similar layer styles to those used on the logo will help boost the impact of the header. Add the grey to white gradient overlay and subtle drop shadow. A clear call to action button will give casual browsers clear direction of where to go next from the homepage. Draw a thin rectangle and fill it with a blue colour swatch from the scheme. Add a subtle noise filter to rough up the button a little, then use a 1px pencil setting on the Eraser tool to clip a little notch in each corner. Add an Inner Glow to the button using a slightly darker shade of blue. Set the options to Normal blending mode, 100% opacity and adjust the size to suit. Also give the button a 1px stroke using a slightly lighter shade of blue. Finish off the button with a clear and descriptive message, them make sure all the elements of the feature area are neatly aligned. Begin filling out the content area with body copy. Set the intro heading in a slightly larger font size and allow it to span across the full width. Align the smaller body copy into a two column layout, one wide column for the main content and a smaller column for the sidebar. Links will also need mocking up to show how they will be identified. Colour specific parts of the text with a lighter blue and add an underline. In the sidebar we’re going to make three mini-feature areas that would link off to other areas of the site. Each one will include an image, title and short paragraph. Add a textured background using the paint roller brushes then clip a map image down to size within this textured area. Use the paint roller brushes to create another background, this time using the darker blue to create a base for the title text. Trim off any overlapping areas to match the edge of the image. Add a short title to the header graphic and give it the same treatment as the text in the feature section. Group all the elements that form the aside feature in the sidebar, then duplicate the group and edit the content to form three separate feature areas. Underneath the text in the main column we’ll add an ‘Upcoming events’ section. Use the already established font styles from the header and body text to lay out the content, then create a small date area using a selection from the grey border. Each event is laid out with a date icon, title, more info link and short description. We can plan at this stage how this layout could be coding up with the relevant HTML elements, but you’ll have to wait until next week to see the step by step! Here we have the finished concept. Next week we’ll go through the process of coding it up with HTML and CSS. Remember we’ll be keeping that large background image static so the outer portion of the image won’t be seen by most monitor resolutions. This also means all the centre content will have to scroll over the background image, so we’ll be calling upon lots of PNG-24 graphics to use their alpha transparency.
By admin with 0 comments
ADDED OCT 27, 2010, UNDER: WEB DESIGN
Textures are commonly used in web design and other types of graphic design, and fortunately they are relatively easy to work with. You can use a photograph to create texture, but Photoshop brushes also present a simple way to add texture to your work. While there are a lot of Photoshop brushes available for creating texture, there will be times when you’ll want to create your own. By creating your own brushes you’ll have more control over the final outcome and once you have the brushes completed you will be able to re-use them whenever you want to quickly add texture. We recently released a set of 25 grunge texture brushes for Vandelay Premier members and in this tutorial I will go through the same process that was used to create those brushes. What you will need to follow the tutorial: A few textured images (preferrably at least 2500 pixels by 2500 pixels). Photoshop The process we’ll be using will combine a few images with minor adjustments to create our brush. The images I’m using are from the Pavement Textures – Part I and Concrete Textures sets at Vandelay Premier. If you’re not a Vandelay Premier member you can substitute other images that you have available and the process will be very similar. Here are the images we’re using: Ok, let’s get started. Step 1: Creating the File Go to File – New and create a new file that is 2500 pixels by 2500 pixels. This is the maximum size of Photoshop brushes, so that is what we will start with. All of our images are 4000 pixels by 3000 pixels, so we have plenty to work with. We’ll create the brush in the maximum size, because it can always be easily reduced to a smaller size whenever needed. Step 2: Add the First Image Now that we have our photos and our new file opened, we can get started creating something useful. Start by desaturating the image (go to Image – Adjustments – Desaturate) to take the color out of the photo. After being desaturated it will look like this. Now we want to add the image to our new file, so go to Select – All, and the Edit – Copy and you’ll have the image on your clipboard. Then go to the new file that you just created and go to Edit – Paste. That places the image in a new layer, but we will want to position it. Go to Edit – Free Transform and drag the image to reposition it. I want to get rid of the edges so we’re working mostly with the middle of the photo. After re-positioning it looks like this. Step 3: Add the Second Image Now take the next image, desaturate it, copy and paste it on top of the layer we just edited. Again, use free transform to position it how you want it. My image now looks like this. The second image that we pasted in is now covering up the first one, so we’ll want to change the blend mode. Double click on the second image’s layer in the layer’s palette to bring up the layer style options. You can experiment with some different blend modes, but I am going to be using Soft Light at 100% opacity. The image now looks like this. It’s not a huge change from the image with just one layer, but when viewed at full size the second image does add some additional texture. Step 4: Add the Third Image Next, desaturate the third image, copy it and paste it on top of the other two images. Use free transform to align it, then double click on the layer in the layer’s palette to open the layer style options. On this layer I am setting the blend mode to overlay at 100% opacity. The image now looks like this. Again, this image also adds a subtle change. The first image is the most noticeable, the other two just add some additional texture and character. Step 5: Adjustments We’ll now make some adjustments to the image that will improve the outcome of our brush. Right now the image is rather light and there are only a few dark spots. We’ll darken it up a bit and the brush will still be very versatile, it will just be easier to use with darker colors and shades. There are a few different ways to darken an image. I often use levels, but on the grunge texture brush set I used brightness and contrast instead. So go to Image – Adjustments – Brightness/Contrast. I’m going to set the brightness at -150 and the contrast at 100. Note: if you are using different images you will need to experiment because these specific numbers will not be relevant to you. That is really the only adjustment we are going to make to our image. You can also experiment with other adjustments or filters if you like. This is how our final image looks. Step 6: Create the Brush Now that we have our image ready it is very easy to turn it into a brush. Go to Edit – Define Brush Preset and you will be able to name your brush. You can now use your brush! Here are some examples of how it will look when simply applied with color. To download the full set of 25 grunge texture brushes please visit Vandelay Premier .
By admin with 0 comments
ADDED OCT 21, 2010, UNDER: WEB DESIGN
After Effects is Adobe’s product for creating motion graphics and visual effects. It’s amazing what you can create with After Effects and some knowledge, or in this case with a little help from some tutorials. Here we’ll feature 50 of the best tutorials for creating amazing work with After Effects. Disintegration Create a Sci-Fi Movie Title Sequence Jumbotron Column Shatterize Count Down in Style with Clockworks – Custom Effect Blueprint Reveal Leap into Hancock-Style Super Jump Effect Learn How to Create an Advanced Jumper Effect Recreate the Matrix Chopper Scene Spot Focus Tilt Shift Simulate a Glowing Neon Light Sign of Your Logo Freeze Your Logo with a Snowy Transitions Give Your Video a Pencil-Sketched Look Flashlight Titles Depth Charge How to Create a Surreal Outer Space Nebula Create a Gas Giant Planet Scene in After Effects Advanced 3D Planets Creating an Eclipse in After Effects Part 1 and Part 2 Colorful Universe Put Out Realistic Candle Smoke Simulate an Advanced Muzzle Flash Track Your Golf Swing Form Like a Master Animating Spray Paint and Stencil Effect in After Effects Glass Orbs Spray Paint and Bullet Holes Holomatrix Create a Heart Monitor with Expressions Lightning Strike Energy 3D Light Casting Create a Photo Montage with After Effects Energetic Titles Frosty Breath Audio to Animation 3D Motion and Position of Text Characters Metallic Text with After Effects Flaming Chrome Text in After Effects Shattering Glass with Adobe After Effects Snow Globe in After Effects CS4 Shutter Streak Growing 3D Vines Animating Birds with After Effects Add a Vignette with Ease – Custom Effect Writing with the Clouds Put Together a Realistic District 9 Composite Create Harry Potter Titles Create a Palmticular Tree Create a Leaf Growing Network TV ID For more tutorials please see: Photoshop Tutorial Hall of Fame Top 10 Sites for Illustrator Tutorials 35 Excellent Adobe Fireworks Tutorials 20+ Tutorials for Working with Photoshop’s Tools 35 Tutorials for Mastering Photoshop Brushes
By admin with 0 comments
ADDED OCT 18, 2010, UNDER: WEB DESIGN
In this tutorial, we’ll be using Photoshop CS3’s 3D rendering features to recreate something close to Neytiri, the lead female character of the Na’vi race. In the James Cameron movie – Avatar. Just to point out, Photoshop CS4 offers more a robust 3D features; one of which is to paint directly on 3D models or objects. CS3 ’somewhat’ doesn’t have these capabilities among other things. However, we’ll get around this in our tutorial using a technique that hinges on the manipulation of texture maps of the 3D model. Scenes from the Avatar movie: Step 1 I started off with the free 3D program – Daz Studio 3. Loading the popular Victoria 3 model (there’s also the Victoria 4 model which offers higher resolutions), from Studio> People> Victoria. The face here will be the main focus on manipulation for an Avatar-like character. Step 2 Selecting the face with the mouse, Go to the Pose/Animate Tab, and click on the Parameters tab for the settings of the ‘Morphs’. Below, are the adjustments made for a face of a Na’vi humanoid. Unfortunately, there were no Morphs available for the nose. This is the closest we can come to recreating a Na’vi face. Yes the ears needs to be a little higher and the nose a lot flatter. Like I mentioned earlier, there were no Morphs for the nose. Of course, this tutorial is primarily on how to paint or manipulate 3D objects/models in CS3. Also, I chose not to include any props (items such as hair and ferns for clothing) to the model. This is because when exported, they are rendered badly in Photoshop as they appear shredded. Step 3 Next, click on the PowerPose tab to adjust the posture of the model.This is something easy to do by just a click on the ‘points’ on the body and dragging in the direction desired. Below, I effected just a simple walking pose; with the positioning of the figure done, the model is all set to be exported in u3d format. Step 4 Now to export the model in u3d format. Go to File> Export and in the export dialog box, name your model and save it as an u3d file. Do not save the model as an obj file as it does not come which the texture maps needed. That done, accept the Export settings. Step 5 Open the u3d file in Photoshop and it will be loaded automatically into the main document from size view. To rotate our model, double-click on its thumbnail in the Layers Palette to make it active in 3D Transform mode. Step 6 That done, a set of 3D tools appears on the menu bar – Options bar to be precise. Select the Rotate Tool (R) to turn the model in a front facing position. Hit Enter to apply the transformation. Step 7 For the skin of the Avatar, download any zebra pattern texture and load it into Photoshop. Enter into the Free Transform mode (Ctrl+T) and use its Skew and Distort Tools to mash the stripes of the pattern into an adjacent angle as possible. Head to Filter> Liquify and in the Liquify window, use the Bloat Tool to create uneven surfaces on the pattern. Step 8 After applying the Liquify Filter, select the Rectangular Marquee Tool (M) and drag it vertically at the right side of the zebra pattern. With the selection made, press Delete to remove the little portion selected and then, press Ctrl+D to clear the selection. Below is a straight line on one end of the pattern. Step 9 Duplicate this layer and use the Flip Horizontally option of the Free Transform Tool to position the pattern copy in the opposite direction to the original. Press Ctrl+E to merge the layers into one. Step 10 Press Ctrl+I to invert the colours of the zebra pattern. This is to make more white stripes visible than the black ones. For we need the ‘whites’ for our skin. Also keep this window open or minimize for later use. Step 11 Now for the more interesting and crucial part of this tutorial. Below the model’s thumbnail in the Layers Palette is a list of textures for various body parts. Double-click on ‘ texture 1_0 ‘ to bring up the texture map for the main body. Duplicate the main texture, ‘background’ as we dont want to make a mistake on the original texture that would prove irreversible when changes are made. So working on a copy is a safe bet. Below is the texture map of the main body all splayed out in a rather ‘freaky’ manner. Step 12 Press Ctrl+U for Hue/Saturation and set the Hue to 180 for a bluish colour. The result: Step 13 After the changes are made, press Ctrl+S to save. Close the texture window and voila! The model in the main window is automatically updated. Step 14 Double-click on ‘ texture1_2 ‘ under Textures in the Layers Palette and add the same blue hue as with the body. Select the Burn Tool (O), with an exposure of 15% and darken lightly around the edges of the face. Also, use the Clone Stamp Tool (S) to copy lighter portions of face while holding the ALT key and releasing it. Make copies over the nose to make it look flat like a Na’vi’s. Step 15 Select the brush Tool (B), and set the its opacity 75% . Change the foreground colour to pink and paint the nose and the ear areas. Step 16 Go to the zebra pattern window and drag the pattern into the texture window. Set the Blend mode of the pattern layer to Soft Light and opacity 65% . Save and close the window. Step 17 Double-click on ‘ texture1_8 ‘ to display the eye texture and then duplicate it. Select the Elliptical Marquee Tool and make a circular selection over the iris. Step 18 Paint with a yellow brush within the selection. Step 19 Change the layer’s Blend mode to Overlay. The result of our image so far: Step 20 For the luminous dots of the Na’vi, enable the face texture once again and with a Hard Round brush, make dots over the face in a new layer. Notice I added a swirl-like pattern as well -just trying to be creative here.You can play around with the face adding your desired styling. The lips as well was painted with pink. Double-click the layer and for a Layer Style and select an Outer Glow style and increase its Spread to 4 and Opacity to 85% . The result shows the markings nicely adapted to the contours of the face but however, its rather dull in appearance.This will be fixed when the brightness of the image is increased eventually. Step 21 Over the 3D layer, create a Levels Adjustment Layer by going to Layer> New Adjustment> Levels. Make the following adjustments with the sliders as shown below: Now isnt she a beauty? There’s actually controls to change the lighting of the model in the 3D Transform mode but these do not offer parameters to adjust their intensities or orientations. This is why I stuck with the Levels command instead. Step 22 The skin of the Na’vi is unacceptably to smooth and so it must be roughen up a little by creating a texture over it. Download this stone texture from freetextures.org and have it dragged into
By admin with 0 comments
ADDED OCT 10, 2010, UNDER: NEWS,WEB DESIGN
With the advent of affordable digital cameras and photo-editing software such as Photoshop, what used to be an expensive profession is more and more accessible to casual individuals. There are many tutorials and guides on the web to help you become a photography master. This is a collection of 50 of the best tutorials and guides we could find for helping you capture better digital photos. 1.
No hay comentarios:
Publicar un comentario