background preloader

14 Most Useful Web Design Cheat Sheets

14 Most Useful Web Design Cheat Sheets
A well rounded web designer’s day is spent immersed in multiple graphic design programs and writing front end code. All of this moving from one environment to another can make it hard to memorize such things as hot keys and shortcuts for each. This is where cheat sheets come into play. Here are 14 of my favorite cheat sheets. Photoshop Adobe Photoshop CS4 Keyboard Shortcuts Adobe Photoshop CS3 Keyboard Shortcuts Photoshop Lasso Tool Cheatsheet Adobe Pen Tool Cheatsheet CSS Cheat Sheet (V2) Mac OS X CSS Cheat Sheet (X)HTML Elements and Attributes HTML/XHTML in one page JavaScript Frameworks jQuery 1.3 Cheat Sheet mootools 1.2 cheat sheet Prototype 1.6.0.2 Cheat Sheet Flash Adobe Flash CS4 OS X Keyboard Shortcuts Flash CS3 Cheat Sheet About the Author Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. Related Posts 1934 shares 8 Must-have Cheat Sheets for Web Designers and Developers Read More 2759 shares Photoshop CS6 Cheat Sheet

15 sites web developers and designers should know Creating a good website isn't an easy task, but there's a few tools that can definitely make your developer or designer life easier. In this article, I have compiled 15 extremely useful website that any web developer or web designer should have bookmarked. ColorCombos When designing a website, one of the firsts (and most important) steps of the process is to choose a color scheme. Color Combos allow you to browse thousand of different colors combinations for getting inspired for your upcomming design. LIpsum Who doesn’t know the extremely popular Lorem Ipsum text? What the font? You just saw a logo or website using a particular font and you enjoyed it. ConvertIcon Favicons are a must have for any website, mostly because on modern browsers as such as Firefox, it is displayed along with the site name in tabs. BgPatterns background Patterns is definitely one of the current webdesign trends. HTML Encoder Do you display code on your website? Test Everything Sprite Generator Load Impact IconFinder

12 Extremely Helpful Photo Editing App Cheat Sheets | The Photo Argus - A Photographer's Resource Resources by Bill Jones 10inShare When working in any photo manipulation package, and especially when first starting out, it is very important to develop good habits. Adobe Photoshop CS4 Keyboard Shortcuts Adobe Photoshop CS3 Keyboard Shortcuts Photoshop Lasso Tool Cheatsheet Adobe Brush Tool Cheat Sheet Adobe Pen Tool Cheat Sheet Photoshop Elements 7 For Dummies Cheet Sheet Photoshop Toolbox Reference Adobe Photoshop Lightroom Cheat Sheets Photoshop Black and White Cheat Sheet Apple Aperture Cheat Sheets Gimp Quick Reference Card Photoshop Secret Shortcuts from Web Designer Wall If you have any other cheat sheets you would like to share please leave a comment below. Like Our Site? 10 Comments Henry said:Very useful. Leave a Reply

MySQL Commands This is a list of handy MySQL commands that I use time and time again. At the bottom are statements, clauses, and functions you can use in MySQL. Below that are PHP and Perl API functions you can use to interface with MySQL. To use those you will need to build PHP with MySQL functionality. To use MySQL with Perl you will need to use the Perl modules DBI and DBD::mysql. Below when you see # it means from the unix shell. To login (from unix shell) use -h only if needed. # [mysql dir]/bin/mysql -h hostname -u root -p Create a database on the sql server. mysql> create database [databasename]; List all databases on the sql server. mysql> show databases; Switch to a database. mysql> use [db name]; To see all the tables in the db. mysql> show tables; To see database's field formats. mysql> describe [table name]; To delete a db. mysql> drop database [database name]; To delete a table. mysql> drop table [table name]; Show all data in a table. mysql> SELECT * FROM [table name]; Show unique records. Sum column. or

8 useful sites for web developers Min.us: The easiest way to upload images Any developer, designer or webmaster have to share images online with clients and co-workers. Min.us is an all new service that allow you to upload images extremely easily: Just drag and drop them into Min.us and the image will be saved on their servers. A short url will be automatically created so you can share it across the web.» Visit Min.us Wirify: Transform any web page into wireframes Wireframes are extremely useful when designing a website. CSS Resetr: View and compare CSS resets CSS resets are a must have in any stylesheet in order to render differences between browsers. Head JS: Speed up your site with 2.30 kb of Javascript Head JS is a simple and light (2.3 kb) script that will make your site faster by loading other scripts as images. Copy Paste Character: Use special characters with ease Special characters are often a pain to deal with, because they’re not on your keyboard, and because you don’t know the related ASCII code.

100+ Free Open Courseware Links for Web Designers | eLearning Gurus Graphic and Web Design Tools Whether you are just starting out or have plenty of experience under your belt, these free online resources will help strengthen your knowledge of many popular graphic and web design tools. Flash. Learn to use Macromedia Flash in this course that will culminate with your having created one fully-functional Flash project.Weekly Web Design Class. Go beyond simply learning HTML to develop a deeper understanding of what makes a great website with this class.Learn and Apply HTML. Media Arts A perfect combination for web designers–technology and art–these media arts courses will polish your skills to help produce top-notch websites. Fundamentals of Computational Media Design. Art From learning about the art of color to studying art and technology, these art classes will help you create visually appealing websites. Feeling and Imagination in Art, Science, and Technology. Writing and Editing Creating an effective site relies on more than just the visual aspect. Technology

HTML5 Canvas Cheat Sheet There are cheat sheets for just about anything out there but I couldn't find one for the HTML5 canvas element, so I decided to do something about that, mostly for my own sake but if other people find it useful that's just all the better. The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla's examples). So, it's basically just a listing of the attributes and methods of the canvas element and the 2d drawing context. Choose between a 2 page PDF document or a PNG file. Corrections and comments are welcome!

useful online code editors Amy Editor Created in 2007 by Petr Krontorád, Amy Editor is an advanced editor with a look and feel of a Mac. Amy Editor features lots of useful options, such as line numbers, syntax highlighting, snippets for more than 20 languages, collaboration, and more. Amy can edit, save and export files. It can also manage projects. » JSBin As you can guess, JSBin is an online text editor primarily focused on Javascript. » Bespin Using HTML5 quite intensively, Bespin is a new project from Mozilla Labs. » Kodingen Kodingen is another great online editor, probably one of the most powerful tool on this whole list. » EditPad Unlike the first few editors featured in this post, EditPad is simple and minimal. » TypeIt TypeIt isn’t a code editor and I hesitated to feature it in this post. » PractiCode PractiCode is a very basic code editor. 9ne »

CSS Code Snippets : 15 Wicked Tricks For all it’s many advantages, sometimes it’s the little things that CSS layout makes difficult that really get to you. A logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also because CSS has a lot of ways to position every element you have. snippets on how to avoid easy pitfalls when creating your CSS layout, some of the following snippets are cross browsers while others are not. This is the first part in this series as there are SO MANY good tricks out there and if you see an easier or better methods, then post a comment below or email me so we add it in this series. 1. By Drew Douglass. 2. “Internet Explorer 6 is the only browser that recongizes the “* html _____” selector and thus is the only browser to read the hard-set height. of “height” as a min-height. href=" Walsh Another way to do this and make it valid CSS: 3. 4. html_files_with_a_user_stylesheet/">Roger Johansson 5.

Ubuntu Cheat Sheet With the Ubuntu 8.04 release a few days away, there comes a time when one needs an end-all reference to the system. The time is now, and if you're an Ubuntu user and liked the original cheat sheet, then do we have a surprise for you: Click the preview above to download your PDF copy. This sheet is free to modify and redistribute for your own needs; we just ask that you keep the FOSSwire logo on the page. License: Creative Commons Attribution-Share Alike 3.0 Unported. If you haven't seen the previous sheet or would like one with more general Linux and Unix commands, see the original. Translations: As always, we're open to more translations and fixes. Jacob Peddicord - Jacob is a web developer, student, and programmer from Ohio.

Related: