Archive for the ‘Tutorials’ Category
Being a true leader of the design industry, Adobe’s dearest child Photoshop doesn’t stop scoring points by conquering web audience with great performance. It has become a good tradition to feature some interesting and fresh Photoshop tutorials on our blog and today we are happy to continue this lovely tradition. Today you’ll find here some excellent and well-composed info that will help you improve your existing skills and gain new ones.
Some of you might have noticed that successful tutorials circulate around the web and are being featured on the pages of multiple web design related blogs, and there is nothing about this – sharing information that is really valuable is a pleasant business to do. We did our best to pick up really worthy tutorials and we’ll appreciate any feedback about this collection from you guys. Take care now and stay tuned!
1. Learn The Basics of Compositing in Photoshop CS5
2. How to Create an HDR Image in Adobe CS5
3. Easy Casino Style Sign in Photoshop
* * *
jQuery technology keeps surprising web community with its awesomness because it is hard to find a technique that would be more effective and reliable. Lightweight JavaScript libraries give you excellent opportunities by creating remarkable front end design effects and highly functional back end admin features. jQuery is changing modern web standards by replacing obsolete and heavy scripts with lightweight and functional solutions.
We’ve decided to compile a list of comprehensive jQuery tutorials which will help you to extend your knowledge in the jQuery field. We think that these tutorials will be useful to read both for web developers and web designers because jQuery plugins masterly unite these two spheres with their excellent performance.
1. Quick Feedback Form with PHP and jQuery
* * *
2. Fade-in Spoiler Revealer
* * *
While the web world is gradually updating to HTML5 standards web developers are moving forward bringing us more and more new and useful info that you can do with HTML5. The “canvas” tag is one of the main trumps in HTML5 due to its simplicity and excellent functionality. This tag allows you to carry out dynamic, scriptable rendering of 2D shapes and bitmap images without a built in scene graph. We are sure that you have seen many original HTML5 experiments around the web and most of all these things were made using the canvas tag as well as light-weight Java scripts.
We are on the rise of the new Internet era when technologies become more simple and more accessible. With further development of HTML5 canvas element maybe we will face a battle between SVG (scalable vector graphics) and Canvas though it is too early to compare these technologies. Some time ago we’ve published a list of 25 Essential HTML5 Tutorials and Techniques and now we are glad to present Fresh HTML5 Canvas Tutorials.
HTML5 Canvas – Make and Image Black and White
* * *
HTML5 Live: Lesson 7 Shadows & Advanced Canvas Topics
* * *
You all know by now that the video professionals that normally produce the beautiful AfterEffects templates that you can purchase at TemplateMonster are kindly sharing their priceless After Effects experience. This time it’s going to be about how to manage the colors of the video effects you work with. And there are two difficulty levels presented here – Basic and Advanced. Enjoy!
Basic
1. Tint
This effect transforms full-color image into a two-color one. You should notice that all dark tones will have color #1 and light tones will have color #2. Using white fractal with transparent background will give opportunity to change the color of the one-color animation into anything you want.
As you may know any parameter that has stopwatch icon could be animated. Tint allows color animating – it means while animation will played the color may be changing. By changing the amount parameter you can tint your color (by setting 30% value for this parameter).
(click the image to see the full size)
2. Hue/Saturation
The Hue Master will shift all your colors – it means that changing the hue value will shift the color scale (this scale shows what color will correspond the old color in the image).
(click the image to see the full size)
By checking the Colorize box you can turn on three options from the bottom of a panel. Colorize value creates one color tint effect similar to Tint. The Range channel shows the current tone color. Please note that this function can not be applied for black and white colors.
Read the rest of this entry »
We’ve started posting our small tutorials for Adobe After Effects beginners – that in turn was inspired by the launch of After Effects Logo Reveal animations. Judging from the first post success you really like those tutorials so today we’re rolling out a new portion of them (not to mention the fact we’ve been planning to publish a second part from the very beginning).
And of course today we’re also sharing a nice little freebie in the end of the post. So make sure you stay with us and read the tutorials to get to the freebie. Here go the tutorials:
* * *
Picture Breaking Into Pieces
(based on animation from Dynamic Flash Photo Galleries presentation)
- Create new composition 730х411, 5 sec, 30 fps, Square pixels
- Create a new layer
- Apply Trapcode Particular
- Place a picture that will be breaking into the composition and make this picture’s layer 3D. In the Particular settings set this layer as an Emitter
- Apply settings as shown below
(click the image to see in full size)
You may have heard we’ve recently launched these beautiful After Effects Logo Reveals – the most dynamic way for you to display your corporate logo in any kind of video or animation. So we assume not all of you know exactly just how awesome Adobe After Effects is as a software. That is why our video professionals have prepared a couple of basic After Effects tutorials on how to work with After Effects so you could see how simple and efficient it is.
Now please welcome the first of two portions of basic Adobe After Effects tutorials, plus a bonus in the end of the post.
* * *
Particles Flowing Around the Sphere
In these tutorials we use third-party plugin Trapcode Particular 2.
- Create a new composition 512х288, 4 sec, 30 fps, Square pixels
- Create a new layer
- Apply Trapcode Particular
- Apply settings like this:
We are always close to the latest technologies – you know that, so today let’s cover some more info on the new fundamental markup language for the web – HTML5 that you all love so much.
When saying about HTML5, developers mean the new semantic structural tags, API specs like canvas or offline storage, new inline semantic tags, etc. HTML5, in fact, is aimed at creating a comprehensive markup language for front-end development, able to provide qualitative information on the different elements of the page. But to help make some sense of what’s new and essential in HTML5, you could review some helpful and indispensable HTML5 tutorials that go over many of the major HTML5 aspects and new standards.
The whole purpose of this post is to help you master HTML5 rich features through simple guidelines and easy to follow techniques. These useful HTML5 tutorials will help you keep a track providing more tips and tricks that you can use in your HTML5-based projects. Still if you find something missing, share it kindly in the comments below. After all, another effective HTML5 tutorial won’t be out of place here.
HTML5 Unleashed: Tips, Tricks and Techniques
* * *
Implementing HTML5 Drag and Drop: New Premium Tutorial
* * *
Blowing up HTML5 video and mapping it into 3D space
* * *
If you ever struggled with AfterEffects and need to brush up your skills, than here is the list of highly effective video tutorials to get started with. They will guide you through advanced and challenging aspects of massively popular AfterEffects multimedia application. Plus you’ll be able to master this software to create compelling effects and deliver unmatched creative power for film and broadcast, video productions or animated web graphics.
Get into the multimedia field with truly professional standards. To begin getting the very most out of powerful AfterEffects please review the sections below to view helpful video tutorials. With thorough understanding they provide, you will be able to easily solve some of the trickier design aspects. Feel free to experiment and enjoy the new AfterEffects masterpieces.
Glass Orbs
* * *
Knowing Earth
* * *
The iPad. The killer word coming off everyone’s lips lately… This is the newest mobile computing device (a.k.a. Apple Tablet) that claims to revolutionize how we consume web content. We must admit that this tablet has huge potential, so many people already want their website to be perfectly optimized for this recently unveiled gadget.
What do they need to do when designing pages to perform on this interesting Apple invention? For general design principles, we’ve rounded up a few options below that will give a little guidance. Now’s the time to keep your eyes open for the iPad-optimized design tips:
Specific Features of iPad Display
iPad has the high-resolution, 9.7-inch (screen resolution of 1024×768 pixels) LED-backlit IPS touch-sensitive screen which is remarkably vivid for web browsing, media consumption, gaming etc. Its tactile and luscious interface invites amazing close-ups putting the objects almost literally in the hands of the gadget user.
- Landscape and Portrait Mode Styling
The iPad allows for both horizontal and vertical style viewing. This will pose some interesting possibilities for web designers to incorporate features that wouldn’t have worked before. The point is that the styling has completely changed when the orientation changes, and for the designers this means two completely different layouts for which to design.
The fact is that the iPad marks the return to magazine formats introducing the web’s first truly vertical screen orientation. While computer monitors have always had a landscape styling, now we can see a lot of web content consumption in a vertical mode which will result in new web designs and web information architecture.
Since the portrait mode encourages vertical scanning and the user can now see the entire page without having to scroll, web pages will no longer be viewed one half at a time and the designers can finally design pages that are meant to be scanned and read all at one time. This vertically-inclined resolution means that versions of the websites for the iPad will get narrower and taller. The landscape mode in its own way makes it very easy to browse sites that display content horizontally. It’s for this specific reason that more of an emphasis is placed on smart and fluid layouts that can easily work both ways adapting the content according to the screen resolution.
Accessing the web through mobile handheld devices is a usual practice these days. It’s apparent that people hooked to the Internet via their phones are on the huge rise. Furthermore, lots of consumer-focused companies have already realized how promising the mobile platform is and have by now equipped themselves with a mobile-friendly alternatives to their primary websites so that they will as well provide an accessible user experience on mobile devices.
In fact mobile web browsing is not a passing fad, it has actually become an absolute necessity, even the new Internet standard. So if you haven’t yet set up your own mobile site, we’ll today focus on how you can create a mobile version of your site running through various important options and basic techniques you can employ to make your mobile site work successfully. Besides, you might be interested to explore the most conspicuous mobile web design trends for 2011 and find some graphic approaches to consider for your custom mobile designs.
Now having got some of the theory out of the way, let’s turn our attention to more practical matters. There is a special procedure involved in designing a mobile website. The easiest way to build your mobile site is to modify your existing website to make it compatible for mobile handsets. If you decide to do so, expect that there will be big changes in terms of layout, design and construction. Here are some principles you should take note of before proceeding to build one of your own:
1. Layout
It can be time consuming to browse through a mobile site, so remember to put all of the most important information you want mobile users to see on the top of the page. And don’t forget to include your company logo being customized for a mobile site. Make sure to minimize left/right navigation, which is difficult on a phone, and instead arrange your content in a single column layout. Also you should minimize the use of tables, but if you do need to incorporate them, use no more than 2 columns, and avoid row and column merging.
2. Content
You should make sure that the information on your website is easy to read and navigate, and doesn’t take the visitors much to figure out, since they’re probably on the go while looking at your mobile site. Having finally selected what part of the content should be displayed on mobile, tailor your site menu adjusting text to avoid zooming. As for the typography used to render the content, consider using headings to control font sizing.
3. Coding
Read the rest of this entry »
Featured Templates
Follow TemplateMonster Updates
Rss Feed: