Blog logo Icon menu
All
Design
Photography
Tutorials
Promo codes
Freebies
Grid item placeholder
Detecting mouseenter with CSS Animations
While working on a recent project we were amazed to find out that a trivial task as detecting a mouseenter on an element could be such a pain. But yes it was! Unfortunately it was the source of tons of our headaches. I know that most of you reading this would instantly scream out "the heck dude... jQuery: $.mouseenter()!". And yes, you would have been right, jQuery (and probably other) supports it by simulating the event and makes it possible to be used regardless of the browser. However by targeting the modern browsers only, and performance being an essential part of our project, no jQuery nor any other JavaScript library was available - nothing but vanilla JS.   Adding mouseenter event listeners The mouseenter JavaScript event is proprietary to Internet Explorer, and as such has sort of a limited support among browsers - apart of IE, only Opera and Firefox seem to support it with their newer versions, however no support is available with the WebKit browsers - Chrome and Safari. The example below demonstrates how a handler can be added to each element we want this event to be detect on (as you will see in the next example, it can't be delegated). Hovering an element should write a message in the right container. Note that the example won't work on Chrome and Safari, simply because they do not support the mouseenter event.   Delegating the mouseenter event Another downside of mouseenter event, at least for our project, is that it does not bubble and it isn't sent when the pointer is moved from one of its descendants' physical space to its own physical space. In other words it's impossible to delegate this event, or we can't detect this event on child elements while attaching a single handler for it on a parent element. The example below listens the parent element for mouseenter event, and it won't get detected when hovering the child elements. Again, this demonstration won't work on Chrome and Safari.   CSS animations events in help Recently (well, almost a year ago now), David Walsh wrote about Detecting DOM Node Insertions with CSS Animations, quite astonishing and yet simple technique which uses the CSS Animations event types (animationstart in particular) to identify when a node is inserted. Using this technique can be used to detect mouseenter as well. Mouseenter acts in the same way as the CSS :hover pseudo-class, so by applying a CSS Animation on the :hover state of an element and listening to the appropriate animation event we are able to successfully detect mouseenter. The CSS animation has no visual, but strictly functional purpose. The example below demonstrates this, and contrary to the previous examples it also works on Chrome and Safari. The mouseentered animation is applied to the .mouseenter:hover CSS class, and with delegator.addEventListener('animationstart', onMouseEnterAnim, false); we are able to detect when an element has been hovered. And finally, this very same technique can be applied to mouseleave - the mouseenter's counterpart - by adding CSS animation to an element in its normal state instead of its :hover state. And of course, applying two CSS animations on both state at the same time can detect both of them as in the example below. With e.animationName we can determine the exact event. » All demo examples in one page
Dribbble preview
Dryicons on Dribbble
Hey friends, You know that basketball inspired site, the one everybody's talking about, yes, that designer friendly site called Dribbble? As of today, we're there shooting pixels from half court and trying to show off our greatest works. We bet it's not easy to create a site for designers, but the site is amazing and nearly flawless, we're loving it here. Check us out! Enjoy the dribbble!
Screenshot
Web Playground
For quite a while now, we've been making efforts to start up a playground section on our site, a place where we can gather all the things that we create just for the fun of it and share it publicly, a place that can inspire and educate ourselves and the people that come to our site. Last year we've created a few animations that some of you might remember, amongst them the animated header on our Graphics Section and the Christmas Promo Animation on our promo page. We'll try to do our best this year, and continue this trend as a series of creations. For the start of the Valentine's month we've created the valentine flame canvas animation inspired by our Love Heart Vector Graphic. As always, your feedback is very important to us!
Japan tribute
Japan tribute – Japan will blossom again!
Dear friends, We are once again humbled by nature's devastating force. A massive earthquake of 8.9 magnitude hit the Pacific Ocean, near Northeastern Japan on Friday, 11th of March, 2011. The earthquake triggered a massive tsunami which reached 10km inland, carrying houses, buildings, boats and cars with it. Additionally, a state of emergency has been declared at the Fukushima Daiichi nuclear power plant, where scientists and technicians are struggling to prevent a nuclear disaster or epic proportions. Thousands have been declared dead by now, and thousands are left with no electricity and fresh water. We are deeply saddened by this horror and send our prayers and condolences to the Japanese people. However, we're not going to stop there, we are donating money to the Japanese Red Cross Society via Google Crisis Response: http://www.google.com/crisisresponse/japanquake2011.html We are also asking you, our dear users, to do the same, help in any way that you can. To show our support in a more artistic way, we are also sharing the "Japan will blossom again" design, image and source file in EPS format included to use freely. Please don't be just an observer, inform yourself about how and what you can do to help. We all need to be that helping hand. Let's all make sure "Japan will blossom again".   Download
Grid item placeholder
DryIcons Third Birthday Giveaway
Dear friends, With what do you associate November? For us it's not the changing of seasons, or streets full of yellow-brownish leaves, for us November has one significance only- the birth of DryIcons! We are delighted to say that today is DryIcons' 3rd birthday! Going through some of our first blog entries, 3 years ago, I find that DryIcons is still on the right track, the one we assigned ourselves with at the very beginning. One of the things we are most proud about is the fact that we are still enthusiastic about our work, and even more, we love doing it! DryIcons remains one of the few websites that gives priority to independent coders/developers, small design firms and organizations by offering all of our icons, vector designs and web templates Freely, with our Free License. We are also one rare example of a website that creates all of its Works in house, by our own designers. These are the main goals we have set for ourselves 3 years ago, and we are proud we are still sticking to them. Just a month ago we released the new, redesigned DryIcons website. In the last 2 years we have made 2 significant website redesigns and now we can surely say that we will not be doing this in the next 2 or 3 years:) The last website redesign has taken us most of this year, mainly because DryIcons is growing and changing every day, and because besides changing the looks, we also implemented a few very important and significant features, like purchasing single icons, offering vector files of the icons, an awesome shopping cart, ongoing discounts and reduced prices of our vector designs. 3 years ago I asked you to stick around DryIcons because the best is yet to come. Today I invite you to join us on our journey and we still offer only the best. 3rd Birthday Giveaway! Remember: Birthday=Presents. This year we are giving away one iPad to one lucky user and 10 x $100 worth prizes of anything by your choice available at our site (vectors, icons, icon sets). The competition is very simple, tweet and win! Here are the details of the giveaway: When it will be held? The giveaway will be held during the period of November 1, 2010 4:00 PM EST - November 14, 2010 4:00 PM EST How can I enter the giveaway? In order to enter the competition you'll have to tweet (or re-tweet) a message including the content "Win an iPad or prizes worth $1K @dryicons http://j.mp/dryiconsturns3 RT to join". Can I tweet multiple times? Yes, there is no tweet limit, however please make sure you follow The Twitter Rules and don't get suspended for their Terms of Service violations. How are we going to select the winners? We'll select the winners randomly. However, we reserve the right to select a winner(or winners) that would include a creative content in their tweet(s) - something we would like. The winners of the 10 x $100 worth prizes will be announced during the period of the competition, and no later than November 15, 6:00 PM EST The winner of the iPad will be announced after the end of the giveaway, and no later than November 15, 6:00 PM EST We'll contact the winners via their twitter accounts, so we highly recommend you to follow @dryicons at twitter. The winner of the iPad will have to provide a shipping address in a country where the iPad is available (see where iPad is currently available), otherwise we'll have to select another winner. Tweet to join in: The competition is over! We'd like to congratulate the winners, and thank you all for being part of our 3rd birthday celebration. We really had lots of fun, and hope you did too! 10 x $100 worth prize winners: 1. @kyle_mccall - Tweet Nov 05, 2010 2. @kzograf - Tweet Nov 08, 2010 3. @sherazalvi - Tweet Nov 08, 2010 4. @auntiethesis - Tweet Nov 08, 2010 5. @SRIshanu - Tweet Nov 15, 2010 6. @crazybookblog - Tweet Nov 15, 2010 7. @uLiisez - Tweet Nov 15, 2010 8. @Nonapeptide - Tweet Nov 15, 2010 9. @GoDoSomething - Tweet Nov 15, 2010 10. @hannahjoseph - Tweet Nov 15, 2010 1 x iPad winner: 1. @tammyhart - Tweet Nov 15, 2010
Grid item placeholder
DryIcons 3.0
Finally, after months of hard work, we are very excited to announce that the third edition of the DryIcons website is here! The new website design was built around the idea of simplicity and sophistication, to achieve that we decided to remove the center column to relieve the overall design, created larger headers with deep, dark colors, and used a lot of white space. Besides changing our looks, we also included a few new features to help the browsing and purchasing experience of our users: Shopping Cart. The shopping cart became a necessity after a while, when a couple of users complained they were having difficulties when purchasing more items at one time, so we had to find a way to make the purchase process as simple and as functional it can be. The new shopping cart is designed with simplicity, it’s very easy to access and provides the user with all necessary information about his/her purchase. Discounts. With the new discount policy, it’s a holiday with DryIcons all year long. When purchasing 2 items from our website you will get a 5% discount, purchasing 3 items will earn you a 10% discount, 4 items will earn you a 20% discount, and when purchasing more than 5 items you will get a 30% discount. Vector files (.ai) of the icons. This is one of the things our users requested the most. Now most of our icon sets can be purchased with vector files of the icons with a license according to the client’s needs. The vector files of the icons are available in Adobe Illustrator (.ai) file formats. Single icon purchase. Purchasing a license for single icons from various icon sets is the other most demanded thing from our users. Now users don’t have to purchase a license for an icon set with 50 icons, when they really want to use just 10 of them. Also, the new website has the possibility of purchasing single icons from various icon sets, so if you need 2 icons from the Coquette part 2, and 6 icons from the Coquette part 5 icon set, you can purchase a license for those 8 icons you need. The promotional price for a Commercial License for one single icon is $1, and the price for an Extended License is $5. Reduced prices for the vector graphics. The prices for our vector graphics are reduced from $10.75, to $7.99. Licensing FAQ. A lot of our users were having difficulties understanding our licensing. This is why we have made a list of the most frequently asked questions we have received regarding our licensing, and answered them so there are no more misunderstandings. The overall redesign process has taken us lots of time and our energy levels are running low, but at the same time it makes us proud and very motivated to keep doing what we do. We hope you like the new design and features, drop us a line in the comments section, or send us a tender whisper in the Contact Us page to tell us what you think. (Waving, taking a bow and leaving the stage).
Grid item placeholder
A CSS3 Gradient Button Generator
» Skip to the CSS3 Gradient Generator Tool Lately, pretty cool things happen in the world of web design. HTML5 and CSS3 very easily get under the skin of everyone who is involved in the web development in any way. Although, all of these stuff aren't that revolutionary and have been around for a while in the computer designing, yet the possibility to create color gradients, box and text shadows, and even transitions and animations by the use of simple text code simply can't leave you indifferent. The good news is that most of the browsers available throughout the wide range of modern electronic devices already accept and are capable of presenting these new HTML and CSS features. The bad news is that HTML5 and CSS3 aren't standards yet, and we'll have to wait for a (pretty long) while until they get out of the W3C working drafts and become a de facto standards. But, who needs to wait when all of these goodies are already available. The webkit based Safari and Chrome, along with the always ambition Firefox have made it possible for most of the new HTML and CSS features, Opera also keeps up the pace in a decent manner (it doesn't support background gradients at the time of writing this post), and suprisingly, the latest versions of Internet Explorer seem to make great efforts in order to join the club -- they have a long way to go, meanwhile there are plenty of workarounds, not as cool and elegant as a simple line of code, but if you really care for it and it makes a difference for your design and visitors you can do it. One of the long awaited features in the new era of web design are the gradients. Combined with shadows and rounded borders they are a good starting point for creating pretty looking designs without a single image and with just a few lines of code. The downside, at least for the moment, is that you must define most of the new CSS properties explicitly for each browser engine. For example, if order to add gradient background in Safari or Chrome, and Firefox you'll have to include "-webkit-gradient" for webkit based Safari and Chrome, and "-moz-linear-gradient" for Mozilla's Firefox for the background-image property in your CSS style. That is pretty time consuming, so we developed a small tool that should speed up the things a bit. The tool is a hybrid -- a HTML/CSS/JavaScript/Flash -- application that generates all of the style properties. We've decided to use Flash as a symbolic (anti)act of the latest sparkles that appeared between the pure HTML5 and the pure Flash favorisers -- In the spirit of the good 'ol Why can't we be friends, or if you are a more romantic-ish in the spirit of Make love not war :) I should be a cool button! Click me to start the CSS3 tool The application is pretty easy to use (it should be), so go ahead and give it a try! #demo_btn, #skip_btn{ cursor: pointer; text-decoration:none; border: 2px solid rgb(0, 0, 0); padding: 10px 10px 10px 10px; color:rgb(255, 255, 255); font-size:14px; font-family:arial, serif; text-shadow: 1px 1px 1px rgb(0, 0, 0); font-size: 14px; border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; box-shadow:0px 0px 15px rgba(0, 0, 0, 0.5); -moz-box-shadow:0px 0px 15px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0px 0px 15px rgba(0, 0, 0, 0.5); background-color: rgb(0, 0, 0); background-image:linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 45%,rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0)); background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(rgba(255, 255, 255, 0.8)), color-stop(0.45, rgba(255, 255, 255, 0.5)),color-stop(0.52, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))); background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 45%,rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0)); }#demo_btn:hover, #skip_btn:hover{ cursor: pointer; text-decoration:none; border: 2px solid rgb(0, 0, 0); padding: 10px 10px 10px 10px; color:rgb(255, 255, 255); font-size:14px; font-family:arial, serif; text-shadow: 1px 1px 1px rgb(0, 0, 0); font-size: 14px; border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; box-shadow:0px 0px 15px rgb(0, 0, 0); -moz-box-shadow:0px 0px 15px rgb(0, 0, 0); -webkit-box-shadow:0px 0px 15px rgb(0, 0, 0); background-color: rgb(0, 0, 0); background-image:linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 45%,rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0)); background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(rgba(255, 255, 255, 0.8)), color-stop(0.45, rgba(255, 255, 255, 0.5)),color-stop(0.52, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))); background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 45%,rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0)); }#demo_btn:active, #skip_btn:active{ cursor: pointer; text-decoration:none; border: 2px solid rgb(0, 0, 0); padding: 10px 10px 10px 10px; color:rgb(255, 255, 255); font-size:14px; font-family:arial, serif; text-shadow: 0px 0px 2px rgb(255, 255, 255); font-size: 14px; border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; box-shadow:inset 0px 0px 15px rgb(0, 0, 0); -moz-box-shadow:inset 0px 0px 15px rgb(0, 0, 0); -webkit-box-shadow:inset 0px 0px 15px rgb(0, 0, 0); background-color: rgb(0, 0, 0); background-image:linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 45%,rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0)); background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(rgba(255, 255, 255, 0.8)), color-stop(0.45, rgba(255, 255, 255, 0.5)),color-stop(0.52, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))); background-image:-moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5) 45%,rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0)); }
Valentines bunch index
The Valentine's Bunch
For three years in a row, DryIcons has been your main supplier of Valentine's goodies. Valentine's Day is special to all of us, so we always try to capture the special feeling this holiday brings. This year we have decided to make a special bunch of the most popular and memorable Valentine's vector graphics and icon sets we have produced over the years, allowing you a quicker and more enjoyable access to the these lovely items. The Valentine's Bunch consists of the 20 most popular vector graphics, and our two celebrated Valentine's icon sets: Valentine Love and Valentines. Enjoy the holiday and may your hearts be always full of love. Icons Valentine Love Icons Valentines Icons Graphics Flower Heart Vector Graphic Love Tree Vector Graphic Happy Valentines Vector Graphic Valentine Heart Vector Graphic Heart Vector Graphic Be my Valentine button Vector Graphic Be my Valentine Vector Graphic A View from Valentine City Vector Graphic Love Aeroplane Vector Graphic Grungy in Love Vector Graphic Love Memories Vector Graphic Love Birds Vector Graphic Love is Vector Graphic Romance Tree Vector Graphic Lovers Hug Vector Graphic Be my Valentine Banner Vector Graphic Valentine Card Vector Graphic Heart of Hearts Vector Graphic Love Grow Vector Graphic Heart Flower Vector Graphic
Grid item placeholder
Second Anniversary and Icons Giveaway Winners
The 2nd Anniversary celebration is over as of today, when we're announcing the winners. Honestly, we expected a lot more comments, more users, eager to get a free extended license for our Coquettes...Anyway, we are very thankful to all our users that had the time to leave a comment, and those who were too lazy to do that :) From your comments we noticed that most of our users were in fact needing a Commercial License, instead of an Extended. Such as using our icons in their new websites, personal projects, etc. So we decided to give a couple of Commercial and a few Extended Licenses for the Coquette series. Users who won Commercial Licenses are: 6. Keith Davis, 14. Eve Stafford, 15. Caroline P., 30. Jean-Sebastien Proulx Users who won Extended Licenses are: 8. Dan Allen Pantinople, 11.pff, 26. Greg Solak. Congratulations to all of the winners, they'll get their license details by email and thank you all for being part of our Birthday Party!
Grid item placeholder
Second Anniversary and Icons Giveaway
Post update: As of right now, DryIcons' 2nd Anniversary Giveaway is over! The comments will be temporary disables and the winners will be announced at our Blog tomorrow! All winners will be notified by email. Dear friends of DryIcons, We are very happy to share with you that DryIcons has turned 2 years! This joyous occasion is to be celebrated with some cake, so please have some. The second year of DryIcons' existence will be remembered by the ambitious Website Redesign at the beginning of the year, the ultimate success of the Coquette Icon Series and our constant Custom Icons Work. But most of all, we will remember this year in the way we have grown emotionally. Although all members of DryIcons had plenty of experience way before the DryIcons Project, we feel this year marked the way we experience our work. We are on a mission to improve the quality of our work vector graphics and icons, keeping in touch with user's ideas, criticism and numerous suggestions and emails, and keeping our business clients happy and content. We're trying (and succeeding) to do all that in a stress free environment. We want to take this opportunity to thank our good Users for their attention, good vibes and criticism, all DryIcons' Business Partners for trusting us with their valued projects, our loving Families for their unconditional love and support. God Bless! Giveaway presents P.S. I almost forgot... We have some presents to give. I'm talking about 2 (or maybe 3) Extended Licenses for the Complete Coquette Series! Two (or three) commentators will be their new owners. Tell us why You and not someone else should be the new owner of the Extended License, if you're honest (creative, convincing) enough, you'll surely get it! Best of luck!
Grid item placeholder
A simple algorithm for generating Sudoku puzzles
I first came in contact with Sudoku a few years ago, back when I was a student. I traveled a lot, about three hours one-way at least twice a month, and it was a real pleasure "not" to waste my time just staring in the moving environment, although even that can be fun sometimes, but it gets a bit dull after the first couple of trips and then it simply makes you asleep :) Few months ago I got obsessed with it, again, I've started solving Sudoku puzzles in a specialized Sudoku magazines (daily newspapers puzzles weren't enough anymore), and it's become a real office mind-stimulating treatment... Try making a short Sudoku-solving break every time you're coding something, in a short time you'll find algorithms leaking out of your brains, and coding faster than you've ever had :)... No, seriously, it has some strange positive influence on your (or mine at least) logic, maybe because there is so much logic in it... even though it's so simple game. I wanted to go deeper this time... you know "Set the Controls for the Heart of the Sun", find out more about it, reach for its "essence", build an algorithm or two and then do a bit of coding. It sounds like a story so far ain't it :), yet this post is intended to be a showcase of some approaches and algorithms for creating a Sudoku puzzles and games. So let's get technical... Sudoku is a logic game, there are pretty well definition and details on Wikipedia for the game. The player has to fill a partially filled 9x9 grid which consists of nine 3x3 boxes or blocks so that each number from 1 to 9 appears only once in each column, row and box. I was very surprised how much stuff about Sudoku one can find on the Net. There are a bunch of sites, forums, blogs completely dedicated to Sudoku and things about it. When building a Sudoku game, perhaps the most fundamental thing is to generate the puzzle, afterward you'll just have to wait for the player to solve it. In order to generate a puzzle you (your application) have to solve it first, so in a sense generating a puzzle is like a solving a certain puzzle. There are many approaches/algorithms for generating or solving a Sudoku puzzle. The backtracking algorithm can be used to generate a Sudoku puzzle. You can use this by iterating through each cell of the grid and populating it with certain number. You can start with the first cell by populating it with a random number from 1 to 9, then move to the second cell and populate it with another random number excluding the number in the first cell etc. Basically when populating a certain cell you'll have to take in mind the numbers that have already been populated in the column, row and box where the current cell is positioned. Solving Sudoku is also possible with brute-force algorithms, although if not coded well it can bring to a great resources (CPU in particular) consumption. There are far more approaches, but here we'll concentrate on one single one, and pretty simple as well. Sudoku is a logic game which consists of numbers, and logic plus numbers is a perfect grounding for math to take over. In fact, there is a lot more math involved in Sudoku, but we'll use one concept: a valid Sudoku puzzle (each number appears only once in each row, column and box) can morph to another valid puzzle by applying certain transformations to certain cells, or complete rows, columns and/or boxes. I've heard about this some time ago, so I wanted to make sure if it's really true... and you guess it, it is :), but we'll skip the mathematical proof here. We'll use the following transformations: Swap cells (rows) horizontally: rotating the grid around the fourth row, the first row swaps with the last, the second swaps with the eighth and the third swaps with the fifth, no change to the fourth row Swap cells (columns) vertically: rotating the grid around the fourth column, the first column swaps with the last, the second swaps with the eighth and the third swaps with the fifth, no change to the fourth column Swap cell around the main diagonal: sort of rotating the grid around the main diagonal Swap cell around the minor diagonal: sort of rotating the grid around the minor diagonal Here is a simple flash gadget that might help visiulize the transformations: if(typeof(flashCnt) == 'undefined') flashCnt=[]; flashCnt.push({id:'sudoku-alg', width:512, height:552,movie:'/swf/sudokuAlg.swf', fvObj: {wmode:'transparent', allowfullscreen:false, allowscriptaccess: 'always', menu: false}}); Sudoku Transformations You can also swap any two columns in the first, second and the third vertical region, as well as any two rows in the first, second and the third horizontal region, but for the sake of simplicity we'll skip them here. Theoretically applying these transformations or their combination on a single puzzle solution will effect in tremendous number of puzzles, proportionally to the number of transformation iterations. In practice applying these transformations or their combination on a reasonable number of puzzle solutions will effect in fairly enough amount of puzzles, when applying reasonable number of transformation iterations. You'll first need to define a number of completed solutions. Once the player starts a new game randomly select one of the completed solutions. At this point you can go with this puzzle and start the game or apply some transformation combination and then start the game. Use some logic when applying the combination since some of them don't make sense at all and result in the initial solution, like: horizontal and horizontal, or horizontal, vertical, horizontal and vertical. The puzzle solutions can be stored in an one-dimensional (indexes from 0 to 80 for each cell) or two-dimensional array (indexes [row][column]). We'll go with the one dimensional array in this presentation. Here are the definitions of the two arrays in Action Script 3: // // Puzzle Solutions, two-dimensional array - each element contains valid puzzle solution: // private var solutions:Array = [ [4,2,9,3,1,6,5,7,8,8,6,7,5,2,4,1,9,3,5,1,3,8,9,7,2,4,6,9,3,1,7,8,5,6,2,4,6,8,2,9,4,1,7,3,5,7,4,5,2,6,3,9,8,1,3,5,4,6,7,2,8,1,9,1,7,8,4,5,9,3,6,2,2,9,6,1,3,8,4,5,7], [9,6,5,4,1,8,7,3,2,1,4,3,2,6,7,9,5,8,8,2,7,9,5,3,6,1,4,5,7,9,3,8,4,1,2,6,4,1,2,6,9,5,3,8,7,6,3,8,1,7,2,4,9,5,3,5,4,7,2,1,8,6,9,7,8,6,5,3,9,2,4,1,2,9,1,8,4,6,5,7,3], [1,2,5,8,9,7,6,3,4,6,7,4,5,1,3,9,2,8,3,9,8,4,2,6,1,5,7,4,8,2,6,5,9,7,1,3,7,6,9,2,3,1,4,8,5,5,3,1,7,8,4,2,9,6,2,4,3,9,7,5,8,6,1,9,5,6,1,4,8,3,7,2,8,1,7,3,6,2,5,4,9], .................................................................................... ]; // // Current Solution - contains the solution for the current puzzle [the first cell has index 0, second has index 1, ... last has index 80], element from solutions array or transformed version // private var currentSolution:Array = []; In the case of one-dimensional array usage for the puzzle solution, here is a short code snippet for swapping appropriate cells for a certain transformation: private function transformSudoku(type:String = 'horizontal'):void { var i:uint = 0, tmp, tmpIx, mod9, div9; switch(type) { case 'vertical': for(i = 0; i < 81; i++) { // // If column (i % 9) < 4 swap it: // if(i % 9 < 4) { tmp = currentSolution[i]; div9 = Math.floor(i / 9); tmpIx = (9 * div9 + 8) - (i - (9 * div9)); currentSolution[i] = currentSolution[tmpIx]; currentSolution[tmpIx] = tmp; } } break; case 'mainDiagonal': for(i = 0; i < 81; i++) { // // Upper Main diagonal: row + column < 8 // if((Math.floor(i / 9) + i % 9) < 8) { mod9 = Math.floor(i % 9); div9 = Math.floor(i / 9); tmp = currentSolution[i]; tmpIx = (8 - mod9) * 9 + 8 - div9; currentSolution[i] = currentSolution[tmpIx]; currentSolution[tmpIx] = tmp; } } break; case 'minorDiagonal': for(i = 0; i < 81; i++) { // // Upper Minor diagonal: row > column // if(Math.floor(i / 9) > i % 9) { mod9 = Math.floor(i % 9); div9 = Math.floor(i / 9); tmp = currentSolution[i]; tmpIx = div9 + mod9 * 9; currentSolution[i] = currentSolution[tmpIx]; currentSolution[tmpIx] = tmp; } } break; case 'horizontal': default: for(i = 0; i < 81; i++) { // // Row < 4 // if(Math.floor(i / 9) < 4) { mod9 = Math.floor(i % 9); div9 = Math.floor(i / 9); tmp = currentSolution[i]; tmpIx = mod9 + (8 - div9) * 9; currentSolution[i] = currentSolution[tmpIx]; currentSolution[tmpIx] = tmp; } } break; } } That should be it, simple yet useful approach. Now relax, treat yourself a game of Sudoku (level: very, very easy) and try to beat our best time: 0:01 :) if(typeof(flashCnt) == 'undefined') flashCnt=[]; flashCnt.push({id:'sudoku-game', width:512, height:552,movie:'/swf/sudoku.swf', fvObj: {wmode:'transparent', allowfullscreen:false, allowscriptaccess: 'always', menu: false}}); Sudoku Game
Grid item placeholder
Creativity at it's best
A music video from the premiere mini album "Water Flavor EP", from the Japanese band "Sour", for the song "Hibi no Neiro" (Tone of everyday). The video was shot with webcams only, and the main protagonists are Sour fans from around the world. if(typeof(flashCnt) == 'undefined') flashCnt=[]; flashCnt.push({id:'sourvideo-1', width:512, height:411,movie:'http://www.youtube-nocookie.com/v/WfBlUQguvyw&hl=en&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01', fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'}}); "Hibi no Neiro" (Tone of everyday) Video Congratulations to all participants in this creative work of art! Directors: Masashi Kawamura, Hal Kirkland, Magico Nakamura, Masayoshi Nakamura.
Tutorial index
Logo Design Process Tutorial
Introduction One of the main aspects of the branding process includes logo development. Your logo, or brand mark, in other words, needs to reflect your brand accurately, as it will play a huge role in your brand recognition. This however doesn't mean that the branding process ends when you've developed your logo, branding takes a lot of time, commitment, managing skills and finally, the ability to reflect the image you want others to have of you and your business This tutorial is intended to benefit both our potential clients, so they can have a fully comprehensive overview of our logo design process and methods; and many of our users, interested in the process of designing and developing a logo. For the purpose of this tutorial, we're going to design and develop a logo for an imaginary company, called "LTD", short from Logo Tutorial by DryIcons.     Project Start and design brief The project starts when we receive a detailed design brief from our (imaginary) client. This is an important part of the designing process, because it will provide us with essential information about our client's insights, needs, expectations and targets. Understanding the nature of the project is beneficial for both designer and client, since it will save both parties a lot of valuable time (money) and will provide firm starting position which will result in a professional and effective product. Based on our client's information we now know that this is a strong, powerful, creative, responsible youth organization, which employs highly motivated, university educated staff. They are very passionate about what they believe in: individuality, democracy, creativity, non-conventional thinking, gutsy and dynamic attitude. Their target group consists of students, young professionals and independent entrepreneurs. They expect us to create an easily-recognizable, stylish graphic work, which will accurately express these characteristics.     Research Research will mark the second stage of the design process. This stage means spending a lot of time browsing the Internet, initially doing research of the industry involved, getting to know our client's competition, current design trends and so on.     Visualization Now this is the fun part. After we've gathered all the necessary knowledge, after a lot of reading and brainstorming, we are ready to start visualizing our ideas. Pencil drawing on a piece of paper is our favorite method when working on the initial concepts, however, this is just a matter of personal choice. Knowing when to stop and take a break has proven to be very helpful at this point. It's very easy to get stuck at a certain point, which will eventually lead to frustration and losing interest in the project. Leaving the project to rest for a while is always good, because when you get back to it, you are suddenly able to judge your work more objectively, and you instantly know which concept provides you solid ground for further development. After the break, we have chosen one idea that will be our main concept upon which we're going to develop the logo. We are going to use a stylized fist, a powerful symbol which will unite all aspects of this logo design project. Another method that's proved to be very helpful when visualizing your ideas is taking photos of your ideas, of course, when possible. With our desired symbol and perspective in mind, we have taken this photo:     Drawings Based upon the photo image, we have drawn the fist. As you can see, highlighting the fist outlines can serve as a good starting point to developing this logo, but we are instantly going to abandon this idea because this is not the path we want to take. Instead, we're looking to develop a modern, stylized, easily-recognizable symbol. Therefore, we're continuing to explore the fist drawing, now coming up with a more simple and stylized version. The previous sketch has guided us in the right direction, and we now have a version of the fist drawing that's, in our opinion, very strong and memorable, but also very creative and modern. Now we can move on to our computers.     Computer developing Creating the Logo Mark For the purpose of this tutorial we are going to use Adobe Illustrator CS3. From the Toolbar, choose the Rectangle Tool to draw a simple rectangle, like on the image below. With the rectangle selected, go to Effect > Stylize > Round Corners, and give the rectangle a semicircle roundness. Now, copy and paste the same object. Click on the new object and slightly increase its height. Repeat the same procedure to create all four fingers. Increase the object's height to resemble the different size of human fingers. Copy and paste the smallest, pinky finger. The new object will represent the thumb. Place the thumb object accurately and rotate to the desired position. Select all four finger objects and rotate to the desired position. To be able to use the Trim Tool later, we need to expand the object appearance. Select all objects and go to Object > Expand Appearance. To preserve the continuity of the design, we need to separate the thumb from the fingers that are touching. First we're going to create the thumb contour. The contour thickness needs to be the same as the spaces between the fingers. Select the thumb and go to Object > Path > Offset Path. Creating the contour will automatically group the two objects together. To ungroup the contour from the thumb go to Object > Ungroup. Select the contour and change its color to have better articulacy. We now want to trim the two fingers with the contour. Select the contour and while holding the Shift Key we'll select the two fingers we want to cut. Go to Window > Pathfinder to open the Pathfinder Window and click Trim. Go to Object > Ungroup to separate the grouped objects, select the contour and delete it. This is the result of this procedure.     Applying the Company Name Having our logo mark created, we now want to apply the company name. We think that the best way to do that would be to create another similar rounded object which will contain the name of the company. From the Toolbar, choose the Rectangle Tool and again draw a simple rectangle, like on the image below. With the rectangle selected, go to Effect > Stylize > Round Corners, and give the rectangle a semicircle roundness. We choose to color this object red, because this color provides good contract from the logo mark and bring more attention to the company name.     Choosing the right Typography Choosing the right Typography is a very important part of the logo development process. The selection of font can depend on many things, like what look you are trying to convey, what's the font's purpose, how much space needs to be filled, and so on. Since our design uses rounded corners, and we don't want the company name to be distracted, we have decided to use a simple font with rounded corners, but without any complex details. For the purposes of this tutorial I’m using a font called “Arial Rounded”. Now, select the Type Tool, and type the word you need. This is the final result. It's always best to provide your clients with vector files of the artwork, because vectors can be scaled to any size without loss of quality. On the image below you can see that we also created a grayscale and a black version of the logo. A good, strong logo shouldn't loose its impact in the black and white version.     Corporate identity Having created a good logo is one thing. Using the logo to create a recognizable Corporate Identity is as important as everything we've done by now in this tutorial. In the image below you can see a great example of a consistent design and creativity and professional appeal.   Hope you liked our Logo Design and Process Tutorial. Please share your thoughts with us on this subject, do you share similar design methods, do you find this tutorial to be helpful? And make sure to come back for more.
Grid item placeholder
Great use of pop music in great films
The selection of popular music in films is one of the most important parts of the film-making project. The importance of music consists of that special, unique way music connects a certain scene from the film with the audience, much different from the narrative. This connection goes far beyond, it connects you, the audience, with the film- on another, more personal level. Suddenly we find ourselves building relationships with the film's characters because of their taste in music, we're fancying the director/music supervisor for their selection of music, or we simply relate to the film better with the help of music. This list is a personal selection of great use of pop music in great films. "Canned Heat" by Jamiroquai in Napoleon Dynamite if(typeof(flashCnt) == 'undefined') flashCnt=[]; flashCnt.push({id:'popMFlv-1', width:512, height:411,movie:'http://www.youtube-nocookie.com/v/VmmNrleM2mU&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01', fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'}}); "Canned Heat" by Jamiroquai in Napoleon Dynamite Video "Super Freak" by Rick James in Little Miss Sunshine flashCnt.push({id:'popMFlv-2', width:512, height:411,movie: 'http://www.youtube-nocookie.com/v/Y0zbf9X7SDM&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01', fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'}}); "Super Freak" by Rick James in Little Miss Sunshine Video "Hotel California" performed by Gipsy Kings in The Big Lebowski flashCnt.push({id:'popMFlv-3', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube-nocookie.com/v/SzcBvilfyr8&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); "Hotel California" performed by Gipsy Kings in The Big Lebowski Video (please disregard the last 30 seconds of the video) "I want Candy" performed by Bow Wow Wow in Marie Antoinette flashCnt.push({id:'popMFlv-4', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube-nocookie.com/v/EAyRAXAAcDQ&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); I want Candy" performed by Bow Wow Wow in Marie Antoinette Video "Lust for Life" by Iggy Pop in Trainspotting flashCnt.push({id:'popMFlv-5', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube-nocookie.com/v/ceJWKDAXkQ0&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); "Lust for Life" by Iggy Pop in Trainspotting Video "Where is my Mind" by Pixies in Fight Club flashCnt.push({id:'popMFlv-6', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube-nocookie.com/v/XkUaV9GZDuk&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); "Where is my Mind" by Pixies in Fight Club Video "Confusion (Pump Panel Reconstruction Mix)" by New Order in Blade flashCnt.push({id:'popMFlv-7', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube-nocookie.com/v/pD3Yl_lY0ic&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); "Confusion (Pump Panel Reconstruction Mix)" by New Order in Blade Video "On the Beautiful Blue Danube" by Johann Strauss in 2001: A space odyssey flashCnt.push({id:'popMFlv-8', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube-nocookie.com/v/CDAWszeZtNg&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); "On the Beautiful Blue Danube" by Johann Strauss in 2001: A space odyssey Video "Little Green Bag" by George Baker Selection in Reservoir Dogs flashCnt.push({id:'popMFlv-9', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube.com/v/lzMpH9jjo4w&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); "Little Green Bag" by George Baker Selection in Reservoir Dogs Video "Stuck in the Middle with you" by Stealers Wheels in Reservoir Dogs flashCnt.push({id:'popMFlv-10', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube-nocookie.com/v/ZNb1S_ymyHM&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); "Stuck in the Middle with you" by Stealers Wheels in Reservoir Dogs Video "You never can Tell" by Chuck Berry in Pulp Fiction flashCnt.push({id:'popMFlv-11', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube-nocookie.com/v/GWr_eSfTtIw&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); "You never can Tell" by Chuck Berry in Pulp Fiction Video "Girl, you'll be a Woman" cover by Urge Overkill in Pulp Fiction flashCnt.push({id:'popMFlv-12', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube-nocookie.com/v/cdMEMGLr9xE&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); "Girl, you'll be a Woman" cover by Urge Overkill in Pulp Fiction Video "After Dark" by Tito & Tarantula in From Dusk till Dawn flashCnt.push({id:'popMFlv-13', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube-nocookie.com/v/RVVGKiYZ0SM&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); "After Dark" by Tito & Tarantula in From Dusk till Dawn Video "Twisted Nerve" by Bernard Herrmann in Kill Bill 1 flashCnt.push({id:'popMFlv-14', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube-nocookie.com/v/Gcf6bW1HxPI&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); "Twisted Nerve" by Bernard Herrmann in Kill Bill 1 Video "Down in Mexico" by The Coasters in Death Proof flashCnt.push( {id:'popMFlv-15', width:512, height:411,movie:'http://www.youtube-nocookie.com/v/I8GxeZXG7FA&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01', fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'}}); "Down in Mexico" by The Coasters in Death Proof Video "Hold Tight" by Dave, Dee, Dozy, Beaky, Mich and Tich in Death Proof flashCnt.push({id:'popMFlv-16', width:512, height:411,fvObj: {wmode:'transparent', allowfullscreen:true, allowscriptaccess: 'always'},movie:'http://www.youtube-nocookie.com/v/cUV4oxVKKZk&hl=en&fs=1&color1=0xe1600f&color2=0xfebd01'}); "Hold Tight" by Dave, Dee, Dozy, Beaky, Mich and Tich in Death Proof Video
Final icon
Icon design tutorial: How to make a Calendar icon
In the past few weeks we have received several e-mails from different users in which they were asking us if we could share a few tips regarding icon development. This tutorial is our reply to those users and a small contribution to all of you out there interested in icon development. In this tutorial we're going to show you how we made the Calendar Icon from our most popular icon set “Coquette”. Before you start developing your icon, you must first have a clear vision of how your icon will look. For a moment, step away from your computer and try to visualize your idea. Sketching on a piece of paper is very helpful in order to determine the design direction of the icon you are developing. The design idea behind this icon set is to create a very appealing, seductive look, one that can be used in all kinds of projects (websites, blogs, software, applications), and most importantly, a look that will bring a lot of attention and style to your projects. In order to succeed the initial design idea, we need to keep the design very simple. We’ll be using rounded, curvy corners to achieve the cute feel, and strong, vibrant colors that will totally seduce our users. Once you’re clear about the design course, you can start working on your computer. For the purposes of this article we'll be using Adobe Illustrator CS2. From the Tools window select the Rectangle Tool and make a rectangle. With the rectangle selected, choose Effect > Stylize > Round Corners, and give the rectangle a 23pt roundness. Select the Gradient Tool and make a nice radial gradient using gray and white colors. Then go to Object > Expand Appearance.We are now ready to make the holes for the calendar holders (that are going to be added a little later). Select the Ellipse Tool and hold the Shift key to make a perfect circle. Select the circle and hold the Shift key to select the rectangle, as well. Then choose Window > Pathfinder>Trim. Repeat the same action for the second calendar hole. The icon base is now ready. With our icon base created, we can proceed making the colored layer of the top part of the icon. Use the Copy and Paste action to duplicate the icon base. Select the Rectangle Tool and draw a rectangle over the area of the icon base object that you want to remove. Select both rectangle and the icon base and trim the duplicated object using the same Trim Tool from the Pathfinder, so we are left with only the top part of the icon. Select the top part of the icon and use colorful gradient to get some really nice contrast. This time I’ll choose the linear gradient using strong red colors. I now want to make the calendar holes stand our a bit. To do that I will add an additional circle with a stroke. Select the Ellipse Tool, to make the circle and choose a darker red color for the stroke. To make the calendar holders, select the Rectangle Tool to create the rectangle, and then make the corners round, same way as we did above. We also want to use a linear gradient for the holders object. To be able to put some gradient on the stroke, I need to convert the stroke to an object. Select the rectangle and go to Object > Expand Appearance, then choose Object > Path > Outline Stroke. Now we can put a gradient to the object. It’s time for the typography. Choosing the right font is a very important task. Since the icon design uses round corners, we think it will be most suitable to use a font with rounded corners. For the purposes of this tutorial I’m using a font called “Arial Rounded”. So, select the Type Tool, and type the word you need. Let’s make some circles using the Ellipse Tool. The circle objects will simulate the days of the month. Using the same font, we're typing a desired date. The right font and color will surely give the icon a strong visual impact. A final touch is adding the glossy effect. Copy and Paste the red top of the icon twice. Then select the second copy with the first one, and trim it by using the Trim Tool, that way so you're left with just a small portion of the whole object. To get rid of the unnecessary holes create another rectangle right above them and select the rectangle with the glossy effect object, then trim it by using the Trim Tool again. Use a brighter red color to accent the effect. We hope you enjoyed this article and it gave you some new ideas for creating web icons. Make sure to visit the DryIcons website regularly, lots of new features are yet to come.
Dryicons redesign
DryIcons.com 2.0
The DryIcons website has grown so much in the past year, it's slowly becoming a monster (but it's one of those cute ones). Well aware of this fact we've made a monstrous decision to redesign the DryIcons website. We assure you, this was not an easy decision to make, but as time passed, the redesign project became a necessity, so the need to update the design was kind of self-made (by our monster-child), it was simply inevitable. After lots of coffee, cigarettes, back pain, sore eyes, tons of candy and some more coffee, we have finally achieved our goal, and are now presenting the new updated DryIcons Website! Besides the obvious new looks, we have done a lot of back-end work, we've made sure our website is easy to access and navigate, and most of all, after a couple of unfortunate server hosting decisions, we've made sure our website is stabile. We hope you will share our enthusiasm about the new design, even if you don't, we would like to hear from you. Don't hesitate to drop us a line in the comments section, or tell us what you think about the new design by voting in the sidebar Poll. Make sure you come and visit the DryIcons website regularly, we are not done yet, lots of new, cool features are yet to come.
1st annversary winners
1st Anniversary and Graphics Giveaway Winners
Finally, as we've promised, we have the winners... little later than it would be expected for a super-trooper-computer with a single processing task {:o) Nevertheless, the winners are the author of comment No. 21 a.k.a. pasqui, and the author of comment No. 102 a.k.a. Anne ! Congratulations pasqui and Anne, will contact you guys by email for the details, and sincere gratitude to everyone for the nice comments and for being part of our mutual celebration! Cheers!
1st annversary dryicons preview
1st Anniversary and Graphics Giveaway
Winners update: We got the winners! → ТХЕ Виннерс! Update: We are happy to announce the entrance into the final phase of our anniversary's celebration. As of now -- November 10th, 00:00 CET -- we are starting our extra-fast computers which run a super-intelligent application designed just for the occasion to select the two winners of our competition We are only dramatizing a bit :o). Anyway, the comments will be temporary disabled. The winners will be notified by email at certain time tomorrow. Good luck to all of you! Hello friends, Believe it or not, today DryIcons is celebrating its first Anniversary, please have a drink and try the birthday cake. During the first year of our existence we have grown quite significantly, and are now firmly standing on our own feet. The bumpy road we went through only made us stronger and more confident in what we do. Of course, our users were with us along the way, all the time, so here's one to all of them: "Thank you for sticking with us, spreading the word and your tremendous support. We couldn't do it without you!". Besides free cake and drinks, anniversaries are good for summing up the goals you've set for yourself and whether or not you achieved them. Not like any other icon developing website, DryIcons creates unique icons and icon sets and gives them away freely, that way we give priority to independent coders/developers, small design firms and organizations - against larger, well-funded corporations. That has been our basic goal when starting the DryIcons project and one year later, we feel more inspired to continue achieving our goals, than we ever had. In that manner, over the last year we have created 22 free icons sets with various icon styles and a total of 1618 free icons. However, not that we're not going to stop at these numbers, our goal for the following year would be to double the icon production and give DryIcons our full attention. Additionally, our second most important section, the Free Graphics has been updated daily, meaning that we've already created 307 (it's day 307 from our "365 Free Graphics Project") free vectors graphics and gave them away freely. Comment & Win Finally, a birthday's not really one, if there are no presents. That's why we decided to be giving away a pack of 10 DryIcons' most popular graphics to 2 of our users that will comment on this post. This pack will consist of 10 .ai files as well as an Extended License for each one of them. Participants can post comments (spams will not be considered!!!) until the 10th of November 00:00 CET. The winners will be picked by a random generator. Please make sure you give us your active e-mail, so we can contact you. Good luck!
Practika large
Smashing Magazine and DryIcons collaboration
We're happy to share with you that our "Practika" icon set, made especially for Smashing Magazine readers, is avaliable for download at: Smashing Magazine Recently Smashing Magazine asked DRYICONS to develop a free icon set. When asked about the motivation behind the icon design, we stated: "When asked to design a set of icons for Smashing Magazine, DryIcons’ designers decided to create a practical, user-friendly icon set, one that could have a large range of uses, and look great at the same time. Our main motivation for this icon set was to give the readers something they could really use. The “Practika” icon set is stylish and elegant and can find its use in all websites, blogs, applications. The set contains 11 high quality web icons in 32-bit transparency in PNG file format. They come in 64×64px, 128×128px and 256×256px size.” Read more about the "Practika" icon set and download it freely at the Smashing Magazine website, following the link from above. Regards and enjoy!
Fireworks batch process
Image Batch Processing in Adobe Fireworks
Batch processing of images is often a necessary procedure in order to fulfill a certain task quickly and efficiently. The image processing software used to accomplish a batch manipulation process has essential effect to the final result. Recently we had a short tutorial on batch processing of images in Adobe Photoshop. In this short tutorial we'll go through the important steps of an image batch process in Adobe Fireworks. In Fireworks, the Batch Process sums to three simple steps. In order to start a batch process in Fireworks select the File > Batch Process... command from the main menu (see Figure 1). This command will lead you through a step-by-step batch process wizard. Figure 1: Starting a Batch Process The first step of the batch process is files selection (see Figure 2). You can select files to be included in the batch process from your local drives, network etc. You can also include the files that are currently open in Fireworks by selecting the Include current open files option. The actions that you choose in the later step will apply to all files that you select in this step. Figure 2: Including Files in the Batch Process The next step is to select actions (tasks) that will be applied to the image files in the batch process (see Figure 3). There are a variety of available actions (see Figure 3), like the most used ones: Scale, Rename and Export; and some complex actions like: Find and Replace text (available only for files that have a readable text to Fireworks), Rotation, Invert Selection Color, Sharpen Selection, Export Flex Skin etc. Some of the actions are customizable. Customization is available in the bottom of this step's window. For instance, if you choose to apply Export action to the batch process you can select (edit) the export options in the Export window. Simply Add the Export action into the Include in Batch area on the right of the window, and select Edit in the bottom of the window. Bear in mind that actions are applied to the files in the Batch Process by the order they are entered. For example, if you add Scale and Rotate 90 actions to the batch process, the Scale action will be applied first and then the Rotate 90 action. So before you go to the next step make sure the batch actions are ordered properly. Figure 3: Selection of batch process actions The last step is the execution of the Batch Process (see Figure 4). Here, the available options are pretty straightforward. You can select a Batch output (location where to save the updated files). You can select Same location as original file or a Custom location. If you choose to save the files in the same location as the original ones make sure you don't loose something you don't want to. In such case it is advisable to make Backups of your files by selecting that option. It is also possible to save a script for the Batch Process so you can easily process your files next time you need it. Figure 4: Saving files and batch process script Hopefully, this tutorial will help you process you image files in a quick and effective manner. Image manipulation is required very often, and as you can see from this tutorial you can easily make a lot of changes to a lot of image files almost instantly.
Adobe air printing
Multiple page printing from a HTML Adobe AIR Application
It's been almost two months since Adobe released its first official version of Adobe Integrated Runtime -- AIR 1.0. AIR provides a pretty flexible way for development of desktop-like applications by the use of web technologies: HTML / JavaScript, and Flash / Flex. In other words AIR allows web programmers to develop desktop applications. I speak from my own experience when I say that web developers have a hard time developing desktop applications. I'm not sure what is behind this mysterious fact, but it's so hard for most of the web geeks to develop a desktop apps (and perhaps vice versa). However, AIR seems to be something that all of us were waiting for a long time. It's still version numero uno, but it seems to be working quite well. There are a lot of things to be done and we are positive that they gonna happen pretty soon, since the web development community became very fond of AIR. To leave a side the Flash developers who seem to adjust nicely in every OO environment, the even webbies can now go much deeper, and don't have to change their means. Recently, we've got a project to develop a desktop application for "electronic reports" generation. Electronic reports are text files that contain a report in a specific predefined format. Anyway, the application had to allow the user to enter data, and once the user would finish he'd be able to save the file and print the report on a paper. You can use SQLite as a Database with your AIR application, manipulate it through your JavaScript code and that seemed like a perfect solution. This was a great opportunity to actually dive into the AIR world. Everything went smooth till the print part. First of all, HTML AIR applications don't support window.print() function. We've spent a lot of time looking for something on the net, someone that had similar experience and perhaps might found a solution. And we did find something (simulates window.print function) that simulates single page printing. However this is not what we needed since it is limited to a single page printing. Our reports were few pages long so we had to extend the solution, or come up with a different one. We did quite of experiments, and following is what came to as a possible solution. AIR is based on Flash functionalities, and if you are developing HTML AIR application then the HTML is rendered through the WebKit open source web browser engine. Since the native window.print() functionality is not available, you'll have to use flash.printing tools. You can access it in your HTML/JavaScript AIR application through window.runtime.flash.printing.*. Also, you must bear in mind that you are able to print any Sprite, but in our case that's the window.htmlLoader. A great disadvantage is that you must explicitily state all the pages you want to print and define a rectangle area of the Sprite (htmlLoader). In other words you have to prepare and populate every single page that you want to print, and then send it to the printer by using addPage(). Here are the steps you must complete for a printing job: Create a printJob (new window.runtime.flash.printing.PrintJob;) Create/Define a print Sprite, in our case that's the window.htmlLoader Create printing options (new window.runtime.flash.printing.PrintJobOptions;) Start the printJob (pjob.start()) Go through the pages you want to print, prepare them and add them for printing (pjob.addPage()) Send the print job to the printer (pjob.send()) Important note is that you must set printAsBitmap to true in the printing options, since that is the only way to get something printed. The htmlLoader (all of your HTML) is printed as Bitmap, and that is quite a limitation since you get a blury print. Since we had to make quite of preprint preparations we decided to actually open a new application window which would handle the printing and actually never show that window. Once the printing was finished we'd close the window. Here is the complete code for such a solution: // You might find useful to pass some value, number of rows for instance function multiplePagePrint(numRows) { // Create the Print Job var pjob = new window.runtime.flash.printing.PrintJob; var psprite = window.htmlLoader; // Define the Sprite if ( pjob.start() ) // Start the Print Job { // Define the Print Job Options var poptions = new window.runtime.flash.printing.PrintJobOptions; poptions.printAsBitmap = true; // Must print it as Bitmap //after you've start the print job // you can get any print specifics (page size etc.) var pageHeight = pjob.pageHeight; var pageWidth = pjob.pageWidth; var paperHeight = pjob.paperHeight; var paperWidth = pjob.paperWidth; // Calculate the number of pages var pagesToPrint = /** Your logic here **/; // Add your pages: for(var i = 0; i < pagesToPrint; i++) { /** Your logic here for calculating RECT_HEIGHT **/ var rect = new air.Rectangle(0, RECT_HEIGHT, pageWidth, pageHeight); try{ pjob.addPage(psprite, rect, poptions); } catch(e) { air.trace(e); } } try { pjob.send(); return true; } catch (err) { air.trace(err); return false; } } else { air.trace("PrintJob couldn't start"); return false; } } As I've mentioned above the print is done in a separate application window which you can open with air.NativeWindow(), and here you can call your function. It handles all of the print activities, it is never being activated, that is, it is invisible to the user all the time, it starts the print, adds pages and prints, and once the print is done it is being closed. This way the user gets the system print interactive window for selecting the printer, number of copies to be printed etc. Since our reports were mostly text reports we can't say that this solution is perfect. As a matter of fact it is not, and I'll advise you not to use it if you have to print text. However, it demonstrates the possibility of a multiple page printing in a HTML AIR application. The print results we got when printing in a Flash AIR application were far more superior. Some flash development in the current version of AIR is definitely recommended, at least if you need to print some text. I hope in future we gonna get improvements in AIR when it comes to printing in HTML AIR applications, and at least get the native window.print() functionality. I strongly advice you to go through the ActionScript 3.0 Language and Components Reference even if you are a stubborn HTML / JavaScript developer, since the only thing that can happen is an extra benefit for your development skills.
Adobe banner blog
ADOBE FIREWORKS and DRYICONS start a collaboration and other exciting news!
Recently ADOBE FIREWORKS and DRYICONS started a successful and productive collaboration. The result of this wonderful experience came in the form of a tutorial called: "Creating an icon in Fireworks". This tutorial will help you create your own icon in Fireworks CS3 and you won't believe how easy it is to create a fabulous looking icon! This article is available on the adobe.com website, here's a direct link. Check it out, and give us feedback through our blog comments, tell us how your icon creating turned out! On another note, this month has been the most exciting and by far the most productive period for DryIcons' team. In case you missed it, let me give you a quick recap of the activities at DryIcons.com for this month. Our "365 Free Graphics Project" is fully running, by now we gave away 51 free graphics in vector format and this month's special were our 14 different graphics inspired by the theme of Valentine's day. We also developed a new free icon set called: "Valentine Love", which proved to be very popular with our users. And finally, introducing the new, slightly changed looks of the DryIcons website, we're presenting our newest features. One is the brand new ability to search our website with our search button on the top right of our website. Since we were so eager to hear from our users, comments and feedback are now available on our Free Graphics, as well as our Free Icons section. Meaning that you will be able to make suggestions, give us feedback, or simply thank us under every free icon set, as well as every free graphic. Every comment is appreciated, so please don't hesitate to write. That's all for now guys, follow the link from above see how easy it is to create a fabulous looking icon. All comments are appreciated! Orchida, DryIcons Team
Valentine love blog post image
Valentine Love
It's February friends, it's still winter all right, but if you're very eager you can definitely smell that subtle spring breeze in the air. It's the slightest smell, but it's here, secretly announcing the arrival of glorious Spring, the period of growth and renewal. But that's not the only reason we're so fond of February, is it? February is also about romance and love and one special day: Valentine's Day! The day when candy, flowers and cards are exchanged between loved ones. In that manner, we're presenting our brand new set called "Valentine Love". Because this holiday is so special to all of us - we worked very hard to capture the special holiday feeling and produced 12 high quality web icons, expressing our celebration of love and romance. Our " Valentine Love" free icon set comes in 32-bit transparency PNG and 32x32px, 48x48px and 128x128px size. The "Valentine Love" free icon set consists of the following heart-shaped icons: Heart, Hearts, Bleeding Heart, Bleeding Hearts, Tagged Heart, Be my Valentine, Chocolate BOx, Ribbon Heart, Heart and Rose, Rosy Heart, Heart of Roses, Rose. At the end, it doesn't really matter if you celebrate Valentine's Day with someone you love, or with a friend, or even by yourself...just make sure you're supplied with lots of candies, wine, Dinah Washington records and of course, the most inevitable: DryIcons' Free Valentines Icons. February is about love and renewal, so don't hesitate to let the breeze in, and may your heart be always full of love.
Phs batch
Image Batch Processing in Photoshop
As a designer you've probably needed to process a set of multiple images, all in the same manner. A batch processing of images might be a very useful approach in handling this kind of needs. Here at DryIcons we've found the use of some kind of a batch image processing tool necessary in order to provide various size icons in a very fast and very high-quality way, so we think it might be useful to share our batch experience through Adobe Photoshop's Batch. The presentation will be done using Adobe Photoshop CS3, however things work pretty much the same in any other version (and perhaps in any similar software for that matter) and an average intuition and following the advises described here will probably keep you up on the right track. Fig. 1.: Open Batch The "Batch" tool can be found under "File > Automate > Batch..." tab as can be seen on Fig. 1. Once you access the "Batch..." a dialog window appears as shown on Fig. 2. Fig. 2.: Batch Dialog Window The top container of the dialog (Play) contains selection options of the action of the batch. Obviously the action of a batch execution has fundamental meaning in the batch process and we'll get to it in a while. For now, it could be defined as a set of activities applied to each file (image) in the source folder. The "Set" drop-down allows selection of the Action Sets (user might create multiple custom sets of actions and group them appropriately). Once a Set is selected the "Action" drop-down gets populated and listed action can be selected. The "Source" container has options for the source folder of the batch. Possible sources are: (local) Folder, Import (import from a device, i.e. web camera), Opened Files (files currently opened in Photoshop) or files in the Bridge. The other options are pretty self-descriptive: Override Action "open" Commands - When this option is on, source files will be opened from the source folder only by open steps in the action. If there are no open steps, no files will be open. In other words, you must have open steps in the action, otherwise the action is useless. Include All Subfolders - Whether the subfolders in the source folder should be included in the batch process Suppress File Open Options Dialogs - When this option is selected file open dialogs are not being shown Suppress Color Profile Warnings - Similar as the above, with this option selected color profile warnings are not being shown The "Destination" container has options for destination and saving processed images. Possible values of destination are: "None", "Save and Close" and "Folder". When 'Override Action "Save As" Commands' is on, files will be saved to the destination folder only by "Save As" steps in the action. If there are no "save as" or "save" steps in the action, no files will be saved. Obviously, this works in similar way to the 'Override Action "open" Commands' mentioned above. "File Naming" contains options for naming and saving processed files. With the six available selections that contain few options (Document Name -- capitalized or not, various date formats, serial numbers -- starting serial number can be defined in the "Starting serial#" field) it's possible to make quite complex and unique names. The last option here is "Compatibilty" (compatibility options for Windows, MAC OS and Unix). The bottom container has option for saving the errors in an error log file (if "Log Errors To File" is selected) or simply stop when error occurs ("Stop For Errors" option). Apparently, the most basic thing of a batch processing is the action, that is, defining it. Actions can be recorded and saved under specific Action Set, and later used in a batch process. Fig 3.: Open Actions Window In order to create a new action open the Actions window. You can do that by opening "Window > Actions" tab of the main menu (Fig. 3), or directly by using the ALT + F9 shortcut on the keyboard (for Windows users). Now, create a new Action Set, or select one that is already created and click on the "Create new action" button of the "Actions" window. Fig. 4.: New Action Window "New Action" dialog window should appear (As on Fig. 4), after which you should name your action and hit "Record". That starts the action recording, everything you do from now on is being recorded, and once you save it and start a batch process with recorded action it will do exactly same activities to all of the files in the Source folder. For our test presentation, we've created "Test Action No. 1" with few activities recorded (Open, Image Resize and Save). Fig. 6.: a) Create New Action; b) Stop playing/recording actions Once we record all activities hit the "Stop" button of the "Actions" window, and start the batch: Fig. 7.: Executing a recorded action That should be it. Run your action whenever it's needed and finish a bunch of work in minutes :)
Free graphics
Free Graphics – DryIcons' coolest new feature
Dear DryIcons users, Tick-tack, tick-tack…the clock is ticking to start the New Year 2008; it is time to sum things up, and call it a year. Firstly, we're happy to share with you that the number of visits to DryIcons.com has multiplied a couple of times this month. So, we're closing up this month (and year) with a total of over 25.000 visits. Thanks guys, we're feeling the love! Speaking of numbers, we did a little counting these days, and we found that DryIcons has already more than 600 unique web icons (627 to be exact), and not just any icons, but Free Icons! If we did manage to develop more than 600 free icons in only two months, you can do the counting what we'll have in our archives in saaay, 6 months :) Now you see we really meant it when we promised to make DryIcons.com your on-line resource for free icons! Also introducing - our new looks, in accordance to the coolest new feature: Free Graphics. We spiced up the main look a little, and played with the colors. The new section will start the New Year with the "Graphic of the day" project, which means that each day in the new 2008 will bring you a new unique graphic, designed and developed by DryIcons' graphic designers. We are continuously working on new; better design resources and we're surely not going to stop here. DryIcons.com, is inviting you to join us for another year of novelties, surprises and free stuff. Remember, the start of the New Year will also mark the start the coolest new feature on DryIcons.com: Free Graphics. This year, we are wishing you to love, sing and laugh more, make a baby, adopt a pet, and plant a tree. Tick-tack, tick-tack…Happy New Year!
Christmas surprise blog
Christmas Surprise (4in1)
Only 14 more days till Christmas and we're already very excited! We have decorated our Chrismas Tree, we've been singing Chrismas Carols, we went shopping for Christmas gifts, we watched the snow fall from our window. We've been under heavy influence by the festive feeling that only Christmas brings, but at the same time, we've been working hard to deliver our special "Christmas Surprise (4in1)" icons set to you. We named this set "Christmas Surprise (4in1)" because of several reasons. One is that we wanted to make this set our special Christmas present to you, and to make it a surprise we didn't announce it on our Home page, like we usualy announce our new sets. Second reason why we called this set "Christmas Surprise (4in1)" is because the set itself contains a surprise inside itself...actually, this set consists of 4 different christmas icons sets: "Christmas Ornaments", "Christmas Rounded Buttons", "Christmas Notes" and "White Christmas". "Christmas Ornaments" contains the most popular Christmas icons: Christmas ornament, Christmas candy cane, Mistletoe, Santa head, Christmas tree, Snowman and Christmas gift. "Christmas Buttons" consists of 14 classic-looking christmas icons with traditional colors and rounded shape. "Christmas Notes" consists of 14 icons, we made them look like little Christmas notes and wrote the most popular Christmas expressions on them, so you can easily stick them wherever you want. "White Christmas" is our most beloved set from the "Christmas Surprise (4in1)". Our idea for this set was to bring you the same excitement the snow brings. It contains 14 icy-looking buttons with all our favourite words and surroundings for a White Christmas. Hope our icons contribute to the Christmas festive feeling to your websites, blogs back-end applications, or projects of any kind, and hope you like our special "Christmas Surprise (4in1)" gift to you. Whishing you a Merry Christmas, and hopefully it is a WHITE one :-) Sincerely, DryIcons Team
Banner post small
Hot, fresh icon set from DryIcons' laboratory!
We’re happy to let you know that our new icon set “Ruby Multimedia” is now available on DyIcons.com. Ruby Multimedia icon set is the new creation of DryIcons' laboratory. Using only two colors, red and white, we brought style and class to the next level. This set can find its use in lots of projects and applications. It contains 13 high quality web icons in 32-bit transparency PNG and Photoshop PSD format. They come in 16 x 16px; 24 x 24px; 32 x 32px; 48 x 48px and 128 x 128px size. We started this set with a total of 13 icons, but our intention is to outgrow this number by a couple of times. To do that, we would need your feedback, in other words, we would like you to get active on our Blog, and tell us what you think about our idea; would you be interested in adding more icons to the "Ruby Multimedia" set, or not. Enjoy our “Ruby Multimedia” set and get active on our Blog.
15000
Celebrating 1 month of DryIcons.com and 5.000 visits!
Dear friends, It’s been a month (and one day) since DryIcons.com first saw the light of day. During this “small” period of time a lot has happened to us personally and our website. We started DryIcons.com with only 2 icons sets: Aesthetica and Blue Velvet. Today we have 4 icons sets and a new one coming next week! During this month we developed our 2 WYSIWYG icons sets: Classic and Sapphire and additionally worked on a whole new set: Ruby Multimedia. All in all, today DryIcons.com archive consists of 4 icons sets and a total of 340 unique icons. I don’t know if you noticed, but we also changed DryIcons’ looks a bit. In conversation with our users, and after a personal realization, we decided to remove all Google Adsense from our website, and continue our work without them. Removing them created some serious gaps in our design structure, so we had to redesign the whole home page. Now we have a more stylish and user-friendly home page, and we’re very proud of it! Of course, our celebration wouldn’t be complete if it wasn’t for you, our visitors. We started off this project out of pure enthusiasm, we had no expectations and no goals, we only wanted to continue working on our icon sets and developing this website. Now, a month later and 5000 visits away, we feel even more thrilled to be doing this, because we know our work is serving its purpose, and because there are people who appreciate what we do. A month later and our goal had set itself: “To make http://dryicons.com/ your on-line resource for free icons, so you don’t have so search any more!” For those who know how to keep a secret: we’re also working on a “Christmas surprise” icon set, since we’re all starting to sense the holiday spirit and make it our Christmas present to you.
Wysiwyg
WYSIWYG icon sets are now avaliable!
DryIcons has officially made the WYSIWYG icon set available. Driven by the huge popularization and demand of WYSIWYG (What You See Is What You Get) web icons, we created these highly useful icons sets and made them available for everyone visiting the DryIcons website. This useful collection consists of two slightly different icon sets: "WYSIWYG Classic" and "WYSIWYG Sapphire". The "WYSIWYG Sapphire", as the name indicates, can find its use wherever you might need WYSIWYG editing or similar actions in your applications. The WYSIWYG Sapphire Icon Set is a part of the DryIcons' WYSIWYG sequence icon sets, the name is inspired by its specific tone colors giving it an unique 'sapphire' look. This set contains 47 high quality web icons. They come in PSD and PND file formats, in 128 x 128px size. The "WYSIWYG Classic" icon set, as the name indicates, can find its use wherever you might need WYSIWYG (What You See Is What You Get) editing or similar actions in your applications. The WYSIWYG Classic Icon Set is the first of the DryIcons' WYSIWYG sequence icon sets, based on the 'classic' WYSIWYG look. This set contains 47 high quality web icons. They come in PSD and PND file formats, in 128 x 128px size. Enjoy our new free icons sets, and check out http://dryicons.com for new icons sets!
Welcome
Welcome to DryIcons Blog!
We begin our DryIcons blog with great pleasure. Because this is our first post, we would like to introduce ourselves, as a way to start an on-going dialog related to web icons (of course), graphic and web design, programming, web trends, tips, etc. Our team consists of four people, two programmers and two designers. Initially, we started working on a small set of icons for a local Software Development Company. We had so much fun while working on the project, that we continued developing icons for ourselves. This website and all icons sets are a product of an enthusiastic goal: to share and give away! Keep in mind that dryicons.com is a living being, we are constantly working on creating new icons and icon sets, new services and a whole lot more. What we have now is only the beginning, new sets are on their way. We also encourage you to give us your honest opinions, suggestions and ideas about our icons, icons sets, and website in general. The best is yet to come, so stick around with us, so you don’t miss it!