Its official: New Scirodesign.com
I have already started to develop the new Scirodesign.com. It will be up to par with "current" open draft HTML5 standards and will have a large amount of experimental jQuery. Updates coming soon!
Updates from October, 2010 Toggle Comment Threads | Keyboard Shortcuts
-
admin
-
admin
Awesome site: Ever reinstall a computer OS and don’t want to waste time installing software?
This is so useful. I constantly repair family & friends computers and this is a godsend! All you have to do is click on the programs you want and download the installer…. DONE!
Check it out! ninite.com!
-
admin
Google TV!!!
At this point what hasn’t google touched? (They even bought a bought a DNA indexing company)? Although the wii, ps3, webtv, netflix, tivo, apple tv and basically all media center pc’s have some of google tv’s abilities right now.. I think that google’s reputation and distributing power will be the secret formula to their already growing list of success stories. I’m excited to see their take on tv… Even more so on how they plan to monetize it!
More info at Google.com/tv
-
admin
The war for your internet video. Google’s VP8 released under open source licenses!
Watch out flash, quicktime, and .h264, there’s a new kid on the block… VP8! I have been reading about this for awhile, especially after google purchased On2. My eyebrows really raised up high when google released it under open source! What I can see happening though is flash and other 3rd party companies gobbling the codec up and integrating it right into their pre-existing codec platform… but that’s only speculation!
Take a look at what people are saying!
First in-depth technical analysis of VP8… seems a little weak but promising!
Open letter to Google regarding VP8 and youtube
And Of course Apple hates open source
The bottomline:
Depending what side you are on, the future looks bright for us all (consumers/viewers/developers). A little healthy competition never hurt anyone, and I’m sure each codec will improve in their own way.
-
admin
PhotoSketch: Internet Image Montage
This is the future of image searches!
-
admin
Old Games in the Real World!
This is awesome!
Check it out if you are a fan of old games, or a fan of awesome photoshop! Wallpapers anyone?
Advanced Wars
DK!
outrun!
Taken from abduzeedo.comProbably one of the greatest things about design is when someone comes up with a good idea do revive old, cool games. What about a Mario Kart race going on in highway somewhere, or maybe Donkey Kong throwing stuff at Mario and Luigi from a real skyscraper?
-
andysciro
Billy Mays Cube!
Click the image above to view it in full size! Then Print it out as large as possible! It makes a little desktop sized Billy May’s Cube Model.
-
andysciro
Cool find – Easy web 2.0 form CSS generator
I bumped into this the other day… and I haven’t been blogging at all because I’vebeen real easy. So here is a quicky that I think some of you may find useful. It generates well formed CSS for forms… which if you’ve ever tryed styling for any version IE is really annoying! This saved me a few mins here or there, try it out!
-
andysciro
Personal Summer Goal – Get better at High Poly Subdivisional Modeling
So I’ve been working on my 3d skills lately. Ever since school got out I have been focusing on some summer projects and have been setting some goals. The first one is get better at High Poly Character Modeling/Rendering, and the second is learn PHP. Here’s myself in 3d, its very detailed and extremely high poly. I created materials for my glasses, but I am going to texture it when I get some spare time, add hair and probably animate it as well. Click the image above to see a larger version, and Stay Tuned for more!
-
andysciro
How to make a trendy Web 2.0 Sticker
- Here is a quick tutorial that you may find useful if you want make one of those grungy little stickers that you might have seen on web pages. This is just the basics of how to make one and I am doing it in Photoshop cs3, I recommend using Illustrator in order to keep everything unrasterized and full vector. For your convenience you can download the finished PSD here, and use it however you wish!
1. Create a new Document in Photoshop
The first thing we are going to do is open a new canvas in photoshop, goto>file>new, or ctrl/cmd+n to create a new canvas. Once you have done that lets start by making a simple square shape of 1024×1024, this should allow us a large enough resolution to resize and recycle the design for other projects as needed.
2. Create a simple circle in our canvas
In the tools section of your version of photoshop (if not visible goto>window>tools, or press u on your keyboard). We need to create a circle for our badge so pick the elipse tool (as pictured below) and then while holding shift… drag out a circle. Useful tip you may/may not know: Dragging while holding shift maintains width/height – In this case it creates a perfect circle and is very handy for resizing/creating objects.
Once you have done that you will end up with a circle like the one pictured above. I Picked a bluish color for this tutorial, but you can actually pick any color you want. Just make sure its not too bright, or to dark because we want it “flat” so we can manually add the shading (to make it look realistic) ourselves.
3. Prep your circle
As you can see above this is my layers manager, I right clicked the layer my blue circle was on, and went to rasterize layer. If you cannot see your layers panel press F7 on your keyboard to make it visible. This now allows us to edit it easier, however its bad practice to rasterize items in photoshop and good practice to keep them vector so they can be resized without headaches.
For advanced users: While it may be challenging, try to be creative with the pen tool/shape tool and try to emulate what the preceding steps accomplish with our rasterized circle…in vector instead. It surely would be a good exercise in illustrator.
4. Begin editing the circle
As you can see from the above photo I dragged out a marquee from my tools pallete and selected the left side of my circle. I picked about a 1/6 of my circle but you can always do less/more. This part that we selected is going to be the fold for our sticker so feel free to tweak it any way you want.
After you select the area you want to “fold” on your sticker. Move your mouse cursor into the selected area and “right click” – from there selected “layer via cut.” What this does is cut out our selected area and automatically create a new layer from it. This helps us edit it, and manipulate easier.
As you can see from my layers palette I now have a whole new layer with our side that we “cut off.” Select the layer (as shown above) and then press Ctrl/Cmd+T, after that the side we cut off will have a box around it. Right click in the box and select “Flip Horizontal” or Goto>Edit>Free Transfrom>Flip Horizontal.
Using the right click and Ctrl+T method on a windows machine brings up this dialog (as mentioned above)
With your side of the cut off circle still selected, move it to the side of your circle as shown above. I literalyl just moved it to the right a bit until it snapped into place. While moving the sliced side into place, try to picture how a fold would look as a guide as that is what we are trying to recreate.
5. Rotate our pieces
Bring up your layer panel and select both layers, as shown above. We need to rotate them like below.
The next step we need to is to rotate our pieces on an angle. Press Ctrl/Cmd+T, or Goto>Edit>Free Transform. Then rotate them on an angle as shown above. Pretty easy right?
6. Lets get our sticker looking more realistic
Bring up your layer manager and select your main circle. Right click it and select Blending Options to start styling our layer.
PLEASE NOTE: – Ok the following are all screenshots of the settings I used for my sticker. These are recommended settings and I encourage you to try my settings but I also encourage you to try your own and experiment with what looks best. Good Luck!!!
\I applied a simple drop shadow- definitely fiddle with the settings of this based on what background your sticker is sitting on.
I used a simple gradient overlay with a multiple blend mode – Try dragging the gradient as well on your circle to get more realistic effects.
I also put a slight inner glow on the sticker to make it looka little more realistic. Experiment with this – it can be tricky based on what color your sticker is.
Lastly I applied the pattern you downloaded above at the top of this tutorial, If you didn’t download it, you can grab it here. Try the links in the download too to try more patterns.
7. Style the sticker’s fold
Just like we did before for our main circle, lets stylize the fold for our sticker. Select the fold layer in your layer panel and right click to access the blending options.
PLEASE NOTE: As mentioned in step 6, these are recommended settings – I encourage you to experiment with your own!
I made a large drop shadow that made it look like the fold is above our main circle. Try clicking the fold itself and dragging the drop shadow.
Add a simple inner Shadow to the fold to emphasize the depth of the fold’s curve
The inner Glow is crucial to the way the fold looks, make sure you fiddle with this A LOT!
Lastly and most importantly I added a gradient, after that we are all done.
This is what we end up with after plugging in all the settings – not bad, but lets add some texture with some brushes. I like slight grunge, if you don’t though I recommend just adding grunge to fold as it is more realistic.
8. Get some brushes!!
Ok I’m sorry that I can’t recommend some great brushes (that is because I think everyone has their style of grunge they want to achieve) but I can recommend some great brush sites – then you can pick any style you like!
- I put up a post for 100 free brushes here
- Check out Brusheezy.com – and search for grunge brushes.
- In the Src download I supplied some links to check out
- After you grab some brushes continue the tutorial below.
After you get some brushes go to your layer panel and Ctrl/Cmd Click on the Icon. Look at the picture above of where to click. When you click on the layer icon while holding ctrl/cmd it automatically highlights the contents of the layer.
Useful Tip: The Ctrl/Cmd Click method - is very important to prevent the brush from spilling onto other elements of your design – it is a very useful technique and I recommend you try to use it as much as possible in your own work as it saves a lot of time.
After I ctrl/Cmd clicked my layer create a new layer and begin painting with your grunge brush. Remember a lot goes a long way with grunge brushes!
This is what I came up with for my grunge layer. Simple, white grunge that gives the illusion that the sticker may have gotten wet, or has been used a lot. Now we need to create texture for the fold as well.
Repeat the above steps by ctrl/cmd+click the fold layer, then create a new layer. Then texture it with your new brushes. I picked a brush that shows a peeled or torn texture… as if the sticker was peeled off. Fool around with opacity and blending modes if possible to enhance the look of the texture.
This was my final result, I spent a little bit of time finding brushes and texturing – I’m sure you could easily surpass this with just a little bit of effort
9-Final touches
- Lastly I added some simple flat text with a gradient. And thats it. The tutorial goes over the basics of the sticker design and try fiddling around with settings to create some really unique designs. Good luck!
-
AndrewBoldman
Hi, cool post. I have been wondering about this topic,so thanks for writing.
-
Mike Hutchings
That is cool, but how do I get a canvas to be anything but square? I end up with round sticker image on a square canvas?
Great work!
-
Quijo
Thanks, I am just new in Photoshop but I want to design logo’s, banners, headers, icons and especially lay-outs! My sticker is not as good as yours but it is coming!
Thanks
-
Montoya, 
Quijo, 
Mike Hutchings, and 
John903 8:01 am on May 22, 2009 Permalink
Very nice site!
Nadine 3:31 am on May 23, 2009 Permalink
Hello,
Thanks for article. Everytime like to read you.
Thanks
Montoya 5:36 pm on July 7, 2010 Permalink
Nice!