apps, business, Design, Development, Entrepreneur, geek, Inspiration, Nerd Fun, programming, Tech, Tips, Tutorials

6 Steps to Designing a Stellar iPhone 6 App

mobile-ui-inspiration-app-design

Everyone knows Apple cannot be ignored. Ever since the company captivated the masses with its revolutionary iPhone, it has been setting the standard for the smartphone market. Although some would say the flagship device was threatened by the larger screens found in Android devices, since the iPhone 6 was released, this argument has been all but completely shut down. With the iPhone 6 clocking in at 4.7 inches and the iPhone 6 plus at 5.5 inches, you’d be hard pressed to find someone who’d argue the screen size is too small when compared to other phones on the market.

The bottom line is that Apple’s iPhone is still the undisputed king of smartphones, so your understanding (or lack-there-of) on how to properly design apps for the platform will determine your success as an app developer. So, let’s talk about how to design a stellar iPhone 6 app with the following six steps:

1. Draft Your Problem and Solution Statements

how-to-create-a-minimum-viable-product-app
How To Create a Minimum Viable Product

The first thing you need to do when designing an app is defining what it is that you’ll be building. The best way to start that is by developing a high-level problem statement. The answer to that problem statement should be the functional requirements for your app.

For example, let’s say this is our problem statement: As an iPhone user, I have to input too many passwords into various apps and websites and it becomes difficult for me to remember them all.

We might answer that by saying: The “ABC” iPhone 6 app seeks to solve the problem of having to remember and enter various passwords for many different apps. The app will automate this process.

Now, you have identified your problem and created an elevator pitch to explain your app. Being able to communicate your vision is a crucial first step.

2. Check out the Competition

mobile-ui-inspiration-app-design
Mobile Design Inspiration

If your app is an improvement of an existing system or application, you need to scope out the competition to see what they’re doing. You need to understand two things: what IS working and what ISN’T working. If you can identify these things, you can unearth some compelling ideas for how to make your app competitive.

When scoping out the competition, evaluate the design, usability, functionality and popular appeal. If one of your competitors has a poorly-designed app with non-intuitive usability and limited functionality, then it may not be popular. If it is popular, then you may have an opportunity to capture some of its user base by creating and marketing a better solution.

3. Explore App Designs

How-to-Build-Your-App-Idea-Even-If-you-dont-1
I HAVE AN APP IDEA BUT NO PROGRAMMING SKILLS

Aside from researching direct competition and evaluating some of the top performing apps the iPhone 6 has to offer, you should take a look at what the creative community is working on. Behance and Dribbble are great places to search for and get ideas.

Look at a variety of apps that serve a variety of purposes to begin thinking outside of the box in terms of how you can solve problems that you face when building your app.

4. Use Wireframe Mockups and Prototypes

top-wireframing-tools-app-ideas
The 20 best wireframing tools

Take your napkin sketches to the next level with a program like UXPin, which allows you to quickly create retina ready, interactive designs. This is a critical step for ensuring there are no surprises during development. Oftentimes, written requirements can be interpreted in multiple ways. Visual requirements in the form of a prototype, however, leave little room to interpretation.

You also want to be sure (especially when you get to the pixel-perfect stage) that you can view the designs you’re creating for an iPhone 6 on an actual iPhone 6. If you don’t currently have one, pick one up through a carrier like T-Mobile.

5. Embrace the iOS Human Interface Design Guidelines

8-tips-from-apples-official-guide-to-app-design
8 Tips From Apple’s Official Guide To App Design

When designing an application, it is imperative to understand the strengths and limitations of the platform on which you are designing. You don’t want to break obvious design rules without good reason, especially when Apple has done an excellent job at documenting the design practices it encourages via the Human Interface Design Guidelines.

This document urges you to “defer to the content,” use “plenty of negative space” and avoid “gratuitous embellishments” when designing your app. This is not only sound device, but it also makes the job of the developers that much easier, which has the potential to have a tremendous impact on the cost of the app.

6. Achieve Pixel-Perfect Design

end-of-pixel-perfect-design
Does 2015 mark the end of pixel perfect design?

Before you can hand over your designs to the development team, make sure you have achieved pixel-perfect design. The only difference in how the design of apps on previous generations of iPhones were executed is that they scale up differently on retina screens. This should not be an obstacle if you’re designing with points instead of pixels and using vectors wherever possible. Generating scalable, pixel-perfect designs ensures your creative vision is executed to a “T” when it comes to building the application.

Read More...

advertising, business, Entrepreneur, marketing, SEO, Tech, Tips, Tutorials, web

Five SEO Fallacies That You Should Ignore

navigate-seo-fallacy-learn-the-true-rankings-of-search

If you own a website or you are anyhow connected to the latest happenings and trends on the Internet, then you have probably heard the term Search Engine Optimisation, widely known as SEO. Truth is: SEO is a very important aspect of building your online empire that helps you attract more visitors by showing on the first pages of search engine results. However, SEO is yet another topic that is associated with numerous false beliefs that not only don’t help, but sometimes even ruin your efforts of developing a SEO friendly website. In order to save you precious time, we have listed here the top five SEO fallacies that should be ignored. Use the time saved on something useful instead!

1. Meta title, meta tags and meta description improve your ranking

wordstream-seo-basics-guide
SEO Basics: Complete Beginner’s Guide to Search Engine Optimization

Well, this should be already familiar to everyone who considers themselves a SEO expert, but anyway let’s put it out there. Meta title, meta tags and meta description won’t improve your ranking on Google. Yes, it’s definitely smart to use them and make them as recommended by search engines. However, don’t rely too much on them since they’re far from crucial. In fact, these three little things usually help you improve your click-through rate and that’s about it. The time when doing meta title, meta tags and meta description meant having a SEO friendly site are over.

2. You should use as many inbound links as possible.

beginners-guide-to-seo
The Beginner’s Guide to SEO

Um, not really. Inbound links are important; nobody tries to opposite that thesis. Nevertheless, low quality incoming links can result in a penalty or lowered rankings. Therefore, you should focus on high quality inbound links as well as on organic link building. Provide content that people would enjoy reading and also make your content so good that people would enjoy linking it to their websites, blogs and so on. Never forget that SEO is all about quality and not quantity. This can help you stay true to your visitors and avoid making rookie mistakes that can cost you a lot on the long run.

3. The more content the better!

SEO-Content
11 SEO Tactics You Need to Know in 2015

The belief that search engines love content is another myth that has to be busted. Honestly, this is not 100% false because content can certainly help you improve your website rankings. However, the crucial thing to remember is that not all content is desirable content. There are thousands of companies, for example, that have heard this fallacy and started publishing whatever they can think of. Such actions usually have the opposite effect and can result in a penalty. If you really want to improve your SEO then you should focus on having high quality content only. If you’re wondering what a high quality content in the “eyes” of Google is… well, people link to it, it’s widely shared on social media and it’s viewed by thousands or even millions of visitors. Therefore, if you’re making let’s say a directory of online slots or site that informs visitors where to play high quality casino games – stick to the topic and double check every piece of detail you provide.

4. There is a preferred keyword density.

Just no. This fallacy has been around for too long and it’s funny how people fail to see it. There isn’t an optimal keyword density that can help you improve your site ranking. The only idea here is to make your content readable and enjoyable. Too many keywords will most certainly be noticed by the most important factor – READERS and thus you should avoid using them countless times. However, Google doesn’t really care how many keywords you have decided to use and if you only care about Google then you’re free to use ten or twenty keywords per paragraph; but how would your visitors feel about that?

5. SEO can help you achieve results quickly.

navigate-seo-fallacy-learn-the-true-rankings-of-search
5 SEO Strategies That Will Still Work in 2015

The final fallacy that website owners have to have in mind is that SEO provides fast results. To make a SEO friendly site is a strategy that should be incorporated on the long run. Building a SEO friendly site is a process that cannot be completed overnight and thus nobody can guarantee positive results after several weeks. Yes, your site would probably have slightly improved ratings and start attracting more visitors, but that doesn’t mean that in a month or two you will be ranked #1. Therefore, you should have patience, stick to your strategy and be proud of any progress.

Read More...

branding, business, Design, Entrepreneur, freelance, Inspiration, Tips, Tutorials, web

5 Keys to Building a Powerful Business Website

best-free-wordpress-themes

Having an effective website is critical for any small business — it is often the first experience a potential customer has with you and your brand. Yet many small businesses still pay little attention to the design and creation of their online presence. While you don’t need to know how to build a site, as the owner, you need to weigh in on the content, navigation of information, web page design and the customer sales path.

Whether you are building a website from scratch, or need to revamp your existing site, there are five keys to building a high-performing website for your small business. How you want to approach each will help you create a strong brief for the web designer — which will result in a better website.

1. Determine the Point of Your Website


Finding your site’s true purpose: A guide to goal-focused marketing

Building a website just because you have to will not lead to having the best website for your business. You need to know what you want the site to do for you. What is the value it will bring to your business? Think it through and make some notes about what you really want your website to accomplish.

For example, will it simply be a point of contact for potential customers? Will it serve as a digital showcase for your products? Will you sell those products from the site? Do you want it to generate enquiries? Perhaps it will be a space for you to assert your authority within your industry. Maybe you have some administrative needs, like automating sales, transactions or customer communications. It may even provide income from ads or affiliate referrals. Be clear about what purpose your website will serve, both to your business and your customers.

2. Decide on Whether a Template Is Sufficient or You Need Custom Web Design


The 42 best free WordPress themes

There are some beautiful templates available, and using them can drastically reduce your development costs. They are easy to install and update by yourself and your team. But if you need a unique look, a custom designed and developed site may be the way to go.

Choosing to use an off-the-shelf template or theme is an affordable option, which makes them popular with budget-strapped start-ups and small businesses. They can also be sufficient for brands that need a simple site, and are a flexible starting point for business owners who possess some technical skills. However, these sites usually come with limited functionality and can be time consuming and tricky to modify if you don’t have a great deal of technical knowledge. They can also look generic and like many other sites.

Having a custom website designed has the advantage of letting you define almost every aspect of how your site looks and functions. The downside is the web page design and development costs are higher, they take longer for the initial build, and you will likely need to go back to your developer for any future edits or upgrades. So why do it? Because your site will be unique to you, and that may be an important component of your brand strategy.

3. Determine Who Will Create Your Website Content


6 Timeless Tips for Writing Great Web Content

Many small businesses on the look of the site, but don’t pay much attention to the content. This is a mistake. Content is critical, and it’s the thing that can slow down a web development processes. The look may attract people to your site, but the content will be the basis upon which they decide to buy from you… or not. You need carefully crafted content for each product or service offering in your company. Whether your write it yourself or hire a web copywriter, be prepared to spend time on your content. You know you business best and you will need to carve out time to make sure the web content accurately reflects both key information and the general spirit of your brand.

4. Decide on the Nature, Amount, and Organization of Content


10 WRITING TIPS FOR WEB DESIGNERS

Whether your site is an ecommerce platform selling multiple products or a showcase website to feature your services, it is important to organize your content into logical categories or sections that allow visitors to easily find what they are looking for.

In addition to well-written content that gives your customers a complete picture of who you are and what the purpose of your site is, clear navigation will help them find the information they need.

The rule is to never make users work hard to find what they want. Clear navigation helps make it easier for users to find what they’re after. Navigation along the top and down the left hand side of your site, for example, allows for intuitive browsing and makes it easy for your visitors to make a purchase or complete another desirable action.

A good way to determine the nature and amount of content you want is to study other websites—your competitors and just sites you like to visit. How are they doing it? What works and what doesn’t?

5. Choose Who Will Maintain the Website


Website Maintenance Tips for Front-End Developers

Unlike a print brochure, a website needs to be constantly maintained. From content updates, such as loading new products, to system upgrades, there will always be some degree of tweaking going on with your site. In addition, search engines will rank your site higher if you regularly update the content.

Deciding who will be responsible for editing, adding to, and maintaining your web page design is an important choice. It could be you, an in-house staff member, a freelancer, or you could pay your web designer to do it. Magicdust is one of such web designers Sydney has to offer. The important thing is to create a plan that will ensure no area gets overlooked and your site stays fresh and appealing.

Paying attention to these five key aspects of your web page design will ensure you build a powerful site that performs for you for the long term.

Read More...

business, Entrepreneur, freelance, Reviews, Tech, Tutorials, web

How PrestaShop Will Change The Way You Build An Ecommerce Store

back-office-responsive-design-prestashop

The Ecommerce space is more competitive than ever. Everyone shops online these days, and more and more people do it every year, this is why having an online presence capable of giving your customers a good experience is so valuable. There are SO MANY eCommerce solutions out there it can be nearly impossible to weed through them and pick one (Magento, Woocommerce + WP, Shopify, Bigcartel, OSCommerce, the list goes on and on, and not all of them are free to use – some even charge monthly fees or take a percentage of your sales!) – let alone pick the right one for you! I have tried most all of them (since back in the day when OSCommerce was king) and this month i’ve had the honor of reviewing PrestaShop, so if you are looking for a new platform for your online store (or your clients stores) then stick around for the review!

What is PrestaShop?

logo

PrestaShop is the most reliable and flexible Open-source e-commerce software. Since 2007, PrestaShop has revolutionized the industry by providing features that engage shoppers and increase online sales. The PrestaTeam consists of over 100 passionate individuals and more than 600,000 community members dedicated to innovated technology.

Impressions

Now that you know a little about PrestaShop, let’s take a bit of a deeper look and see if you think it is right for your business, or your current eCommerce project. I have divided the following sections into Installation, Getting Started, Usability, and Modules, Themes, and Beyond.

Installation


Installing PrestaShop On Your Server – Tutorial

Super simple, as you can see by that video – if you have ever used wordpress and installed it yourself, you can easily do this. It is essentially the same thing. PrestaShop is FREE to download and use (It is open source), all you need is a domain and a hosting provider (which is what you need for most any website), to get it just download the files from PrestaShop and upload them to your server where you want your website to go, log into your cpanel (or whatever your host uses for management of your hosting) and create a MySQL database, enter that information in when you go to your domain to install PrestaShop, and it does all the work for you :). If you are super geeky they even have instructions on installing it locally on your computer so you can play with it there.

Getting Started

Now that it is installed and you have a shiny new ecommerce store, let’s get started!

New Look for PrestaShop v 1.6

If you have used PrestaShop before (or even if you haven’t) then the first thing you will notice when you log into the back office (admin area) is just how slick and responsive it is now. Not only is it sleek and functional with plenty of options and helpful data insights that aren’t a cluttered mess, it’s fully RESPONSIVE (on the front end as well as the back-office!) out of the box!! What does this mean for you? Lot’s of things. Not only does it look awesome, it’s fun to use, and you can use it anywhere! Only have your tablet with you but need to upload some products and get some work done? Or pull a product down? Or update a promotion? That tablet or smartphone is more than enough to dig in and use a fully featured eCommerce solution like PrestaShop. Needless to say the new version of PrestaShop makes it an even better product.

Creating a Catalog with Categories & Products

prestashop-catolog-panel-1

So as with every eCommerce solution, after the setup, one of the first things you do is add some products! That is what the store is all about isn’t it? No products, no store! So dive in – adding categories and products to your catalog couldn’t be simpler.

There are 3 types of products PrestaShop handles out of the box:

  • Standard product
  • Pack of existing products
  • Virtual product (services, booking, downloadable products, etc.)

add-product-prestashop

The process to add categories and products is what you would expect, but everything is snappy and responsive and not frustrating to use like some systems are, the updated look and functionality really helps in this aspect.

All of that stuff is pretty standard so I won’t focus on that too much, onward to the settings! PrestaShop has a robust offering of configurations and settings that I can’t possibly cover here, but if you want a full list definitely check out the live demo of the admin panel and play around with all of it!

Settings & Configurations

It’s always a good idea to be familiar with the global configurations of your platform, whatever it is – just to see what its capable of – there may be an option in there that changes something you’ve been looking all over to find, or the other extreme is you might not even know it can do something awesome! Before you launch your site you need to set things like shipping rates, tax settings, merchant account info so you can get paid – and some of these things can be done in modules (which we will get into briefly in a moment).

There are a lot of globalization settings, you can even import a localization pack for your country if you aren’t in the U.S. – you obviously would want to set all of the currency, language, shipping, etc settings that have to deal with this. PrestaShop has a really nice level of customization when it comes to all of these things – surely if you need to modify any of this you’ll find the option you need, or a module that will do it for you.

You can also add employees/users to the back office, you can add as many as you want, just like there is no limit to the number of products you can sell, you can add as many employees or users as you like.

Usability

prestashop-front-end-responsive-design-theme-template

The usability has been heavily upgraded in PrestaShop since the last versions – the latest version is 1.6 and as I mentioned before, the back office is fully responsive now, but that’s not the only thing that is responsive – the front end comes responsive out of the box as well! With these improvements there has never been a faster way to go from no site, to a nice functional responsive ecommerce site in minutes (realistically hours with adding products and customizations) than with PrestaShop. The default theme has all the stuff you’d expect from a theme, social media, banners, products grid, customize-able logo etc. If you don’t like the default theme though never fear, there are plenty of free and premium themes, which we’ll talk about briefly in the next point.

back-office-responsive-design-prestashop

We’ve talked about the back office already, and how well designed it is, so of course we are going to mention its Usability again. It’s light interface does a great job at keeping track of customers, orders, inventory, inventory movement, stats and supplier orders. The new PrestaShop really puts you in command of your data, you can get all kinds of reporting info on the targeted customer such as their previous purchases, groups they are in, internal notes about the customer, vouchers and more. The easiest way to explain it really is to try it out, so go check out the demo we linked to, but the reporting and real time data forecasts are really something to talk about.

prestashop-forecast-data-dashboard

When it comes to the data it really is invaluable when it comes to the inventory and sales data – PrestaShop takes it and compiles forecasts for you that will be helpful to your business outlook. In other words, PrestaShop will forecast when your busy season is and when you might want to cut back, how cool is that?

Modules, Themes, and Beyond

prestashop-theme-store

Just as you are used to with CMS software such as WordPress – there are Themes and Modules for PrestaShop. Some of them are free and some of them are premium items, but its good to have options :). PrestaShop seems to have a thriving community around it so you don’t have to worry about setting up shop and getting stuck or left behind by a dead platform. If you want to start with the default theme and move up as time goes on that is completely fine. If you are familiar with PHP and smarty templates (as well as HTML, CSS, Javascript) then you shouldn’t have any trouble customizing your own store templates or creating new ones (in fact there are plenty of them here). If you aren’t a savvy developer or code monkey then never fear, its a familiar technology and you should be able to find plenty of freelance developers that could customize your shop for you for a reasonable rate – I am sure most WordPress developers could pick it up.

The main selling point here for PrestaShop is the versatility and simplicity – its just easy to use, and easy to customize, easy to find extentions/add ons, and its just nice, the community makes it even nicer. We all know that a software is just as good as its community.

Final Word

My opinion? I really like PrestaShop – it is a solid alternative to the other ecommerce software out there. I have always hated Magento because of its bulkyness, awkwardness, and uglyness. Magento was one of the only full service softwares though because WordPress sometimes just doesn’t cut it for larger more established online stores that need a reliable and dedicated sales portal – PrestaShop fills this space perfectly. If you are on the market for a new eCommerce software to give a try, or fed up with the current software offerings out there, or maybe you haven’t tried anything and are looking for a good place to start with a new online store – I’d say go with PrestaShop and give it a go – its a solid product. Don’t take my word for it though, you should check it out and try it out yourself, evaluate what it offers because you are the only one that knows your business inside and out – so you should be able to tell after you test it out if its a good fit for you. You can get started with PrestaShop is just a few simple steps, check it out here!

I hope you found this review helpful! If you have tried PrestaShop definitely let us know what you think below – if you know of other products we should review definitely get in touch with us so that we can share more great time saving and useful products with our readers!

Thanks for reading!

You like this? Don’t forget to follow us on twitter @andysowards and like us on facebook @andysowardsfan! We are also on that Google Plus & Pinterest thing.

Read More...

3D, apps, business, productivity, Reviews, Tech, Tips, Tutorials

How to Make A Slideshow with 3D Animation Effects – Tips & Examples

1-interface

Sometimes you just need a quick, easy to make slideshow that looks professional and can be seen easily in a few different mediums, whether you are speaking at an event or need to whip something up for a local business meeting or even something you might not think about, a funeral, or commemorating an anniversary or something you want to be remembered. Needing to create a slideshow on short notice without knowing where to turn can be frustrating so thankfully these days software makes life easier – but there are so many slideshow solutions out there it can be hard to know which one to choose, or where to start. Our time is so limited these days and it can be frustrating to waste it on the wrong software, so spend less time worrying and more time focusing on what matters!

A while back we had reviewed an Easy Slideshow Creator for Photography Lovers so we thought we would do a follow up and review a new more professional slideshow maker for you guys. Today we are reviewing SmartSHOW 3D Smart Slideshow Software by AMS Software – you can learn more about the software at http://smartshow-software.com or keep reading for our review of the software with Tips & Examples of what you can create with it!

What Is SmartSHOW 3D

smartshow-3d-slideshow-software-box

SmartSHOW 3D is a new generation slideshow maker that combines professional capabilities with the ease of learning. The software comes with vast collections of slide designs, animation effects, transitions, title clips, and audio. There are ample opportunities for fine-tuning the slideshow and a large number of publishing options.

Features

  • Make slideshows with any number of photos
  • Add title clips, subtitles, music and voiceovers
  • Create amazing 3D collages with animation effects
  • Convert slideshows to video in 30+ popular formats
  • FREE technical support and updates for one year

First Impressions – How to Make A Slideshow

So when I downloaded SmartSHOW 3D (its about a 63MB file). If you have installed any previous windows software you should be right at home with the interface and setup wizard, just go through the steps and it will be running in no time (probably a few minutes). If you are a mac user though you are out of luck, this software is for windows users – which is the target audience anyway, if you are using a mac there are plenty of comparable software options for making slideshows so a quick google search should yield some worthy results, otherwise if you are on windows (any modern PC running Windows XP or newer should do) then you should be good to go :).

1-interface

Getting started is as easy as dragging and dropping your favorite photos into place, and you can instantly reorder them and select the transitions that you want to use with your photos! The learning curve is very quick and the interface helps make it that way.

Effects

2-effects

You can edit the photos on a per layer basis, you can even spice it up with different effects and transitions with the images or text – or even implement multiple images at the same time on the screen under your control with the well crafted collage templates at your disposal (simply click on the “collages” tab to access the various styles for these). You have a lot of control over your images – you can even add 3D effects such as the position of the image as well as its rotation on the screen with support for borders and shadows.

Animation/Video Features

3-animated-collages

You can add text effects to your slideshow as well as voiceover audio to give it more of a movie feel (there is even some starwars-esque subtitle effects with the text scrolling down from the top of the screen, how cool is that!? You can’t go wrong with starwars) with cool 3D text effects. There are also title clip templates that give your slideshow a title screen movie/dvd feel that is customized to your themed occasion (you can edit them a little bit as well!). Your slideshow will not be boring with all of the 3D Effects and transitions that you can include on your images that make the whole thing look really professional. There is also an option to include music, which always sets the mood for images – especially with slideshows!

Editing A Slideshow

4-slide-editor

There are so many options when it comes to this software you can always come back and master it more at a later date and get better at slideshows with each one that you create – you can save the slideshow in so many different formats that you can be sure that you will always be able to come back, make your changes, and export it in the way you need for your next gig or event that you are showing your pictures off at. If you want to share your precious moments with family or friends that are far away, or even the internet, you can export the slideshow as a video compatible with YouTube! The options really are great to have, especially for those who don’t know where to even begin with this stuff, this software makes it really easy for everyone.

Conclusion

Really solid software if you need a professional slideshow created quickly and easily that doesn’t look terrible or take forever to make – but don’t take my word for it, I would suggest giving it a try, It is free (what do you have to lose?) to try so Download free trial. The trial period doesn’t last long, however it does give you an idea of whether or not you can get what you need out of the software.

I hope you found this review helpful! If you have tried the product definitely let us know what you think below – if you know of other products we should review definitely get in touch with us so that we can share more great time saving and useful products with our readers!

Thanks for reading!

You like this? Don’t forget to follow us on twitter @andysowards and like us on facebook @andysowardsfan! We are also on that Google Plus & Pinterest thing.

Read More...

Art, Design, freebies, Tips, Tutorials, web

Textures to improve Webdesign + Free Textures!

5 Awesome Techniques for Using Textures in Your Designs

A Website and its homepage design is the face of any company today. Creative web design can make your homepage more attractive. It is an art combined with creativity and technology.

Web design gives a shape and look to a website and the color scheme sets the mood. But texture plays an important role in designing of the webpage. It gives beautiful look to the webpage. The main object of the texture is to seek the attention of visitors. Texture gives depth to the object. This depth is useful for showcasing the object in three dimensional (3D) views. After attention seeker and depth creator textures, photographic textures, pattern textures and the illusion textures are also very important.

The Whys And The Hows Of Textures In Web Design
The Whys And The Hows Of Textures In Web Design

To find these textures, you may want just search on the internet and get them on the free image stocking portals. Another way is applying texture on the images in your favorite image editor or creating textures in Photoshop itself. But let’s take look at how textures can improve your homepage or webpage design.

Attention Seeker Textures

high-quality-colorful-textures-attention-grabbing
High Quality Colorful Textures For Ambitious Designers

Seeking attentions of visitors is the main aim of the website and it is mostly achieved through attractive web designs. Textures can be deliberately used to seek the attention to the certain area of the website. Directed use of texture tends to pull visitors to the specific space of the website. Textured items can also look like ‘pop up’ items that gain the maximum attention.

Many times, important banners, notifications displayed on the website remain unnoticed. Texture or textural design of the banners or notifications can draw the visitors towards it. Apart from banner and notification, newly launched scheme, products, if textured, get good looks that eventually end attracting the visitors.
Sometimes advertisements may annoy the visitor because most of them hinder the visitor’s purpose of visiting the website. Textured design plays an important role here. Textured content or object works exactly opposite to the advertisement.It balances the view of visitors even though it successfully gains the attention of the visitors.

Depth Providing Textures

28 High Resolution Wood Textures For Designers
28 High Resolution Wood Textures For Designers

Texture certainly provides depth to any website. It can also add depth to illustrations. After re-designing the normal text by giving the depth, one can clearly see the changes in it as design begins to jump off the page. Dark shaded content attracts the visitors after giving texture to it as it gets the depth.

Depths, obtained by texture, can a give 3D look to the object featured in the picture. Many times it is important to give a 3D look to certain objects. Three dimensional effects on any pictures containing text and object can prove to be a visual treat on 2D screen.

Imagine a picture of a boy roaming in garden with their parents having a lollypop in his hand might seem boring for the visitors. We can make it interesting by adding texture to the object like lollypop. Textured dark red colored lollypop can look as a 3D image. Or imagine a picture of a beer bottle, if textured it will attract more visitors. After texturing the bottle anyone can see the trickling drops, giving the impressions of a chilled bottle.

Photographic Texture

How to Use Textures to Enhance Your Photographs
How to Use Textures to Enhance Your Photographs

One simple photograph can explain thousands of words.That’s why photographic textures are important in designing the website. Attention seeker and depth creating textures can apply on any object.

Setting up the mood of the photograph, showcasing the important part of the photograph could be done by using photographic textures. Detailing of the photo like its subject and perspective could also bedone by photographic textures. Showcasing the main object in the photograph by focusing it by applying texture is part of the photographic texture. Blurring the unwanted object from the photograph is also part of the photographic texture.
Imagine, a couple sitting on the table placed on a lawn but portrayed as they are working in office and the background of this scene is blue sky with green cover. It is difficult to pick the right spot in the normal picture. Here we can use the photographic texture to showcase the main object. We can partly blur the back ground to showcase that the couple is working in a healthy atmosphere. This is the photographic texture technique.

Pattern texture

5 Awesome Techniques for Using Textures in Your Designs
5 Awesome Techniques for Using Textures in Your Designs

Sometimes, you may find it difficult to portray the desired object in a photo or content.Then the next best option is creating graphics.In these graphical pictures we use the pattern texture to showcase the details from the picture. Sometimes we use same color schemes for detailing the content but it becomes difficult to differentiate the shades of the same color. It is the most common problem faced while using the shades of the same color. This differentiation of the color shades can be done by using pattern textures.

In some cases differentiation between collage and appendix is important. Using different colors may look odd at times but using single color with different shades in collage and appendix certainly becomes visually appealing. For example black and white color schemed menu cards of the restaurants displayed on the website are pattern textured.

Illusion texture

100 Terrific Photographic Textures
100 Terrific Photographic Textures

The object in the picture is bigger than it actually appears, is it possible to do that? Yes it possible, it is done by using illusion texture. Many times we have seen the objects appearing bigger and with the 3D views. Cartoons displayed on the web pages are illusion textured.

Illusion texture is used mostly in the advertisement contents. Advertisements of shoes are mostly illusion textured. Imagine a model standing tall on the wall. We cannot guess what exactly they want to showcase unless and until they don’t give special effects to the product they want to showcase. Illusion texture plays a big role in it. Different colored shoes or watch with slight 3D view can send the right message to the visitor.

Start using textures today!!

grundge banner

Grunge Textures are not hinting at going anywhere anytime soon. Despite the fact that its typically harsh and frequently has a dirt component added to it, yet there is no cutting down on its popularity. We’ve got an incredible set of simple and subtle grunge compositions for you. They’re ideal for including simply a clue of surface to your website or photographs. Utilizing composition records, you can adjust the general inclination and feeling of an overall standard photograph. It can truly have any kind of effect and add a level of professionalism to your overall normal photographs

Get Trendy with Grunge Textures. Grab them here today!

Read More...

Art, Code, css3, Design, Development, Entrepreneur, freelance, HTML5, Inspiration, Nerd Fun, programming, Tech, Tips, Tutorials, Video, web

Online Resources To Advance Your Web Design Career

lynda.com-you-can-learn-it-advance-web-design-career-tutorials

Life is expensive. And your backyard is completely devoid of money trees. You long to return to school to brush up on your web design skills, but there is no way you can afford to give up your job. You find yourself in quite the conundrum. Furthering your education would greatly advance your career, but putting your career on hold would render you homeless and hungry.

Don’t give up on your dreams just yet. It turns out that you don’t have to sacrifice your paycheck–or your creature comforts–in order to go back to school. Thanks to a plethora of online resources, you can hone your web design skills from the comfort of your own home at a time that’s convenient.

Here are a sampling of the resources that you can put to work for you.

1. Lynda.com

lynda.com-you-can-learn-it-advance-web-design-career-tutorials

One of the most comprehensive premium sites found on the web, Lynda.com offers over 2300 video courses and 112,000 tutorials. If you value experience, you will be pleased to know that Lynda.com has been in the biz since 1995 and that all of their offerings are taught by field experts. A monthly fee–starting as low as $25–entitles you to access all of their courses. You can even use Lynda.com via your mobile device. If you need to “read” to learn, you can opt to follow along with closed captioning, and your custom-designed playlist will help you keep track of all of your course selections. And Lynda.com proudly rolls out new offerings each week. Try their seven-day free trial to see if it’s the right fit for you.

2. Udacity

udacity-teach-yourself-web-design-online-tutorials

Udacity offers a broad spectrum of courses including free “courseware” options and subscription-based “full courses.” The free option enables users to access courses, videos, and exercises; however, a subscription entitles you to partake in class projects, take advantage of personal coaching, receive feedback and reviews, and earn a verified course certificate. Led by professors from top Universities, you will get to create hands-on projects that you can add to your portfolio.

3. Treehouse

learning-web-design-online-tutorials-treehouse

Treehouse prides itself on making the educational experience fun. They’ve put the “earning” back in the word “learning,” by enabling users to earn badges that you can display on your profile. Plus, at the end of each course, you will be prompted to engage in an interactive test–yes testing can be enjoyable–to check out your level of mastery. Treehouse users also accumulate points as achievements are completed. And, earning 2000 Treehouse points equates to potentially increasing your salary in the real world by $10,000. Treehouse offers both silver (25$/month) and gold($50/month) packages, enabling you to choose the option that best meets your needs.

4. Don’t Fear the Internet

dont-fear-the-internet-web-design-introduction-video-tutorials

Designed for individuals with little Web Design experience, this is the perfect option for someone who wants to learn about the field before investing a lot of time and money. You will be able to learn the basics of CSS, HTML, typography, Classes & IDs, and more. Don’t Fear the Internet is funded by donations and open to the public for free. All courses are delivered via video and come with written notes that you can use for study purposes.

If the thought of studying at home is somewhat intimidating, don’t worry. It just takes a little stick-to-it-iveness, time-management skills, and, of course, keeping your eyes firmly on your goals. For some practical advice, check out 7 Tips for Succeeding in Your Online Education Program.

So stop hunting for that mythical money tree. Thanks to these online resources, you can have your job and education too. Get out there and learn while you earn.

What is your favorite online resource for Web Design Know-how? Why?

Read More...

Art, Design, geek, Inspiration, Nerd Fun, photography, print, Tips, Tutorials

Personal Holiday Cards to Make the Season Memorable

The Greeting Card Association reports Americans purchase approximately 6.5 billion greeting cards annually, with seven out of 10 card buyers stating greetings cards are “absolutely” or “almost” essential. The most popular seasonal cards are Christmas cards, with some 1.6 billion purchased each year.

It is unlikely this tradition will be going away anytime soon. There is just something special about receiving a card in the mail, holding it in your hand and perhaps even using it as part of holiday décor.

The difficult part for card designers is coming up with something unique. If you need a little inspiration to get your creativity sparked, consider some of these ideas for coming up with your own creative, interesting designs.

The Right Font

25+ Fresh & Beautiful Print Postcard Design Inspirations
25+ Fresh & Beautiful Print Postcard Design Inspirations

When creating a greeting card, many people don’t realize the importance of using the right font, but the visual appearance of what is written can have as much as an effect as the actual content. It can even help to create a particular mood.

Decide whether or not you want your card to be traditional, elegant, whimsical or something else. For example, Monotype Corsiva mimics the effect of handwritten text, while still being easily readable. It reflects a classic, heartfelt statement, such as, “Merry Christmas, and many blessings for a happy new year to you and yours.” On the other hand, a font such as Bauhaus 93 is rather cold-looking, and is perhaps better suited for a graphic design show flier. Using Times New Roman simply feels boring, so get creative and play with different kind of fonts in your cards.

To Avoid Clichés, or Not?

A Christmas Showcase: Creative Homemade Arts And Crafts [PICS]
A Christmas Showcase: Creative Homemade Arts And Crafts [PICS]

Christmas clichés are unavoidable. Shades of red and green, a snowy winter wonderland scene, holiday trees, wreaths, lights or one of the many different Santa Claus incarnations. This isn’t necessarily bad, since they can often invoke a serene feeling of old fashioned traditions.

At the same time, re-arranging these classics is likely to make them stand out among the rest. Avoid the cliché color schemes, you don’t have to stick to red, green and white. Think dark purple or blue, which could be used to create a spectacular midnight winter’s sky. Using a pastel set of colors rather than traditional bright colors can also add originality.

An Original Photo Card

Pantone Postcards for Design Geeks
Pantone Postcards for Design Geeks

Using Minted holiday cards is a great way to create an original photo card greeting. Have a photo taken of your family dressed in vintage clothing or in humorous poses to create something more whimsical and unique. You could all dress in nerdy Christmas sweaters or as Santa’s elves, or perhaps create an old-fashion scene wearing clothing inspired from past generations.

Give Santa a New Look

49 Awesome DIY Holiday Cards
49 Awesome DIY Holiday Cards

Use your artistic skills and creativity to create a completely new incarnation of Santa Claus. Perhaps you can be inspired by the area in which you live, especially if you don’t happen to be in a place where it tends to snow. What would Santa look like if he lived in your town? What if he enjoyed some of your interests? Could he be a “rock n’ roll” or a “country Santa,” a “fitness buff Santa,” or perhaps even an “environmentally friendly Santa?” Maybe his reindeer aren’t reindeer. If you live near the ocean, dolphins might lead his sleigh.

Read More...

Code, Design, Development, freelance, Inspiration, photoshop, productivity, Tips, Tutorials, web

30 Best Tutorials to Teach You PSD to HTML Conversion

BTTPHC12

You can learn pretty much anything you want in todays online landscape, it has truly changed the way we teach ourselves things (especially when it comes to design and development on the web). We have gotten used to translating screen shots or videos into skills and knowledge that we can apply. These tutorials are developed by ace professionals who have in-depth knowledge in a particular field and they have chosen this interactive teaching method for sharing their knowledge and enrich others. On the web, you are going to come across tutorials about anything you are looking for, like different function keys in an operating system or how to use Photoshop for creating different effects and almost any other topic.

This blog is dedicated to tutorials that help you master web development and design tools like photoshop. Today we are helping you learn how a PSD file can be setup to be coded into an HTML format to be used as your next website (or for a client project). These are the thirty best tutorials in this genre where you will get a detailed step by step description of the entire process. This comprehensive collection will cover the basics of HTML coding as well as the basic concepts for converting PSD files.

So if you are a designer that is scared of HTML, or just never had the time to learn how to code, these tutorials are just for you! Pick the ones that you like and dig in – remember, make sure you actually understand what you are learning, don’t just copy the code word for word in your own project because if it breaks you won’t understand why! Get your learn on! Enjoy!

1. 1stDelicious

Demo & Download

2. Build a Sleek Portfolio Site from Scratch

Demo & Download

3. Building a Set of Website Designs

Demo & Download

4. Clean magazine style PSD template to HTML

Demo & Download

5. Clean Minimalist HTML CSS Website Layout

Demo & Download

6. 1st Ideas

Demo & Download

7. 3D Portfolio Dark Layout

Demo & Download

8. Code a Clean Business Website Design

Demo & Download

9. Code a Corporate Website

Demo & Download

10. Code a Modern Design Studio

Demo & Download

11. Code a Stylish Portfolio Design in HTML

Demo & Download

12. Code an Awesome Minimal Design from PSD to XHTML

Demo & Download

13. Coding a Band Website

Demo & Download

14. Coding a Clean and Professional Web Design

Demo & Download

15. Comic Book Themed Web Design

Demo & Download

16. Convert a Photoshop Mockup to XHTML

Demo & Download

17. Convert Artthatworks From PSD To HTML

Demo & Download

18. Convert a Slick PSD Design to XHTML

Demo & Download

19. Convert a Warm, Cheerful Web Design to HTML

Demo & Download

20. Convert Business PSD template to HTML

Demo & Download

21. Create a Chalkboard Style

Demo & Download

22. Create a lovely textured web design from Photoshop to HTML

Demo & Download

23. Design and Code a Slick Website

Demo & Download

24. Creating a Design and Converting it to HTML

Demo & Download

25. Dezign Folio

Demo & Download

26. Elegant and simple blog web design

Demo & Download

27. Grunge Web Design

Demo & Download

28. Minimal and Modern Layout

Demo & Download

29. Your Product Landing Page

Demo & Download

30. Simple & Cloudy Portfolio Layout

Demo & Download

Read More...

branding, Code, Design, Development, freelance, Inspiration, Mobile, productivity, Tips, Tutorials, web

A Complete Guide to Good Website Designing

10-things-to-know-before-designing-for-the-web

As a senior designer and developer I have identified some problems that are common with a large number of web projects. The main one is the failure to make a good plan. Therefore I’ve pieced together this guide to help designers, clients and businesses to plan and bring to fruition successful websites. I have used language that is non-technical and content that gives a broad view of the designing process.

The “Waterfall” Method


Waterfall Model Explained

Flexibility is the key to good website design. The content should be such that it can be altered at will. It’s ludicrous to think that all aspects of a website can planned beforehand on paper.

Large projects sometimes use the “waterfall” method of developing a website. They specify everything before hand: the type’s point size, the length of headers and precisely how a photo gallery will function. In my view,

It’s ludicrous to think that all aspects of a website can planned beforehand on paper.

Websites being flexible we have to reconcile the necessity for clarity and thorough specifications with the intrinsic suppleness of the medium. This can be achieved by breaking down the difference. If you follow the process I’ve written here, you will be able to create content as well as design specifications which will greatly lessen the chances of glitches cropping up midway through the project, and at the same time create a framework that will give the website the flexibility to grow as time goes by.

Consequences of Failing to Plan


Simple. Intelligent. Powerful. A Simple Process For Product Design And Development

  • Designer/developer has to make assumptions, correct or incorrect, about how some content will look on the website.
  • Communication between developer/client on trivial subjects gets multiplied and work is delayed.
  • Backtracking which leads to delays and deadlines getting missed.
  • Cost rise above expectations as work goes outside the initial project plan.
  • Client dissatisfaction as well as confusion that results from processes that are not based on original plans.

Assessing Needs


STEPS TO TAKE BEFORE DESIGNING A WEBSITE

Remember these things:

  • A website should meet the requirements of the clients –it is not for you.
  • A website isn’t an occasion. It is a bendable, extensible tool for communications that shows your business, both its negative and positive aspects.

The website must function mutually with the company’s basic marketing plan. The requirements for the site may coincide with the other endeavors and strategies of the marketing section. This is fine. The important thing to note is that the branding/marketing of the firm must reflect the website’s design and structure.

Typical Project Roles


10 Things to Know Before Designing for the Web

All projects are different; but there are typical roles in a web project of some size. They are:

  • Clients, who stand for the main features of the business.
  • Manager of the project.
  • Editor/copywriter.
  • Web designer.
  • HTML coder.
  • CMS/web developer.

Remember that one person can multi-task. The number of players has no direct bearing on the value of the result. Sometimes, a series of face-to-face meetings between executives and experienced designers can bring forth a great website.

Find Out What Your Website Content Will Be

Number of Contributors


Building and managing virtual teams

When you plan to put more content to the site, think about the contributors. In a small business, two is fine. In a firm, 5 or multiples of five could contribute. The time needed to edit/proofread the copy and image content expands in the same ratio as the number of contributors.

Content is Not Only Text


Designing Content Intensive Layout: Tips And Examples

The content must not be only plain text. By using these multimedia features, you will significantly enhance the allure and efficacy of the website: 1) Images. 2) Audio. 3) Documents (PDFs). 4) Adobe Flash files. 5) Video. 6) Content feeds. 7) Photos. 8) RSS feeds. 9) ‘Friends’ list from Facebook. 10) Twitter stream.

Good Photography is Valuable


21 Examples of Big Photography in Web Design

Photos explain the organization’s brand. Go for professional photographers. You will not need plenty of photos; only good pictures. Ten professional pictures are more worthy than 50 amateur snaps. Sometimes generic images will do; stock photos can also be used. But nothing can substitute for high-class photos of your storefront, staff, services or products.

Good Writing Has High Value


How to Produce High Quality Written Content

Writing web content is not just writing policy papers, memos or technical documents. If your company doesn’t have a person who can write clearly and briefly marketing copy, take on an expert/editor.

Key Elements in Website Structure Planning

Site map: Your site map must resemble a flow chart and be created with software like Visio or a tool that’s free. You could also build an outline with featured lists and serrations that point to pages as well as sub-pages.

Definition of Content

It’s important to define every element of your content. If you fail to do this then developers will have to guess what each kind of content must be. Content elements need clear direction. They need to say exactly what they aim to accomplish and how they will be used.

Checklist of Content

Here’s a list of common kinds of content: Articles, banner advertising, blog, documents, discussion forum, forms for contact, e-commerce, quotes, physical products, email newsletter, digital content, event registration, event calendar, image gallery, incoming and outgoing RSS feeds, link management, search, staff directory, and social media links.

Separating Content From Design


Website Design Dominates in the World of Web Content Development

Though design has an intimate relationship with content both are also detached from one another. This may sound confusing. What is means it that content does not have all elements of design. For example, each article in your website will have: Title, Meta title, Meta description, Author, Date of publication, Category, Summary, Main text. These bits of information make up an entire article, regardless of design you use for your copy: layout, fonts, colors, photo thumbnails, author and so on. Content is applicable even without design. The plain text may not look pretty but it reads well.

Meta Data and Good Content


10 Excellent SEO Tips That Will Improve Your Web Design

Meta data relates what your content is all about. In an article, everything — except the title and text — is called Meta data. Some people think that Meta data is meant for search engines. While search engines rely on this data for effective web page indexing, you may need Meta data for your records, without showing it. The minimum you require to qualify as an article is: Title, Text, and Author.

Plan for Future


Designing For The Future Web

The value of high-quality Meta data rises with time. Over the years, if you have a stock of 150 articles, you could sort them out by category, author and date.

Wireframes


A Beginner’s Guide to Wireframing

Wireframes deal with the layout factor of web design. They show the layout of the page and are created in grayscale. Great tools like Illustrator, Photoshop and Visio work nicely for this, as do specialized ones like Balsamiq.

Designers tend to make things appealing from the start but this must be completely avoided at the wireframing phase for it will divert from the aim of the wireframe which is to resolve where things must go and not what size of font to use or in what color should navigation be. Generally, one wireframe must be crafted for each distinct page. After the wireframes are reviewed, move on to the next design phase.

Beneficial Good Design


25 EXAMPLES OF INTERESTING AND CREATIVE STRUCTURES IN WEB DESIGN

Take the iPod for example. Exquisite design did wonders for this Apple product. In fact iPod has fewer features than other similar gadgets but its great design and interface, along with terrific marketing, made it a very buyable item. In websites, sadly, great design and minute details often don’t count. The reason: if something works it need not be refined. But this is wrong thinking. A website significantly affects customers’ perception of a business. A website that is harmonious, attractive and has easy navigation will have a positive impact. If it isn’t, then visitors will leave your website.

Preliminary Design

The preliminary design, generally created in Fireworks or Adobe Photoshop or even Adobe Illustrator, comprises visually precise images of your home page as well as one inside page at least. Visual branding of your business elements must be included. Create elements that correctly reflect the business.

Approval of Design and Revisions

After submitting the preliminary design for approval, the possibility of a revision arises. The designer and stakeholders will share ideas and try out some variations before final approval is given to the design.

Don’t Design by Committee

Multiple opinions could be problematic. Critics of the design may be absent at the time of filtering the website’s content. Normally in small businesses, having in excess of five people to give design feedback causes a deadlock. In short, restrict your ‘review committee’ to five or less persons.

Client versus Designer


A Tribute To Clients From Hell

Often there is tension between expert designers and clients who are less-informed. The “bad idea” problem illustrates this well: the client may ask for a design feature that is unattractive as well as unworkable. In this scenario the willingness of the client to listen to constructive criticism should be tested.

Think of Content


How to Bake Content Strategy into Your Web Design Process

Think about the future and expansion of your website. You may have a news segment with half-a-dozen news reports; a core news page that has summaries which link to the entire view of the item. This is good. But is you have a huge number of news items, you have to consider other options. These questions must be considered in the process of designing.

Web Design Guide


20 Web Design Examples of Blog Front-end Structures

A style guide can make adequate planning shine. A style guide defines the design, interactive, layout and the kind of elements used in the entire website.

These include: Navigation styles; Lists; Paragraphs; Italics, underlining and bolding; Block quotes; Links; Icons; Use of images/style; Background images; Elements that are common like sidebars and <h1> to <h5> (heading tags).

Integration with CMS


Top 12 Free Content Management Systems (CMS)

Your great design is now ready for integration with a CMS. The team that’s tasked to do this will give you the CMS log-in details that enable you to include content, text, video, photos and documents. You could do this comfortably and stick to plain formatting like italics, bold and lists.

Putting It Together

Now you will be sitting pretty on a solid website. Whatever the project’s size, you now need to do the following:

  • Go over the content again. Check all the requisite points.
  • Get your content proof read. Someone who has a fresh perception should be allotted the work; don’t do it yourself.

Beta Testing & Launch


Tips to Create a Web Design that Overcomes Browser Compatibility Issues

When you think that your website is nearly ready for public viewing, beta test it. Go through this checklist:

  • Looks correct in all target web browsers.
  • Interactive features are working well.
  • Contact and supplementary forms are working predictably.
  • External, internal links work.
  • Images properly sized.
  • Final copy content is in place.
  • Links from intermediary software work.

Once you’ve completely beta-tested your website, launch it!

After the Launch


After The Site Launch – A Marketing Tutorial

Here are some tools to maintain the site post-launch.

Website Statistics

Visitor statistics give you an insight into the way people are using the website. One/two months’ data is needed to draw authentic conclusions. Consider these questions:

  • From where are visitors coming? Check out search engines and direct traffic, links from other sites, ads, etc.
  • Are your visitors local, national, regional or international?
  • What are your most popular pages?
  • How long do visitors stay on the website?
  • Bounce rate? How many users leave after visiting only one page?

App Google Analytics is generally used to get answers to these queries. There is other software too that provide the answers.

Documentation

A lot of your documentation will comprise different elements earlier discussed. These include wireframes as well as Photoshop documents. Details of how different sections of the website are deployed in the CMS will be needed. Check out the information that will be needed if new people were to take care of the website; what they would need so as to take up the project? Proper documentation includes all these factors.

Back-Up


Your Website’s Disaster Contingency Plan

The files as well as the database of the website should have frequent back-ups, preferably daily. The company that hosts you may provide a way to do this. If your files/ database get erased or hacked or corrupted or damaged, you can repair the damage with the earlier day’s copies.

Plan Maintenance

Your plan for maintenance must define clear roles as well as responsibilities for all aspects of the website. This refers to posting of articles and photos and graphics that have to be created regularly. Proper assigning and understanding of this is vital. The best thing is to have a written maintenance plan.

Seek Visitor Feedback

Soliciting visitor feedback is a terrific way to better your website’s impact. There are many ways to do this. You may conduct easy online surveys or focus on groups on-site. Visitors generally cannot explain what they like – or dislike. So pose specific questions to them when seeking feedback.

Summing Up…

A great website is not a one-time happening. It’s a communications tool that’s extensible. Once you’ve created a terrific website, the momentum must be kept going. Be regular with your maintenance and interact with visitors on a regular basis to spot areas for website enhancement. I hope you liked this blog post in which I have incorporated a lot of factors that need to be considered when designing a website. Your comments on it will be greatly appreciated!

Read More...

Art, Design, geek, Inspiration, Movies, photography, Tutorials, web

50+ Epic Cinemagraph Animated Gifs

eternal-moments-cinemagraphs

Photography is a great hobby and passion for many creatives. We enjoy seeing beautiful things far and wide whether it be a landscape, a bustling city street, or a beautiful building tucked away somewhere quiet. Sometimes though, still pictures can get a little bit boring. The animated gif is always fun, and has been around for quite some time, it was once shunned on the internet but its glory has been restored as the internet has fully re-embraced that trusty little image format. Mixing Animated Gifs with still photography (or video elements), it seems, is a brilliant idea. Not only are the results fantastic, but the animation is often mind bending and captivating – leaving you breathless as you do nothing but stare – unable to turn away. Behold, the Cinemagraph.

What Is A Cinemagraph?

Cinemagraphs are still photographs in which a minor and repeated movement occurs. Cinemagraphs, which are usually published in an animated GIF format, can give the illusion that the viewer is watching a video.

They are commonly produced by taking a series of photographs or a video recording, and, using image editing software, compositing the photographs or the video frames into a seamless loop of sequential frames, often using the animated GIF file format in such a manner that motion in part of the subject between exposures (for example, a person’s dangling leg) is perceived as a repeating or continued motion, in contrast with the stillness of the rest of the image.

The term “cinemagraph” was coined by U.S. photographers Kevin Burg and Jamie Beck, who used the technique to animate their fashion and news photographs beginning in early 2011.

So while it looks so classic, refined, and beautiful – it hasn’t been around all that long! If you have never seen a Cinemagraph before, don’t worry, we got you covered! Today we have gathered up some of the most beautiful, elegant, and fun cinemagraphs we have found floating around the net. It isn’t just your ordinary animated gif, it is a true artform! Whether you are a photographer, filmmaker, or a designer, you will find some inspiration in these pieces! Hopefully they inspire you to create your own, or implement some still life style into your current projects! Whatever they do for you, we hope that you Enjoy!!

Note: this list is comprised of animated gif files, which tend to be a big bigger than the average image, it may take a bit to load, so grab a nice beverage and relax 😀


So Calming!


So Saddening!


Dat Blink.


Wow. So Creepy. lol.


Luke’s New Hand! Starwars!

Cinemagraph Resources & Tutorials

Need more still to life animated inspiration!? Maybe you want to know how these things are made? Well here are some more sources for inspiration as well as some tutorials on how you can make your very own cinemagraphs!

How To Make a Cool Cinemagraph Image in Photoshop

How To Make Your Own Cinemagraphs

Cinemagraph/Subtle GIF Tutorial

Cinemagraph Tutorial: how to make animated photos using Photoshop

Create an awesome cinemagraph in Photoshop

Create a Cinemagraph (or Cinegraph) Using Photoshop CS6

40+ Best Animated Art Gifs

What was your favorite Animated Cinemagraph? Found any awesome Moving Picture Gifs that you just love, that we have missed? Made any awesome Cinemagraphs of your own? Share with the class in the comments below! Thanks for Reading!

You like this? Don’t forget to follow us on twitter @andysowards and like us on facebook @andysowardsfan! We are also on that Google Plus & Pinterest thing.

Read More...

Art, Design, geek, Inspiration, Nerd Fun, photography, Tips, Tutorials

50+ Epic Toy Photography

lego-beard-glasses-amazing-toy-photographer

Toy Photography is freaking awesome. If you are a photographer that loves toys, there is nothing better than just setting up your figures in a creative way and having a blast taking photos of them! When I was a kid I loved toys so much, and this is no secret or anything new since i’ve written about this several times lol, but toy photography has definitely taken on its own form and grown its own community over the years. If you are a photographer that takes pictures of anything but toys, if you need to change it up a little and get some inspirational ideas, I would suggest breaking out the toys and going to town!

Creative Ideas are just a toy away!

Playing with action figures, legos, and the toys of all kinds as a kid is where I truly believe a lot of the creativity and ideas I have today (and a lot of peoples) came from (of course its a mix of everything from that to drawing to video games, but building stuff with legos as a kid just can’t be beat! except for minecraft these days I guess haha). Heck, as an adult with kids, I take a break from time to time and play around with their toys (SHHH DON’T TELL THEM. lol. They did leave these toys all over my desk after all.) and i’ve gotten an idea or two for some things that way. In the spirit of toys and creativity – Today we are taking a look at some truly amazing toy photography from some very talented photographers (and some tips on making your own!). These pieces of art will make you smile, laugh, think, or even feel a little nostalgia! So lets dig right into it and get inspired to do something different and fun by these crazy epic examples of photography de la toys! Enjoy!


THRILLER!! Must… acquire… lego Michael Jackson!


Dat Nostalgia!!! So awesome. Epic LEGO Macintosh! There are even instructions on how to build it!


So Simple. So Beautiful. Such a brilliant idea!


That face! lol.


Beautiful Leica M9 camera rebuilt with LEGO!


I used to have a rotary phone! Nostalgia. Even though I hated those phones lol. Beautiful retro toy photography!


I have no idea how this can make me hungry – but it does lol. NOM NOM LEGO TURKEY!


Note to self: next year cover tree in TIE Fighter ornaments. And ask Santa for a comfier chair.


Another awesome lego masterpiece that you can actually build yourself with the diy instructions!


Brainnnnssss! Plastic Brainnssss!


LOVE this mini Lego Millennium Falcon!


BAHAHA epic geek references! I LOL’d.


LEGO AHNOLD! Get to da choppahhhhhhH!!!!


Beautiful Steve Jobs Lego Tribute!


Freakin’ LEGO Wheatley! Portal FTW!


AH! Lego Potato GLaDOS!! I don’t understand my emotions right now!!1!1!


Moar lego zombie attacks! Run!


Freaking awesome LEGO Showerhead! So creative!


That. Is Terrifying!


No face from spirited away! Love that movie.


So badass. Skeleton Jack is Awesome!


Kimahri from FFX!


Love the little Danbo guy!

Toy Photography Tutorials

So now that you are inspired, you want to take your own photography of toys right? I know I do! Well you are in luck! We have rounded up a few awesome tutorials to help you get started playing with your toys again and making them the center of your photographs! All you need is some toys, a nice camera (most of the pictures you saw here were taken with a Canon EOS Rebel T1i or a Canon Digital Rebel XSi in case you were wondering – but feel free to use whatever brand you love!), and some patience!

Some quick tips to keep in mind are that you definitely need to enjoy the figures you are taking a picture of, and be familiar with them – If you don’t know anything about them it will be hard for you to tell a story with the photograph, or to make it particularly clever or creative – play around with it and have fun, make dynamic scenes and play around with the angles until you have something you are proud of! Also use a Macro lens if your figure is unusually tiny (which some are) – that will help out a little bit :).

Basic Toy Photography Setup Guide Tutorial

5 Tips for Better Toy Photography

Getting Started in Toy Photography

Need Even MORE Creative Toy Photography Ideas & Inspirations!? Lets keep the good times rolling, onward!

25+ Amusing Lego Photos

60+ Hilarious, Creative & Beautiful Examples of Toy & Video Game Inspired Photography

200+ Creative, Beautiful & Awesome Custom Toy Design Art And Toy Photography Inspiration

And there you have it!

What was your favorite piece of Toy Photography Art? Found any awesome photography of toys that we have missed? Share with the class in the comments below! Thanks for Reading!

You like this? Don’t forget to follow us on twitter @andysowards and like us on facebook @andysowardsfan! We are also on that Google Plus & Pinterest thing.

Read More...

apps, Design, Development, freelance, productivity, startup, Tech, Tips, Tutorials, web

How to Go About Prototyping and User Testing

wireframing-prototyping-mockuping

It takes a stretch of days at a time to get the coding and programming in place for your web app and if something goes wrong in the process, it hurts to start it all over again. At times when you haven’t checked and rechecked your app beforehand, you may come to find out that in the middle of the creation process that the idea you had isn’t going to work or the budget for your project is not big enough. This harsh realization can really spoil things. This is the reason why prototyping and user testing is a good idea, and can become pivotal for our work as developers. Let’s dive into these concepts and really understand prototyping and user testing, and the steps involved in them, in a more detailed manner.

PROTOTYPING


Ultimate Guide to Website Wireframing

Prototyping means creating a sample model of an app, which will form the base of how your app is going to look and function. Below we outline the steps which will help you go about it.

1. Brainstorm


Work Smart: Brainstorming Techniques to Boost Creativity

The first thing you need to do to start the prototyping process (and one of the most important parts) is get to brainstorming! When you are working on a new idea, gathering inputs from different sources is a great way to not stereotype your app with the tunnel vision that can sometimes come from one point of view. Having a session with developers who have ample knowledge and some experience about interfaces, will surely help you create a good base to start from. With the ideas you gained during the brainstorming session, start making wireframes of the screens and focus more on the important screens that will be used the most rather than screens you know just need to be there (as creating a frame for every imaginable screen is not productive – you can build them once the project is working!). Usually, the same frame can be used for different screens as functions are similar, and if not you can probably modify it to fit (and save some time) in early prototype wireframing.

2. Prioritize


Paper Prototyping As A Usability Testing Technique

Now is the time to prioritize screens – using a pen and paper you can list out all the features or the components it is going to have in the end product. Listing the visual elements such as graphs, menus, texts, buttons and other components like warning messages, default and others is the next step. Do not forget to incorporate the most important screen elements like the logo, search box and others. After listing them, prioritize from the most important to the least important and conclude with a common pattern.

3. Mockups, Wireframes and Prototyping


Wireframing, Prototyping, Mockuping – What’s the Difference?

This is the step where you have to focus on how the app is going to look, create multiple interfaces, and perform the trial and error method to shortlist a few of the most interesting features, keeping the best ones and getting rid of what doesn’t work. This is the time when you might face glitches and problems but this is the most important part as now you would be able to solve these problems right now and reduce future issues that would give you a headache later when actual users are on it. Now is the time to gather all of the pieces of what you have done so far and stick the puzzle together. Here we are talking about the way the screens will work and what the interaction will be like among the elements on the them. For a better execution you can also use apps like Google Docs Drawing, Keynote and other similar programs. Once this is done you have to focus on the last step which is prototyping so that your app can be tested by users. Fireworks or Photoshop can be used for this step as now you have to create a flat prototype image and the interactivity can be manual. You can then export slices as HTML to create basic functionality with some simple hand coding. Then of course, rinse and repeat as necessary. Once your app is coded out and looking how you want it to look – Your app is now ready for user testing!

USER TESTING


An Introduction To Website Usability Testing

User tests are basically simple tests where the users are asked to perform a task through the app and their actions and thoughts are observed and recorded. The most important reason why you should not ignore the user test is because it gives you a good amount of information on how the app is going to be received by the people that will be using it most, its usability and the overall functionality of the web app. It also allows you to fix problems you did not foresee and find the features which are not being used as much as you thought they would be so that you can remove them from the final model and streamline the app. You can also use the valuable feedback to improve the app further by comparing it to other similar apps and provide a better customer care support. The tests are usually short and the scale of the app decides how many users are needed to carry out the tests. Now let us look at how to go about user testing.

1. Plan your Tests and Select Users


Prototyping Tools and Testing

This is the first step and it is important as now you are decided on how everything is laid out in your app and this process of user testing will inform you about how your users are responding to the app which you have built. First of all, you need to decide what tests are important, and what tests you will get your users to run through as it is not really cost effective to test everything (since it does requires some time and money). Shortlist the most important and usable features of your app and make them ready for testing. It is a good idea to test the app yourself as well. Selecting your metrics is also important as this will spell out the usability issues and quantitative feedback which will definitely help you out. The next step is to select users which are probably going to use the app later, as their feedback is ultimately what you are looking for. Focus on the age groups, professions, income levels and similar deciding factors of the users which relate to your app and the target audience you are trying to reach. Remuneration is also an important factor in user tests.

2. Choosing Tools and Conducting Tests


Sketchpad to Screen: Testing Your Next Prototype With ZURB’s Solidify

There are a number of tools you can choose from to facilitate your user testing. Some of the most successful and popular ones include Feedback Army, usertesting.com, Silverback, Morae, AdobeConnectionNow and others. You can easily find them around the Internet (you have probably used it before). When you plan to conduct the test, make sure the environment is relaxing and make the users sign a waiver for their permit. Observe them properly and record the feedback you receive – also do not forget to thank them once the test is done!!

Prototyping and user testing are set to go a long way in making apps better and these two steps will not only help you in creating a better app but also generate much needed hype for your app! We hope you found these tips useful, if you have any tips regarding prototyping and user testing web applications definitely let us know in the comments below and share some of your experiences! Thanks for Reading!

Read More...

Design, Development, freelance, Tips, Tutorials, web

5 Web Design Breakthroughs Designers Are Having A Hard Time Coping With

designing-for-retina-display

The whiplash speed of technology is squeezing double doses of creativity among designers, but I don’t think it’s a bad thing. More and more people are pushed off of their mediocre lives because the world is slowly becoming an educated crowd – thanks to the internet. On the flipside, the people who are trying to make it happen must stay ahead, but here are 5 webdesign breakthroughs that make their feet heavy:

Responsive Web Design


30+ Responsive Web Design Tutorials

Before, there were only 2 screen sizes – PC and Mobile. Now, we’ve got Smart TVs, ipads, ipad minis, smart phones the list goes on and on. Website designers already had quite the workload, but now they surely have their work cut out for them. It is almost demanded of designers to optimize each website layout for universal access in all internet capable devices. More and more people are browsing the net through smart devices, hence the demand for responsive layouts cannot be ignored. This is a tall order that keeps web designers burning the midnight oil… but they must work on it.

Aesthetics vs. Practicality


When Is A Web Design Usable Yet Aesthetically Inclined?

In the advent of a visual world, designers must continue to enrich their creative innovation to continue attracting clients. There are so many advancements in the design world that it’s enough to occupy your day. It is indispensible – aesthetics is the very heartbeat of a website. Steve Jobs knew just how paramount visual appearance is in regards to branding, that’s why Apple and all their visual get-ups were so successful. The caveat is that web designers must achieve a balance between creatively forward ideas and practicality. Simplicity is still the leading trend, but simple doesn’t mean boring.

Usability


What You Need to Know About Usability

Designers must optimize a site to have aesthetics, responsive web design and on top of that, it has to be user friendly. This is also paramount because you can distract people with shiny, luster things, but ultimately you have to cut to the chase. We live in a rushed society. Hence, websites must be easy to navigate. For webdesigners, it means innovative solutions – social media apps, RSS feeds and multiple optimized search friendly pages. A solution for huge amounts of archived information would be to implement site searches and organize content into categories, sub-categories, even sub-sub categories if you will.

Retina Display


Designing for Retina display

There is continued debate about whether or not to put high-resolution graphics in websites because it takes time to load. But Apple has developed what they call Retina Display which is described as “liquid crystal displays which have a high enough pixel density that the human eye is unable to notice pixelation at a typical viewing distance”. This is great news for mobile surfers because it is an innovation towards a better “small screen” viewing experience. Apple has been setting trends for years now, and this is sure to be followed by Apple’s competitors. Therefore, webdesigners must be able to create dynamic high and low resolution pages that can be viewed by both low-end devices, and retina display capable gadgets.

The Work Never Stops


The Best Way To Fight Work Burnout? Work With Inspiring People!

2012 brought with it the death of 5 page websites. Online marketing demands that there be innovations, and fresh content on the regular. Web designers no longer have one-time-payment-then-goodbye jobs. Now there is a continuous need for their services. Businesses have to make sure that they stay relevant in their niche, which calls for the need to regularly update their website. The good news is that there’ll be less starving artists, and the downside means another increase in their workload.

The human race is always hunting for ways to move forward. Who knows what the future brings? Who will be the next Steve Jobs? You never know who’s going to grab the torch and blaze a trail for new technology – you can be sure though, that the world is waiting.

Read More...

Code, Computer Science, Development, geek, Mobile, Nerd Fun, programming, Tech, Tips, Tutorials

Android Tips & Hacks To Maximize Your Phone’s Capabilities

android-tips-jelly-bean-tricks-hints

Going under-the-hood to maximize your Phone’s Capabilities

If you’re a free soul and don’t want to be chained down by pointless limitations, chances are you’d prefer an Android-based phone over any other smartphone. And if you’re really adventurous, you might want to hack into your droid for personal customization.

If you’re an android owner and haven’t yet gone under-the-hood, this is a good starting point to start modding!

Get to know your Android


Top 20 Things Every First-Time Android User Should Know

Before you start off with hacking into your phone, get to know it first.

Your Android device is much more than just a regular mobile phone. The Android phone is a combination of several chipsets and peripherals stacked together onto one board. Like a desktop computer shriveled into a very small-form factor, your phone contains stuff like a CPU, a graphics processing unit (GPU), a memory controller, a radio chip, and other essentials as designed by the manufacturer for that particular model. Getting to know to your device is the first step to being an Android master.

On top of the awesome hardware runs a gem of a system – the Android open-source operating system. The second most essential step to modding your phone’s OS is getting to know what version it runs. Go to your phone’s settings, and click on “phone settings”, where you’ll see your Android and kernel version.


50 Android Jelly Bean Tips, Tricks And Hints

Before we proceed any further, here’s a quick rundown of what the Android OS is all about.

Android development potentially began in the early 90s, when Finnish university student Linus Torvalds started coding the open-source Linux kernel, available free for the rest of the world to further develop and build upon. Due to its free open-source nature and rebellious ‘hacker’ personality, the Linux OS eventually became the most used OS for web servers. Fast forward a decade and a half, and following the development of low-power-consuming ARM processors, Linux became the best choice for developers at Google to build their open-source mobile OS on.

Android uses a file system and partitions similar to Linux. For Apple users, there isn’t much difference. But for somebody from a Windows world, it’s a different ballgame altogether. To be short and simple, the Android file system has no drive letters (like your Windows C: / drive) where EXT partitions (mostly, instead of FAT) are “mounted” onto directories, like the /SYSTEM partition and root (/).

Now that we have skimmed over the basics, let’s get back to your phone.

Root!


XDA Developers’ Android Hacker’s Toolkit: The Complete Guide to Rooting, ROMs and Theming

The Linux OS, and hence the Android OS, was made with security in mind. Getting to access the root folder is not as simple as browsing the C: / drive on your Windows 7 desktop. One does not simply “Access Root” (lol). You need permissions for SuperUser access, and some hacking to do that.


Android Software and Hacking General Forum

The community at XDA developers is a friendly bunch of people making life sexier for Android phone owners for free. The primary source of knowledge to anything Android-related should be www.xda-developers.com, the great Bible of everything Android, and its forums – forums.xda-developers.com – where most of your tricky questions are answered, usually categorized by your device model and Android version. Don’t EVER feel embarrassed to ask a question!

Danger, Will Robinson!


50 Android Hacks

BEWARE: Any action taken ahead of this, like rooting or flashing a custom ROM, voids your warranty, and may result in ‘bricking’ your phone.

On XDA forums, enter your device number in the box at the top to get started. Chances are, you have all the tools you need to get rooting/customizing listed right there. Read up on the step-by-step material provided for your phone to root it. It took me only a few minutes to root my Samsung Galaxy S Vibrant to get SuperUser access with the SuperOneClick root tool!

Even if you’re not sure about flashing a custom ROM, you can do pretty much anything with your phone now, including removing all that annoying bloatware and installing apps requiring root access.

If you are ready to dive into custom ROMs then… I’ll just leave this here… lol.


Five Best Android ROMs

Have any Android Tips & Tricks for us that we didn’t cover, or link to? What is your favorite Android Phone? Did you get an Android for Christmas? Let us know in the comments below – Thanks for reading!

Read More...

Design, Development, freelance, Inspiration, programming, Tech, Tips, Tutorials, web

Freelance Web Design: How To Tackle Larger Projects and Commissions

Do clients repeatedly ask you to create a website that is beyond the scope of what you can do?


Five Ways To Keep Your Web Design Skills Fresh And In Demand

Since the beginning of the web there has been drastic change in design and development standards. From it’s humble beginnings Google was designed to organize research papers. It has since grown to become the number one portal to everything public on the internet. Likewise, HTML standards have gone through numerous changes thanks to the W3 consortium. Now clients are requesting semantic websites that utilize HTML5 tags and custom XML tags. These custom semantic tags describe what your content is about. Additionally, libraries for JavaScript have been built. Binding events to HTML tags has become very easy; in turn creating expectations that every web developer and designer can add custom effects and animation for their clients. At the beginning, web developers were only expected to create static websites and have a useful form-mail plugin so that clients could be e-mailed comments from visitors or users. Now, web developers are also expected to be able to produce custom dynamic websites. Among the most popular languages for this is PHP. PHP is an actual programming language, unlike markup languages like HTML and CSS and allows for custom form handling, forums, blogs, membership sites and social sites. All in all, web designers are expected to be equipped to meet all of these demands. If you are a freelancer and owner of your business, of course, there is more to know in terms of how to manage the actual business like making relationships with strategic partners that are reliable and have complementary skills. Also, managing prices and being able to meet client expectations so they are left satisfied and want to refer you more work. It’s no wonder many web designers and developers feel ill-equipped with the challenges they face day-to-day and are struggling to take home a healthy profit.

The Proposal: Clients


When a new client calls you, don’t freak out. Do this:

Image you walk into your favourite local small business restaurant. The man taking your order at the front is the owner and you decide to ask him if he has a website for his business. His eyes widen like you are the answer to his sales problems. He says very excitedly, “No I don’t. I’ve been waiting for someone like you to ask!” Then, he literally gets an employee to cover his position and asks if he can sit with you to discuss the possibility of you doing a custom website for him. He uses special ingredients and he wants them all to have descriptions that pop up when people hover over them in his product pictures. He wants his kitchen to use iPads and receive the orders placed from nearby online customers. There is a real heavy feeling in your throat because you can’t deliver the things he’s asking for.

Web designers and freelancers try their best to learn all of the skills they need to learn by piecing together various sources of information. Local community colleges have courses and certificate programs on how to learn HTML and CSS. The advanced classes will teach you that jQuery and PHP exist, but will leave you wanting to know more on how to take a client project from start to end using those types of technologies. Many freelancers are self taught. They pick up books from large retailers like Amazon and type out examples. Most people tend to give up because they don’t have any positive reinforcement to keep going, get overwhelmed and feel like there is too big of an uphill battle to actually being capable of producing something of value for a real client.

After all, expectations of what can be done with today’s web is at an all time high.

The Preparation: Learning


From Nothing to Something: Story of a Self-Taught Designer

Many designers have taken the unstructured approach to teaching themselves by using YouTube videos on any specific topic. This can be helpful depending on how you learn but you may find your time being spent on searching. Much like books, these videos teach certain techniques but don’t teach how they all relate to each other to put together a large project and handle client expectations throughout the project. One of the most well structured, cost efficient ways of learning has been subscription websites. Sites like Educator.com have very affordable rates when compared to a local certificate program and have different courses that teach from start to end, but only for a given web language. There is a course on how to build an e-commerce website. But it teaches how to implement a site using someone else’s framework. To build large custom websites you have to be able to deliver all the time no matter what the framework is that the client wants to use. Overall, there is a focus on individual skills but putting them together does not add up to a complete workable knowledge.

There is overwhelming demand for skilled web designers and developers that understand how to produce custom solutions for any business problem. Rates of these entrepreneurs can reach those of many professionals holding advanced degrees. What would it mean to you if you could comfortably produce very large websites? You would be able to satisfy a larger base of clients. People will spread the word about you because you have all the solutions. Of course, you will be in higher demand and charge more for your time. As well, your work will be more manageable and enjoyable!

The Execution: Information Architecture


10 things web developers must know to become truly amazing

Now, imagine you return to the restaurant understanding how to not only build custom websites but provide solutions to business problems. You are glowing with confidence as you accept the job for a premium to what you would ordinarily accept for a basic five page website!

The major discipline that businesses need and that web designers and developers can deliver is that of “Information Architecture“. Paying attention to this body of knowledge, when combined with the skills you already possess, will open up enormous opportunities because it is the art of solving large daunting problems. Design that takes into account how businesses actually operate will provide your clients’ businesses with a competitive advantage because they will manage their information in a far superior way than their competitors. Some of the key things that encompass information architecture is how to identify key users of the website and interviewing them properly so that the correct requirements are gathered from the beginning and not after coding has been complete. There are also some very interesting visuals that can be used to communicate what the website needs to do before investing time and money into activities that aren’t valuable to the client.


Information Architecture 101: Techniques and Best Practices

Look for professionals in your area that have training in information system business analysis and unified modelling language. They may have credentials from certificate programs or studied information technology from a business school. If you want to outsource this service, ensure they are reputable because they will be spending time interviewing the client. They will help you to capture and organize requirements so they are in a format that you can use in development. These skills are guaranteed to increase your profit margin.

I highly recommend learning more about this discipline by getting your hands on books from Amazon and partnering with experienced professionals.


Information Architecture for the World Wide Web: Designing Large-Scale Web Sites

Read More...

apps, Blogging, Design, Development, Tech, Tips, Tutorials, web

Setting Up a Blog with SharePoint 2010

Setting up a self-owned blog is perhaps the most popularly cherished desire these days. And why not? It is easy, gives you the feeling of being an owner, gives you an opportunity to make money and best of them all, it gives you a chance to put all your thoughts and ideas in one place and show them to the world.

Believe me, owning a blog is sometimes as precious as owning a physical property like a house or a car. It is sometimes easier too. So what does it take to setup a blog? This article is a guide to setting up a blog with the latest SharePoint 2010.

What Is SharePoint 2010?

SharePoint 2010 is a blog site template that has all it takes to accomplish company projects, publish news and updates and share knowledge of various ideas in your niche. Blog sites are defined by the way they are presented, the niche they deal with and so many other aspects. SharePoint sites include many details like information about the author, the purpose of their description and many more. There are additional tools for filtering posts by articles, bookmarks, calendar month or even sharing links and subscribing to blogs using RSS clients.

Setting Up Your Blog


SharePoint 2013 Themes (metro look!)

Prior to creating a new site in SharePoint, you would be choosing your blog template. Creating a new personal blog site from SharePoint is different from creating blogs for your organization. In the latter you would be able to associate profile and personal settings with your niche. Using SharePoint Standard or Enterprise edition or enabling the Personal Sites feature can let you adjust your blog settings with more customizations.

The Steps

  1. Choose the personal navigation menu from a common SharePoint site.
  2. Choose My Profile
  3. Choose Content tab
  4. Choose the ‘Create Blog’ link to create an independent blog site.

Note : If the Create Blog hyperlink is not present in the content tab of the profile page, it means that the setup may not be allowing personal blogging sites. Check with your organization’s SharePoint Admin or HR department for more details on company’s policies with regards to blogging.

Guide To Managing Your Blogs In SharePoint


How Do You Manage Your Blog? – Blog Administration

Everybody knows the importance of good content these days. Creating blog posts allow you to improve your expertise, share and synchronize information and also assist colleagues to be up-to-date on your personal and professional activities. You can also edit posts to make changes and update original contents.

Creating a blog post

  1. Choose the ‘Create a Post’ from the blog tools menu and enter the values to suit your new post.
  2. Save the post by any of the two methods mentioned below:

Method 1

Click on the Publish button to save the content and get it ready for online display. You can even schedule the post to be published on a future date. Once it reaches the date, the post will be displayed automatically in the site.

Method 2

There is another method you can use to save your blog post. Choose the ‘Save as Draft’ option to save the content in the present status. This post will not be shown to the visitors of your site and you can publish the post at a later time.

How to publish a blog post that is already saved as a draft?


What Every SharePoint Admin Needs to Know About Host Named Site Collections

To save a blog post that you have already saved as a draft you can follow the below mentioned steps:

  1. Choose the Manage Posts option from the Blog tools menu list
  2. Check for all blog posts whose approval statuses are pending
  3. Choose the Items tab from ‘List Tools’ menu
  4. Choose Approve / Reject
  5. Choose the approve option from the popup menu and then click OK.

A lot of people tend to drop their blogging ideas thinking that it is the work of professionals. Hope this article would inspire them to change their minds.

Read More...

3D, Code, Computer Science, Design, Development, Games, geek, HTML5, Inspiration, Javascript, jQuery, Nerd Fun, programming, Tech, Tips, Tutorials

30+ Epic Game Tutorials

creating-a-side-scrolling-game-tutorial-with-udk

LOVE GAMES. As a kid I always loved games, ever since playing the early zelda games, I wanted to make games myself – but then after years of school and eventually college and odd jobs, life happened. Eventually I had a family of my own, responsibilities, bills to pay, priorities, and I didn’t even have time to play games anymore! However, ever since I started getting into web design I always held onto the idea and passion of wanting to make games in the back of my mind. So thinking about gaming a lot lately (Wii U is coming out soon, as well as seeing a lot of successful video game related Kickstarters), and seeing a couple of awesome interviews with Gabe Newell lately & reading up on his company Valve, have inspired me to put this post together. With all the research I have done with looking into how to make games in the past, I hope it will be a good resource for those that are looking to dive into game design & development, and follow their passion to make their own games! So that the next generation of kids will have something to play, obsess over, fall in love with, and aspire to one day make something that awesome as well! You may be so inspired that you may want to look into some video game design schools.

What Is Game Design & Development?

I believe a lot of people get the two confused, game design and game development, while part of the same thing, are two very different things. This post focuses on game development, because that is the actual thing that gets the game made. I believe a lot of people search for “Game Design Tutorials” and “How to get into game design” and then get frustrated because they can’t find out how to actually make a game (at least this was my experience a few years ago when I started looking into the subject). I have learned that to actually learn how to make a game, you need to focus on the development – I believe the “game design” part comes to you first, as an idea for a game or just a passion to want to create something. So focus on game development to get started – then worry about the “design” aspect once you can actually build something (if you are a one man, or a few man startup), If you plan on partnering with someone on a game then perhaps consider partnering with someone who is familiar with design (if you are the developer) or vice versa. Anyway, this is what wikipedia defines for Game Development:

Video game development is the generally involved and lengthy process of creating a video game. Development is undertaken by a game developer, which may range from a single person to a large business. Mainstream games are normally funded by a publisher and take several years to develop. Indie games can take less time and can be produced cheaply by individuals and small developers. The indie game industry has seen a rise in recent years with the growth of new online distribution systems and the mobile game market.

The first video games were developed in the 1960s, but required mainframe computers and were not available to general public. Commercial game development began in 1970s with the advent of first generation video game consoles and home computers. Due to low costs and low capabilities of computers, a lone programmer could develop a full game. However, approaching the 21st century, ever-increasing computer processing power and heightened consumer expectations made it impossible for a single developer to produce a mainstream game. The average price of game production slowly rose from US$1M–4M in 2000 to over 5M in 2006 to over 20M in 2010.

Mainstream games are generally developed in phases. First, in pre-production, pitches, prototypes, and game design documents are written. If the idea is approved and the developer receives funding, a full-scale development begins. This usually involves a 20–100 person team of various responsibilities, such as designers, artists, programmers, testers, etc. The games go through development, alpha, and beta stages until finally being released. Modern games are advertised, marketed, and showcased at trade show demos. Even so, many games do not turn a profit.

How To Make Games

There has never been a more exciting time to make a video game, seriously, there are so many ways to do it now – so many platforms, so many good starting points. However, this can be overwhelming and it is often hard to figure out how (or where) to start. Hopefully this resource can shed some light on the mysteries of game design and I will point you to some good game tutorials to use as a starting point. These tutorials focus mainly on the coding/programming/development aspect of game development – when it comes to the “design” of the game you should probably study the style of design you are going for because as we all know games look vastly different from game to game, however if you want a ‘8bit’ or ‘pixel’ styled game then we do have a post with some nice pixel art tutorials. Also these game tutorials range from beginner to advanced and cover a wide range of mediums such as browser games (html5, javascript, canvas, etc.), xbox xna games, mobile app games, all the way to traditional computer games, and everything in between. (See, told you there were lots of opportunity for games these days!) One of the big industry standard programming languages to learn if you aren’t sure what language to learn to get into the video game industry is C++, so if you just want to develop video games and nothing else, that would be a good language to get obsessed with. So whatever you are working on at the moment, it might even be a game, I hope you get inspired to get creative, make something fun for people to enjoy! I hope you enjoy this post and it helps you in some way! Who knows, maybe you will create the next Minecraft, you never know until you try!

Advice for Game Designers

I saw this video while doing some research for this post and I had to put it up right at the start – oh man, look back at this video of game designers from the 90’s – my how times have changed, but the message they are trying to get across is still pretty accurate “If you want to be a game designer, do it, go build something”. Good video, for nostalgia if nothing else! haha.

Beginner C++ DirectX Game Programming Tutorial: Lesson 1

Now let’s get on with the actual devving and making of the games. This is probably a great place for all beginners (at programming) to get started. If you have a windows PC then this will be really helpful in guiding you through your first steps. This was a pretty entertaining video to watch also, funny haha, I laughed out loud a few times. So yeah start here, go now!

Beginner C++ DirectX Game Programming Tutorial: Lesson 2

Second video from that same guy – I figured I would put his first two videos here and if you like them – definitely go ahead and check his channel for the rest of his game development videos (there seem to be a lot of them over there), you can learn a lot!

Basics of C++ Programming Tutorial 1

Ok so before you dive in any further, if you are drowning and just CANNOT Grasp the C++ coding, it will really help you to take a step back, and learn the foundational basics. You will get a lot farther in your endeavors if you can grasp the basics of C/C++ and be able to write it without necessarily just copying/pasting what people are telling you works. You do actually have to learn to Program if you want to “program a game” – so check out this beginner video on just C++ – it might help you, if it does I urge you to check on youtube or google more videos on how to grasp Classes, Inheritance, Polymorphism, Pointers, etc and all that other stuff. But this video does a good job of getting out some of the very basics of C++ for you to understand. If you are good at following written tutorials, check out this C++ tutorial series or this one – it looks like it covers all the basics you need to know. Heck, you could even go so far as to learn how to build a Snake game using C, you will learn a lot of basics there since C++ came from the C language (predictably). I believe it is very important to know the language outside of the “Game Programming” scenarios as well to really “get it”.

Beginner’s Guide to Game Programming Ep1 Part 1 Introduction

This is another good video on the very basics of Game Programming with C++ and actually goes through to help you make a mini game. If you like this video, the second one is here. You should be able to then follow the rabbit trail of youtube videos for the rest of the tutorials :D. If you like to follow written tutorials – then these older beginner tutorials might help you out.

Tetris tutorial in C++ platform independent focused in game logic for beginners

This is a really nice tutorial that teaches you how to create a Tetris clone from scratch using simple and clean C++. It says it should only take you an hour – but don’t worry about time. Just worry about going through it, and understanding everything! This is a good tutorial for beginners to create a nice ‘first game’ project. You can follow along on a windows computer or even a Linux powered one. This tutorial assumes you already know C++ though (as most do, so be sure to learn it from the videos above, or google for more – but get that C++ Down son!). When you get better at C++ and get into more advanced concepts you can worry about stuff like Managing Game States in C++.

C++ Game Programming Tutorial: non-tile based arbitrary positioned entity engine editor like in Braid or Aquaria games

This tutorial is a little advanced, if it feels overwhelming just skip it and come back to it, but this one is focused on level editing. In this tutorial you will learn to create a game map editor that dosen’t use tiles, but directly backdrop images that you can translate, tint, rotate, scale, etc, in different parallax layers and camera zooming. This type of editor is used in games like Braid or Aquaria.

Going Beyond: XNA Game Studio in 3D

So maybe C++ Isn’t your thing, no worries, there are other ways to skin a cat. XNA is a framework that you can use with C# (c sharp) that allows you to build games from scratch for Windows Phone, Xbox 360, and Windows. I actually build a mini game in XNA before and its pretty easy and fun (but I didn’t get as far as I wanted to haha)

Unity 3D Platform Game Tutorial

Also keep in mind you don’t always have to build a game engine from scratch, there are lots of other things you can use such as a game engine called Unity. Read this in-depth tutorial and learn how to make a 3rd person platform game in Unity – complete with professional-grade artwork and all scripts.

More Advanced Unity 3D Game Tutorials

Hack & Slash RPG – A Unity3D Game Engine Tutorial

Unity 3D is actually a really awesome game engine if you want to look into it. This RPG game tutorial series is really in depth and you could potentially make an awesome game with it. There is also a huge community rallied around Unity 3D so it would be a good place to start if your an indie developer that isn’t quite sure where to go with this, so give it a try 😀

Plus there are a ton more Unity 3D tutorials over here if you need them. Another awesome thing is that someone has developed this Minecraft framework for Unity 3D Called “MinePackage” so you could potentially make a minecraft like game pretty easily.


SO COOL

Creating 2D Games With Unity3D – 5 Part Series

Maybe 3D Isn’t your thing – you can create 2D Games with Unity 3D As well – this is a nice in depth series that takes you through the process, lots of knowledge here!

How To Make A Video Game [Unity3D Basics] Part 1

Andddd if you need videos, this is a nice video tutorial series, check out their channel for the rest of the videos in this series of Unity3D Basics game dev tutorials

The Basics of 3D Lighting

If you venture past the basics and simple 2D games – you will need to know about the world of 3D – I would suggest getting a copy of 3DSMAX or Maya and playing around with a real CG Program – before venturing into programming 3D things, but this article will give you a good overview of the basics of 3D Lighting and get you into that type of stuff to apply later to shapes and objects.

Beginning iPhone Game Programming Tutorials

So since we tackled the traditional ways of making games – since the early days, all kinds of other platforms have came out. This page has a TON of awesome iPhone programming tutorials for games (and stuff like OpenGL engines) and even just other iphone programming tutorials. If your main goal is to make the next awesome iPhone app game then this is definitely the resource for you – dig in! If you need more iPhone Game Dev Tutorials here is a nice list of video tuts.

HTML5 game tutorial – Make a snake game using HTML5 canvas and Jquery

Even more recently, HTML5 games have been really popular. This is a seriously awesome HTML5 game tutorial – definitely check this out if you are a fan of HTML5 games (or snake!) This is pretty basic but it really helps you to get into the basics and discover the amazing world that you could create with HTML5 in browser games! Here is another simple HTML5 game tutorial.

Building a JavaScript-Based Game Engine for the Web

If you want to build a web based game using Javascript – this is the perfect talk. It talks about a lot of awesome stuff like node.js (server side javascript) and using jQuery/Canvas and of course Javascript to build a speedy and reliable web based game, heck it even talks about MMO game possibilities (which I think about all the time) with this setup. The speaker has built a javascript game engine (that was acquired by Zynga), they go into some details about this as well. Good presentation for anyone looking to build a game in the browser.

Video Tutorial: How To Create An HTML5 Game With Impact.js

So if that was a little tough, no worries, again there are game libraries to help you out with the process of developing a game – while there are a lot of FREE game libraries out there, this is a paid one that may be worth looking into if you want some seriously rapid game development in HTML5

Introducing HTML5 Game Development

If Impact JS Does look like your thing – you might get better (faster) results from checking out this great book on HTML5 Game Development that takes you through developing your first HTML5 game with Impact JS. If you learn well from books, check it out!

Sidescrolling Platformer ~Part 1~ Setup and Planning

So this is a flash tutorial with AS3 (actionscript 3) – while flash games seem like they are on their way out, they are still relevant and you can still learn a lot from how one is made – this one again is super simple but gives you a really good overview of an actual “game” environment in a side scroller. Also helps you out in the “planning” process behind games.

Creating A Side Scrolling Game With UDK

UDK Is the Unreal Development Kit and it is just another way to make games 😀 If you can’t get the other methods to work, keep trying other ones until you find a right fit! IF you can’t find a right fit? suck it up and get back to the basics with C++! haha. Remember you can use Java and other programming languages to build games – and I definitely don’t have all the answers, heck I don’t even have a fraction of the resources here! The game development world is HUGE I am just trying to point you in the right direction with a few good resources 😀

Create A Breakout Clone That You Can Play In The Browser, Using Javascript And The <canvas> Element

Another browser game tutorial – this one using Javascript and the Canvas Element that lets you re-create the awesome Breakout game! Pretty primitive, however again, gives you basics to build on!

More Advanced HTML5 Game Tutorials

Create a Game Character with HTML5 and JavaScript – Part 1

Now lets look at a few advanced aspects of game design in these HTML5 game tutorials before we leave – this is a really good tutorial for developing a character design and making it look and work nicely.

HTML5 Game Development – Reincarnation of old computer game – Battle City

This is a pretty complete game tutorial, recreating an old computer game called Battle City – retro nostalgia right there!

HTML5 Game Development – Lesson 9

This is a simple game, but pretty advanced, and the graphics are pretty awesome too! These guys have some more great HTML5 game development tutorials over here.

More Game Design Resources

Need more game design resources? Yeah you will probably need some help – game development isn’t easy! ITS NOT SAFE TO GO ALONE – TAKE THESE WITH YOU.

Game Design Novice

DevMaster.net

GameDev.net

The Game Programming Wiki

Do you want to build games, was this helpful? What was your favorite tutorial? Already build games? Got any tips for the n00bs?! Leave it in the comments below! Thanks for Reading!!

You like this? Don’t forget to follow us on twitter @andysowards and like us on facebook @andysowardsfan! We are also on that Google Plus & Pinterest thing.

Read More...

apps, photography, productivity, Tech, Tutorials

Quick Aperture Tutorial – Workflow

What Is Aperture?

Aperture is one of the best creations of Apple. It is capable of ushering the workflow. The application might seem a bit complicated. You have to understand that Aperture is merely a tool and it is your responsibility to create a workflow according to your requirements. Once you have taken the pictures, you have to download them somewhere. That’s when you will need Aperture. It is an application to manage photos.

Getting Started – Importing


Aperture Tutorial #2 – Importing

Initially you have to import the photos from Aperture to an album. Firstly, choose a location to place the album and right click to choose “New Album”. Since there is a location for the photos, you can start importing the photos. All you need to do is insert your memory card into the reader and choose the photos to be imported. Then press the arrow that leads to your album. The photos will be imported to Aperture.

File Management


Tutorial – Organizing a Photoshoot with Aperture

Once the photos are imported, you can erase them and eject the card. That will help in providing some free space in your memory card. Sometimes, it may happen that you may choose to erase the photos by mistake. In order to prevent such mishaps, Aperture will always ask to confirm what you have chosen. So you need to confirm that you want the photos to be erased. Once all the photos are imported, it is better to go through each picture and rate it accordingly. The good thing about Aperture is that you can rate it according to your choice. There is the added advantage of convenience.

Manage Meta Data


Advanced Aperture: Mastering Metadata

The more you evaluate your work, the easier it becomes for you to go ahead with your chores. It will be beneficial especially for those who perform the job of publishing photo shoots. It is very important to keyword the photos before making any changes in them. If you fail to create keywords, you are bound to get confused with so many new versions of the original photo. Moreover, it becomes a daunting task to allot keywords after making the changes in the original version. It would have been easier if a tick box was provided along with each keyword.

The traditional dragging technique is fine if there are fewer photos, but it becomes a time consuming task when there are more number of photos. The disadvantage of Aperture is that you can’t choose a set of photos and keyword them in an instant. You have to perform this task separately for each and every single photo. I wish Apple could make some changes regarding this issue in its upcoming versions. At present, you need to provide a keyword to one photo and make use of the lift and stamp option to copy this keyword to other photos.

Editing Photos


8 Steps to Developing a Better Workflow in Aperture

You can make adjustments to the best photos that are rated 4 stars or above. Finally the full screen mode is where you can adjust the photo to suit the screen in Aperture. Don’t switch back and forth to the full screen mode as it might affect the performance of Aperture. It is possible to make adjustments in Aperture’s HUD by pressing the ‘H’ key. There is also the option to auto adjust the image. You have an option called as Monochrome Mixer which can help make the needed changes and bring back the image to its original color.

You can even change the Highlights and shadows to add life to the image. After several such adjustments, you can export the photo to Flickr or share it with other communities.

Read More...

Art, Design, Events, geek, Inspiration, photoshop, print, Tutorials

Photoshop Tutorial: How To Design Urban Style Rock Concert Show Posters

image064

Many different kinds of music event posters have their own themes based on the venue of or the music genre to be played on the said event. In this tutorial, you will learn the step by step process of creating an urban style gig poster that is akin to the urban retro posters of yesteryear.

Here Is What We Will Be Making Today!

Final Image

 

Now Let’s Get Started!

1.     Setting up the document on Photoshop is the first step of course. You’re most probably looking into printing this poster so it’s mandatory to set the correct Width, Height and Resolution that is apt for poster printing. Remember to use a high value for the resolution (minimum of 300ppi) and set the color to CMYK color mode for four color printing.

2.     With the new document open, we first fill it out with a theme background color. In our example, we are going to use a fairly “washed out” (#8ca9c) green color as the foreground and a darker hued version based on this original color. Just use the “Gradient Color” tool to fill out the background.

 

3.     Next, create a new layer by pressing CTRL+SHIFT+N.  Then using varying sizes of a soft brush and a light green and dark green color paint some spots at random in our new layer.
 

 
4.     Next, go to Filter -> Blur -> Gaussian Blur.  Use a very high value for the radius to make these brush strokes very blurry.

5.     Then, change the blend mode of this layer to “Overlay” and change its opacity to around 30%.

6.     Great, we now have dynamic background layer for our poster. The next step is to add some foreground details. Using the Ellipse tool, inscribe a small very light yellow circle into our design. Take note that holding the SHIFT key as you inscribe circles constrains its proportions and makes it a perfect circle.

7.     Change the fill of this shape to 0%. Then, double click on this layer and click on the “Stroke” in the layer options window and set the shape to have a 1px stroke of the same color of your shape. You may also want to reduce the opacity of this stroke layer if you want. (to around 50%)

8.     Great. Now duplicate this circle two times and vary the duplicate’s size. Center the duplicates again to get this effect:


 
9.     Group these circle layers into one group. Then duplicate the group two times for a total of 3 groups of these circles. Resize and re-position these circles creatively into the poster.


 
10.  Now, we will create quick grid. If you are good with your hands and the mouse you can simply create equally spaced horizontal and vertical lines using the line tool. If not, you can use the “Grid” custom shape to create a grid. Simply go to the custom shapes tool and pick the “Grid” as your shape of choice. Then place a row of grid shapes (hold down the shift key to make them proportional) on top of our poster. Use the same light yellow color of course.


 
11.  Then, merge the top grid layer as one grow. Duplicate it to make the next row, and keep duplicating until you create the grid.

12.  With your grid finished, let us distort it up a bit by going to Filter -> Distort -> Twirl… Use a 50% twirl value and reduce the grid’s opacity by 30%.

13.  Now, using the grid as guide, create a set of horizontal lines of equal spacing like so. Do not forget that you can actually hold down the shift key and move the line tool downwards to create a perfect straight line. Merge all these lines into one layer.

 

 

14.  Then go to Filter -> Distort -> Waves… Set the following values for the Wave Distort filter:

  1. Wavelength: Min-100, Max-999
  2. Amplitude: Min-35, Max-350


 

15.  You will see the vertical lines get broken up. Afterwards, go to Filter -> Distort -> Polar Coordinates. Select the option “Rectangular to Polar” to change the orientation of the broken horizontal lines.

 

16.  Finally, for the background paste in an old cardboard texture as the top layer.

17.  Then set its blending mode to overlay to apply it correctly to the design.

18.   If you think that the texture darkened your design too much, you can try lightening it up by going to Image -> Adjustments -> Brightness Contrast and then adding some values to the Brightness setting.

19.  Paste in a picture of a cutout skyline. This will be our “Cityscape”.  If this was from a real skyline, you might want to adjust the Brightness and boost the contrast to a high level to make the colors more lively and distinct.

20.  Duplicate the skyline image and then press CTRL+T. Right click on it to flip it Vertically and position the duplicate so that it looks like the reflection of the city. Reduce its opacity a bit.


 

21.  Merge both layers. Then go to Image -> Adjustments -> Hue Saturation. Change the Hue to 25, the Saturation to 55 and the Lightness to 20. Make sure that the “Colorize” box is ticked.


  

22.  Finally, change the blend mode of the skyline image to “Multiply” to integrate it properly to our poster design.


 

23.  Next, we will highlight a couple of buildings in the skyline. Behind the skyline layer, create a long red rectangle that fits a building and goes towards the top of our poster. Change the blend mode of this layer to “lighten”.


 

24.  Next, using the eraser tool, erase part of the top of this red rectangle. First rasterize this layer by right clicking on it and selecting “Rasterize…” Make sure that you use a large soft brush, and reduce the brush opacity by around 60%.


 

25.  Next, apply two filters to distort our red rectangle. First go to Filter -> Distort -> Ripple… Set a 110% amount and set the size to large.

 
26.  Next, go to Filter -> Blur -> Radial Blur… Then select an amount of 5, a Blur Method of Spin, and quality set to best.

27.  Duplicate the process for the 2 or more buildings as appropriate.

28.  Great! Now, you can type in your title text. Use a white color for your text so that it is easy to see.

29.  Then, double click on a text layer and on the layer styles window that opens, apply a drop shadow with a 20 size value.

30.  Next, using the same processing as the skyline, we place in a guitar image to reinforce the message of a musical event.

31.  Finally, we add in some more detail text below the skyline. We changed one text set to a light yellow color to emphasize its importance.

32.  Once done, you should have an amazing Urban Poster style with retro elements built into it. Even more impressive to your prospects is if you had matching brochures or business cards to go with your poster design. You can still use the steps in this tutorial but you have to make sure to adjust the dimensions at the very beginning. Goodluck!

You like this? Don’t forget to follow us on twitter @andysowards and like us on facebook @andysowardsfan! We are also on that Google Plus & Pinterest thing.

Read More...

apache, Code, Computer Science, Development, geek, Inspiration, programming, Tech, Tips, Tutorials, web

30+ Epic Resources on How To SSH

getting-started-ssh

Ok so I have been meaning to talk about SSH (Secure Shell) & Linux Commands for a while now, but just haven’t had the time to put together a worthy resource. So today I finally sat down at gathered my thoughts on this subject for you guys! SSH is one of those things that is hard to explain to people who have never heard of it before, it is one of those things that people either LOVE IT or they just have no idea WTF it is lol. There is a steep learning curve to the Linux command line and SSH – it scares a lot of people off at the sight of it – because it looks like something you see in a hacker movie and you have already mentally written it off as “Un-Learnable” without even giving it a try. Why? Well because its something for super science fiction nerds that build robots and satellites and puts land rovers on mars or the moon, or super 1337 hackers (h4x0rz!?) in the movies (like THE NAPSTER in The Italian Job!) breaking into government systems. Right? Well no. Anyone can learn SSH, anyone can use SSH, you just have to take the time to learn the technology (and if you are a geek like me it consumes your life and you learn the technology underneath it, and on top of it, and wont stop until you understand the assembly languages that tie all this computer junk together, but thats another topic lol). Before we get too far in (some of you have probably mentally checked out alright, QUIT IT lol) I want to give the newbies a quick warning, BRACE YOURSELVES. lots of nerdy looking lingo and command examples ARE COMING. But I swear if you actually read through it, it makes sense and you will be smarter for it 🙂 YOU CAN DO IT. lol. So real quick lets talk about what SSH is a little more in depth.

What Is SSH?

SSH r0x0rs j00r b0x0rzzz!! (man I haven’t typed like that since I used to play counter strike) Ok, wikipedia always helps information go down smooth, so here is what the wiki sums SSH up as….

Secure Shell (SSH) is a network protocol for secure data communication, remote shell services or command execution and other secure network services between two networked computers that it connects via a secure channel over an insecure network: a server and a client (running SSH server and SSH client programs, respectively). The protocol specification distinguishes two major versions that are referred to as SSH-1 and SSH-2.

The best-known application of the protocol is for access to shell accounts on Unix-like operating systems. It was designed as a replacement for Telnet and other insecure remote shell protocols such as the Berkeley rsh and rexec protocols, which send information, notably passwords, in plaintext, rendering them susceptible to interception and disclosure using packet analysis. The encryption used by SSH is intended to provide confidentiality and integrity of data over an unsecured network, such as the Internet.

SSH uses public-key cryptography to authenticate the remote computer and allow it to authenticate the user, if necessary. Anyone can produce a matching pair of different keys (public and private). The public key is placed on all computers that must allow access to the owner of the matching private key (the owner keeps the private key secret). While authentication is based on the private key, the key itself is never transferred through the network during authentication.

SSH only verifies if the same person offering the public key also owns the matching private key. Hence, in all versions of SSH it is important to verify unknown public keys, i.e. associate the public keys with identities, before accepting them as valid. Accepting an attacker’s public key without validation will authorize an unauthorized attacker as a valid user.

Ok yeah that was a nice dry summary chock full o’ sleep-inducing nerdyness – let me try to get you back by telling you WHY It is important to know about, and use SSH as a web designer & developer. I had a hard time grasping exactly WHY people were talking about and using SSH for quite some time – but I finally know the pleasure of using SSH. Here is why it is important.

Why Is SSH Important?

These are the 3 reasons you should attempt to use it regularly

  1. ITS SO FAST. So much faster than using a GUI or FTP for file manipulations or transferring files between servers etc. Especially when you have a slow internet (which I sometimes do)
  2. SSH connections are encrypted. In this world of daily increasing paranoia that you are going to get hacked, this is a plus lol. But with great power, comes great responsibility. (thanks Uncle Ben). Also it is important to understand that Nothing is 100% secure. Ever.
  3. So Lightweight and Efficient. You can take it anywhere you go. It is a LOT easier (once you are comfortable with it, that is) to open up terminal on a mac (or putty or whatever) and SSH to a server and make a few text changes, rather than to open up some bulky FTP program and pull down and open up files and edit them manually and re-upload them. It doesn’t seem like much, but it really is so much easier over SSH. (sometimes, not all the time, but having that option gives you FREEDOM!!!)

Ok, so while I am no SSH or Command Line Expert (not sure there are too many out there) I am familiar enough with SSH to love it to pieces, and thank it greatly anytime I have to move a site from one server to another. I will do my best to make sense of SSH for you and point you in the direction of some AWESOME resources to help you on your command line ninja journey.

Here we go!

Getting Started with SSH – Setup

Getting started is the easiest part, for most – If you have a web hosting account somewhere like Hostgator or Media Temple (big or small, shared is typically ok) then you probably already have access to SSH (some shared hosts try to hide it in a corner, but its usually there, if not, switch hosts!!)

Now connecting via SSH to your server from your computer is easy as well if you have a linux based operating system, or a modern Macintosh (apple) computer. It is a tad trickier if you are running windows – Windows users can get it by running the base install of Cygwin with OpenSSH installed, or simply downloading: Putty. Most of the steps in this article assume Unix (Linux, Mac OS/X) or Cygwin syntax, however.

If you are using Windows – just downloading putty is the easiest way to get setup to connect via SSH so I would just do that. If you are curious about the other SSH Clients available then read up on that. Here are a few resources that are helpful when getting started with SSH :).

Before we dig into the resources I have amassed on my journeys, I would like to walk you through some quick and easy code examples of SSH while moving a site to another server – this will help show you (for the visual learners out there) just how quick, easy, and useful SSH is with a real life example. From there you can decide if you wish to dive into the rabbit hole known as SSH with the resources.

Moving a site to another server with SSH

I actually had to do this a few times lately, so its fresh in my mind 😀 and I thought this would make a good example that you can easily follow along, and I can explain some of the quirks in SSH (that took me a while to figure out). It is really hard to just look at command line code and be like “oh yeah that makes sense” with no explanation lol. I have moved a lot of sites in my day (back in the day, a lot of times, it took forever) so I can say without a doubt, this is the quickest, and easiest way to move a site.

Ok here we go. We are going to move our site to another server. So what we will be doing specifically is connecting to our old server via SSH, zipping up (or tarring up) all the files we need, moving the files to the new server (via SSH of course), logging into our new server via SSH, unzipping (or un-tarring) our files, (if it was a wordpress site, we could also export/import the database SQL via mysql commands) then we are done!

If you are on Mac, open up your terminal! It will look something like this by default, with your computer name and user name. If you have never used it before, that can be confusing, just ignore it, you type your commands after all of that, it enters that stuff by default (so we will not mention it again here, since its redundant, you just ignore that stuff, most websites put in the $ before command examples, such as “$ command” you don’t actually have to type the dollar sign in. Hopefully that clears stuff up.)

andysowards-mbp-2:~ andysowards$

Ok, lets try to connect to our old server via SSH (keep in mind im using generic domain names like ‘[email protected]’ and ‘[email protected]’ you replace that stuff with your stuff. Type the following into your command line terminal.

ssh [email protected]

Hit Enter to initiate the command – you’ll be prompted for your user password on the server. (usually the same user/pass as your cpanel, or hosting panel, or you sometimes setup SSH login separately (like with MediaTemple)). You will see the following.

[email protected]'s password: 

You then enter the password – CAREFUL, it will not show you the characters you entered, just type it in, and hit enter. If you mess it up, you can always hit control + c (to cancel start over) or just hit backspace a bunch of times and enter it again. If the login worked, This will drop you into the top directory. If you type “ls” it will give you a list of all of the directories or files where you currently are. So Type that in like this and hit Enter.

ls

You will see a list of files from the current directory – you use this to navigate the file system of the server to find your site files, you typically have to move a few directories to find them. To move through the directory you just use the “cd” command – which is Change Directory. You type in the command followed by the folder or direction such as “cd foldername” or “cd ../” to go back a directory. So lets go back to the root, which is typically where you start, or sometimes you have to go up a directory, so lets go up a directory to make sure. Type this and hit enter

cd ../

now you should be at the root, from there, the typical path to the files are something like this “cd usr/www/vhosts/olddomain.com/httpdocs/” or something like that, but its nice to go through each folder at the beginning, so you would go “cd usr” hit enter – then do “ls” and hit enter to see the current files, then do “cd www” hit enter – then do “ls” hit enter to see where you are in the file structure. that will get you used to the command line.

Ok so lets say we are in the root folder of our site, and we want to zip up all the site files. If we do this:

ls

We see this

Maildir
logs
tmp
dev
images
css
olddomain.com
someotherdomain.com
testdomain.com
cgi-bin

Lets say we just want to zip up olddomain.com and move it to the new server, we don’t care about the other stuff. (we are going to use tar, because its just the usual way people zip things up over the command line) We will want to do this:

tar -pczf olddomain.tar.gz olddomain.com/

look at that and let it soak in, I know it wont make any sense if you have never seen it before lol, but here is the gist. Basically the command is “tar -pczf” then “olddomain.tar.gz” is the filename we specified for the file that the server will create – “olddomain.com/” is the folder in our current working directory that we have specified to zip up (tar up). So it will take a few seconds, depending on how large the files are in the folder, then if you type in “ls” and enter – you will see your new .tar.gz file created and sitting there in the folder for you! like this is what you SHOULD see:

Maildir
logs
tmp
dev
images
css
olddomain.com
olddomain.tar.gz
someotherdomain.com
testdomain.com
cgi-bin

See it there? YOU did that! er, we did that. or whatever. So now we want to move the file to the new server. I cannot tell you how much time this saves, you have to do it for yourself. If you are used to pulling down site files via FTP, then putting them up via the new FTP. you will be amazed that this does all of that for you within literally seconds. It takes around 1 minute to move like 1 GB of data. So here we will type something like the following command (your username, domain, and file path will be different but probably similar to that path – depending on the server structure) and then hit enter to initiate the move

scp olddomain.tar.gz [email protected]:../var/www/vhosts/newdomain.com/httpdocs/

This will then ask you for a password again, this time though for the username associated with the new server. So enter in the new server username password, just like you did before above, and hit enter. That will connect you to the new server, and move the files over! PRESTO! LIKE MAGIC! LIKE BUTTER! lol. Analyzing the commands, we are using the SCP command (secure copy) which basically copies the file to the new server. “scp” is the command – “olddomain.tar.gz” is the file we want to move, that is in the current working directory we are in (the one that we “cd”‘ed to) and then “[email protected]” is the login to the new server, just as if we were going to do “ssh [email protected]” to login – that points our command to the new server. then “:/var/www/vhosts/newdomain.com/httpdocs/” is just the path on that new server where we want to copy this file. Makes sense? if it doesn’t, dont worry about it. just come back to it after trying it a few times, it will make sense.

Ok now our olddomain.tar.gz is on our new server – now all we have to do is ssh into the new server, and find it, and unzip it and we are DONE! To do this, since I use terminal on Mac, I typically just hit CMD + N to open up a new terminal session (so I can be logged in at both places and do commands in both back and forth working on new and old server). So go ahead and hit CMD + N and open a new terminal window – then type this in

ssh [email protected]

It will ask you for the password just like you’ve done before, enter it and press Enter. Then you will be in the top level of the new servers file system, just like before, so go ahead and do a “cd ../” (hit enter) and an “ls” (hit enter) to see where you are in the new servers file system, navigate to your root web files (typically “cd /var/www/vhosts/newdomain.com/httpdocs/” or public_html, whatever your server structure is) and do another “ls” (hit enter) and you will see a list of files there and you should see the new tar.gz file, like this:

Maildir
logs
tmp
dev
images
css
olddomain.tar.gz
cgi-bin

Woooo its there! (obviously your files look different, just an example – I HOPE yours is there as well haha) Ok so now that the olddomain.tar.gz file is there, we need to unzip (or untar it) with this command:

tar xvfz olddomain.tar.gz

Now our files are un-tarred! Basically what this does is “tar xvfz” is the command – and “olddomain.tar.gz” is the file that we are untarring – it then dumps the contents of the tar file into the current working directory, which in this case is exactly what we want to happen. Do a quick “ls” (hit enter) and you will see the old site files, are on the new server! TADA!

It is worth mentioning, that when doing this, it often changes the files to be “owned” by the server root (if you are using root) if not, it will be owned by your username – if you need to change the username (or group) ownership it is good to run this command:

chown -R username *
chgrp -R group *

That will recursively go through all of the files in the current directory you are in, and change the username ownership to whatever you put as “username” (change that to be your actual username you need) and the group to whatever you put in “group” (change that to be your actual group that you want to use)(group is usually the same as the username). That will take care of any ownership/permission issues that arise. Also if you need to recursively (that means it affects all the current directory files, rather than just one) change the chmod permissions, you can easily do that for all the files/folders with this command:

chmod -R xxx *

That will change all the files/folders in the current folder to whatever you put in “xxx” that should be a permission number – such as “666” or “777” or “755” etc. If you have no idea what that means just ignore that command 🙂 you should be careful with that stuff. You don’t want to have everything “777” because that is a security no no.

Now if you want you can delete the tar.gz file as we don’t need it anymore with this command:

rm olddomain.tar.gz

“rm” is basically the Remove command, it will delete whatever you tell it to delete, so be careful! (you should always be careful on the command line, its like playing Diablo in Hardcore mode, one wrong move and its over! But you’ll be fine). And you’re done! That is it for this little example, you can dive into the resources below now! Remember, It looks like a lot of steps, which you may think is a lot of work, but it’s really very easy to do once you get the hang of it and it’ll save you a ton of time. A TON OF TIME. I SWEAR. no more waiting for files to download or upload anymore, use the high speed internet connecting servers!

Other Helpful SSH Commands

Here are a few other quick code snippets of SSH worth remembering – Especially if you need to export and move a MySQL database (if you are moving wordpress for example) – Use this command to export a mySQL Database straight from SSH – SO CONVENIENT. So first, SSH into your old server, then we are going to dump the mySQL database into a .sql file, using this command:

mysqldump database -uusername -ppassword > database.sql

Here you see “mysqldump” is the command, don’t change that, but you need to change “database” to the database’s name that you want to dump SQL for. Then change -uusername to the username (NOTE: you must keep “-u” so it looks kind of funny, it would be like “-uThisISthePassword” make sense?) same goes with -ppassword (would be “-uThisIsThePassword”) then keep “>” but change “database.sql” to “whateverYouWantToNameThisFile.sql” – and hit enter – and it will create that file with all that juicy data in it (in SECONDS!)

Awesome right? so then you just use the commands we talked about above, to scp the .sql file over to the new server – then you want to do this on the new server – this will IMPORT the newly moved .sql file into a new database on the new server (database should be empty). First, Navigate to the directory that has the .sql file in it – then Use this command to import the SQL via SSH on the new server:

mysql -uusername -ppassword database < database.sql

so again, pretty much just like the last command, but opposite - keep the "-u" and the "-p" intact, change "database" to be your database name and use the "mysql" command instead of "mysqldump" to import (mysqldump is for exporting) and then just do "<" whateverTheSQLFileIsCalled.sql and your done 🙂 Imports in secondsss! so quickly! YOU ARE NOW AN SSH MASTER! (not really, but you are doing better than most!) Ok so now you can dive into the resources below, I have listed a lot of useful tutorials and resources to do everything from get you started using SSH, all the way up to command line code snippets, and advanced tutorials on using different commands to perform advanced procedures via SSH. I hope that this will be a good resource for you to come back to when you are using SSH (it is almost impossible to remember all of this stuff really, always need a reference - of course Google is a thing). One thing to note, a lot of Linux Commands for the command line are in posts that are dated like 2002, 2003, all the way up to 2012 - as Web Designers and Developers we are taught to stay on the cutting edge of information - and things change CONSTANTLY - but that isn't really the case with archaic server systems as well as the new ones running linux - those old command line commands in the 2002 posts are just as reliable as the newer posts - not much has changed, thats kind of hard to grasp, but the command line is an oldie AND a goodie! Old Yeller will get the job done. Enjoy the resources!

Intro to Linux Commands

This, is actually the perfect place for you to start (especially for visual learners) if you have no idea about anything command line related. This will show you some cool features of the command line, and get you up to speed on how to just use the command line, which you need to know to be able to get around to even using SSH. It gives you a nice overview of the command line tool as well as takes you through some basic commands to get you up to speed. Really great I recommend EVERYONE watch this as a great foundational knowledge builder for the command line.

50 Most Frequently Used UNIX / Linux Commands (With Examples)

Man, if ever something was too nerdy for words, I believe that this list would be it. Just so much geek. Line after line of command line commands. Only a true geek could love this. BUT This list is actually awesome - it is a really good reference for when you are stuck in the command line island, and need some code-fu to get you through. Now that you are familiar with Linux and the command line - Dive into some of these commands, break stuff, you will LEARN!!

25 Top OS X Terminal Tips

This is just awesome if you are running a Mac and have NO IDEA WHAT YOU ARE DOING when it comes to using the Terminal - it isn't scary, it is super efficient (and sexy). Trust me.

How to set up SSH (for the beginner)

This basically just walks you through the basics of setting up SSH - If you are on a mac that has Terminal already, I would just ignore this, unless you are curious of the underlying inner workings of SSH. (If it is too complicated looking, just skip it)

Install and Use SSH on iPhone

This is pretty cool, just walks you through installing SSH on your iPhone and how to connect to your phone via SSH on Windows or a Mac. Really neat stuff - good learning experience. It basically treats your iPhone like a Server that you can connect to and modify files and what not. Do SSH'ey stuff.

How To: Install OpenSSH On iPhone, iPod Touch, iPad [VIDEO]

This Comes in handy if you want to access SSH on the go from your iPhone, iPad, etc.

Ok now that you have the tools, and can connect via SSH, lets do just that! (If you are on a Mac, you most likely had the tools already :D)

SSH: Using Secure Shell for Windows

How to SSH to an iPhone (or iPad)

Another good example of how to connect to an iPhone via SSH - could come in handy for something, mostly practicing your SSH command line skills.

List of SSH Client Programs

EVEN MORE SSH Clients for lots of different OS platforms - in case you just haven't found one that you really like (maybe try understanding SSH really well before worrying about this too much) but there are plenty of options (I personally really just like mac osx terminal - Putty on windows is my fav there also)

5 Basic Linux SSH Client Commands

Once you are all settled with your favorite SSH Program - this is probably a good place to start as far as getting comfortable with playing around with it, and doing just a few basic commands (not to get overwhelmed). Get your feet wet!

31 Common SSH Commands for beginners- Linux Shell Comands

More awesome Linux commands to help supplement your leap into SSH - If you couldn't tell, Linux commands and being familiar with the command line are pretty much the prerequisites to taking advantage of SSH. (and being a 1337 computer science hax0r) Make sure you are familiar with these commands in case you get stuck you can come back and use the reference to get un-stuck. (un-tarred? Bahahaha)

Getting started with SSH

If you understand and grasp the basics, its pretty safe at this point to dive straight into SSH and use it 🙂 This is a good getting started guide that will introduce you to some of the more advanced commands and topics as well.

25 Useful SSH Commands

Some more advanced (and useful) SSH Commands - scope out this list if you are feeling pretty confident in your command-line-fu

Setup an SSH Config File

This is a little advanced of a topic, but its really quick and easy to do, and will save you some time if your on a mac and regularly using SSH (now that your hooked, cuz its awesome, your welcome)

Beginning SSH on Ubuntu

Because some people running Ubuntu would like a specific tutorial on how to SSH - there ya go Linux geeks! 🙂 (although if you are running linux on your desktop, you probably are already hip to the command line. jus sayin)

So that pretty much covers all of the Beginner stuff to really know about SSH and the Linux Command Line. Soooo here are the advanced resources 🙂 Just dive into these links and learn all you want if this has piqued your interest. If it bored you to death, then you can go play with something less technical until you revisit this subject later :D!

Advanced Linux & SSH Commands & Configuration Resources

The Ultimate Tar Command Tutorial with 10 Practical Examples

The Tar Command is great - it can get pretty complicated pretty quickly though with its options (like most linux commands) so this is a good resource to browse and bookmark.

5 Cool Things You Can Do With an SSH Server

This is where your geek meter goes over 9000 and you realize all the potential! the sky is the limit!

Command Line Fu

Great site to use to lookup linux commands, or browse around for new ssh commands that you hadn't thought of that are super useful!

HowTo: Restart SSH Service under Linux / UNIX

This is good to know as you will eventually need to start/stop restart the SSH Service for some reason (if you are ever a system admin in IT especially)

How To Remotely Copy Files Over SSH Without Entering Your Password

Another advanced setup to save yourself a time! Good for a browse to learn that its possible, and know there is something there that you can reference back to at a later time when you need it!

SSH Port Forwarding on Mac OS X

This is where SSH and Linux in general just make you believe that servers and internet technology is black magic lol.

How to do SSH Tunneling (Port Forwarding) - Screen-cast

Really good overview of some advanced SSH Concepts, worth a gander!

Tips for using SSH keys

You will eventually have to deal with Keys if you delve deep enough in this rabbit hole - good info to know.

How to use git over SSH

If you are always wondering what Git and Github and all that stuff the fancy programmers are using in silicon valley - then you should probably brush up on this stuff and the concepts explained here.

Working with Git on OS X

Another good overview of Git - especially if your on a Mac running OS X.

Running a Simple Git Server Using SSH

Start your own Git server if you are a fancy pants programmer that could use this for a web app or something extremely nerdy!

Set up SSH for Git and Mercurial on Mac OSX/Linux

More info on SSH, Git, and Linux.

How to Setup Rsync with SSH on UNIX / Linux (rsync without password)

Rsync is pretty cool - definitely worth reading up on

Geek to Live: Set up a personal, home SSH server

In case you want to be a grand master SSH jedi.

Advanced SSH configuration and tunneling: We don’t need no stinking VPN software

More SSH Jedi stuff.

NOW YOU ARE A LINUX SSH COMMAND LINE MASTER - YOUR LEGEND WILL NEVER BE FORGOTTEN.

What is your favorite use of SSH? Any good stories to share? any good resources we should know about? a better way to do things? Leave it in the comments! Thanks for reading!

You like this? Don't forget to follow us on twitter @andysowards and like us on facebook @andysowardsfan! We are also on that Google Plus & Pinterest thing.

Read More...

Art, Design, freelance, Inspiration, Music, photoshop, Tutorials

Designing a Simple Rock Music Flyer in Photoshop

image046

In this tutorial, you will learn how to create a simple rock music flyer using Adobe Photoshop. You do not need any special skills or advanced training here. You just need Photoshop, some free creative resources, and of course your own active imagination. Just follow the steps below and you should be able to create your own unique design.

Here Is What We Will Be Making Today!

Final Image

Now Let’s Get Started!

1. Our first step is of course to establish the document specifications. Now, there are a lot of different sizes for flyers, and you can even create your own custom dimensions if you like. However, for most printing companies, they prefer to use some standard design dimensions for most flyer designs. To get you started, below are the typical settings for flyer designs in Adobe Photoshop.

Just apply these as a foundation for your design.

a.     Width: 8.5

b.     Height: 5.5

c.     Resolution: 300ppi

d.     Color Mode: CMYK

2. Once the new document is open, it would be a good idea to add up some guides. Guidelines will help you manage your design elements so that they do not look off or too close to the edge. So, bring up the rulers (CTRL+R). From the rulers, click and drag guidelines into place. Since our document is designed to be printed in half a letter sized paper, then we just need a margin. (others need an extra bleed guideline set.) Just count 0.25 inches from the edges of the document to get the security margin set.

 

3.     Now, first, we will create our background. Create a new layer by pressing CTRL+SHIFT+N. Name this layer “Color Bars Layer”.

 
 

4.     Now, using the rectangular Marquee tool, create a large vertical stripe at one side of the layer. With the rectangular vertical area selected, fill it with one theme color. Use the paint bucket tool to quickly fill it. You can find lots of matching color themes in colourlovers.com. In our example, we created an initial blue stripe.

 

 
 

5.     Just continue on with creating vertical color stripes until you fill out our whole layer. Vary the width of the vertical stripes of course, along with the variation of color. Make sure you have some very thin stripes scattered with dark colors for a great effect.

 

6.     Great! Now, since this is a rock/musical poster, having straight color bars will just not cut it. So, with the color bars layer selected, we press CTRL+T to start the transformation. We then tilt/rotate the layer at an angle for that skewed effect.

 

7.     Before we move forward, save this document first, just in case you forgot. Now, we will create a displacement map. This will require a separate document. So we create a new document by pressing CTRL+N. Size it fairly large at 1024×768 pixels or higher.


 

8.     Once the document is open, you can then add in a displacement texture. Now, for our example, we want to go for something a little bit grunge. So we copy paste a grunge type image from morguefile (http://www.morguefile.com/archive/display/40400), into the document. Alternatively, it is possible for you to use the built in patterns in Adobe Photoshop. However the simplest way is to just look for a good grunge or displacement pattern on the Internet and copy-paste it in.

 

 

9.     Press CTRL+SHIFT+U to de-saturate this layer. Then, go to Image -> Adjustments -> Levels. Change the three values below the graph, so that you have a more grungy black and white type texture in the canvass. You can start with these values first, and then adjust depending on your chosen image. (80,0.01,180)

 

 

10.  Once you are done, save the document as a PSD file. Just press CTRL+S or go to File -> Save As… Save it with a descriptive filename so that you can easily know that this is our displacement texture. Use the PSD as the file format for this save.

 

 

11.  Great! Now, go back to our original design. Select our color bars layer. Then, go to Filter -> distort -> Displace. Once the displace window opens, insert in a 20 value for both the horizontal and vertical scale. You should also set it to stretch to fit and repeat edge with pixels.


 

12.  Then, you will be asked to choose a displacement map. Just navigate to the PSD document we created earlier and press ok.

 

13.  You should see a nice grunge effect get applied to the whole layer.  If you do not like how it turns out, simple press CTRL+Z and try again with different displacement settings and displacement maps. However, our effect is great and we will keep it.

 

 

14.  Now, we are ready to paste in our main rockstar image. In this case we got a nice image of a rockstar here (http://contains-mild-peril.deviantart.com/art/Pete-Koller-171999401?q=boost%3Apopular%20studio%20guitarist&qo=30). Before we paste it into the design though, we process the image by removing the model’s background. Just use the Magnetic lasso tool or the magic wand tool to easily select the background of the image, and then of course erase it using the eraser tool.

 

 

15.  Then, we just paste it into our main flyer design. Scale it carefully by pressing CTRL+T and then holding the shift key as you click and drag the anchor boxes of the pasted in image.

 

 

16.  Next, duplicate our rockstar layer. You can quickly do this by pressing CTRL+J. This new layer should appear on top of your original layer. Drag this duplicate back to the bottom. Then, go again to Filter -> Distort -> Displacement. This time, use a 30 value for both the horizontal and vertical values. Choose your displacement map again afterwards. You should see a nice displacement again in the background, whilst the main image looks pretty great.

 

 

 

17.  Now, using the rectangle shape tool, we add some darker block elements to our design. This is where the text for the flyer design will go. Once the rectangles are in place, press CTRL+T with those layers selected, and slant them a bit, just like how we slanted our main background layer.
 

 

 

18.  Next, we downloaded a couple of cityscape design brushes for Adobe Photoshop from this site here: (http://bestdesignoptions.com/?p=2180). Then, load it up to your brush options  by selecting the brush tool, and then right clicking on the canvass to bring up the list of options. Select “load brushes” and load the brush that you just downloaded.

 

 

19.  Create a new layer by pressing CTRL+SHIFT+N. Then, using the same color as your rectangle, splash in 1 or 2 spots of our city skyline brush.


 

20.  Finally, for an added effect. Go to the custom shape tool and select the option “registration target 2”. This is the shape with the rays spreading out. Add this into the design, just behind our model. Make it large enough so that only the rays are visible. Position it so that the rays emanate from our model. Use a black color for this shape.


 

21.  Then, change the blend mode of our rays layer to “Overlay”. Also change the value of its Opacity attribute around 50%.


 

22.  Finally, we can add some text for our design. Using the text tool, we just type in our headline slogan and other details for the flyer. Just rotate it in line with our darker rectangles. Change the size and style of the text to get some variation from the headline and the details.

23.  Great! That finishes our great Rock Music Flyer. You can now apply these effects to your own flyers.

Read More...

advertising, Blogging, branding, business, Design, Inspiration, marketing, Tutorials

How To: From A Nobody To A Marketing Genius

Ultimate Guide to Facebook Advertising- How to Access 600 Million Customers in 10 Minutes

No matter what product, service or skill you are willing to sell, effective marketing is essential in order to get the customers rolling in. While the term marketing may seem daunting in itself, this article will serve to show you just how to become a marketing genius in a few easy steps.

Get Your Advertising Right


Ultimate Guide to Facebook Advertising: How to Access 600 Million Customers in 10 Minutes

A lot of people you will meet will caution you to keep tabs on your advertising expenditure but it is more important to think of advertising as an investment rather than a simple outflow of cash. If you manage to advertise your product properly, the returns can be astounding. Of course, the key to good advertising is to make it aggressive and inductive. This means that you advertising should be attractive to the right audience, that is, the type of people that you intend to target. For example, if you are looking to sell toys for children you would obviously need bright, vivid colors to attract them, whereas selling a business manual may require fewer colours and more information in bullet form.


The Ultimate Guide To Marketing Your Business With Pinterest!

Having said that, it is also important to place your advertising strategically, where it will have the maximum effect on the audience you intend to target. Most of us, startup businessmen will not have the funds required to put an Ad on the television and we will have to make do with newspaper advertisements, brochures and so on. Therefore, it is very important to understand that you need to put your advertisements in places which will help you to catch the attention of potential clients. For example, if you are looking to sell computer software you would want to advertise in sci-fi magazines, online computer related websites or maybe even in your local computer shop or gaming zone! You could also use counter displays to get products in front of your audience when they are in the buying state of mind.

Be Committed to your Work


How Committed Are You to Freelancing?

No one becomes a marketing genius overnight. You may not be able to lift off briskly but it is important to keep at it and keep working on your ideas and putting them into shape. All customers are wary of going for a product or service that may not have been heard of before or marketed previously, therefore it will take some time before you get your first customers and maybe even a year or so before you start seeing some real changes in your business. However, if you keep working honestly and tirelessly, things will definitely turn around. Commitment is a very underrated trait in businessmen and freelancers alike, if you are able to stick to your guns, hopefully you’ll become that marketing genius with all the experience you gain over time.

Give Away Free Stuff!


6 Reasons Giving Away Free Stuff Can Work For Your Small Business

Who doesn’t love free samples? If your business or service is relatively new to the market, a great and simple strategy is to offer free samples to potential clients in order to induce a sense of trust and hopefully, quality which will make them come back for more!

Trust Survey and Testing


How To Survey Your Customers And Get The Most Information

A major pillar of good marketing is testing and survey. This helps you gain an idea of the current market trends and consumer preferences and helps you to manipulate existing market conditions to your benefit.
Every time you are confused about something it is best to test out both options and see which one fairs better. This might be an arduous task at first but you will gain valuable experience from continuous testing and research which will definitely help you in the long run.

For example, if you want to choose between different letter heads, product advertisement techniques or simple things such as color schemes on your products just try them out with different customers and test the results. Software such as Google Ad words can help you test different advertising schemes by showing you the number of hits you get.
Asking your customers to fill in small survey samples is also a good way to learn what a hit is and what’s not. This will help you to know what your customers want and the source from which they learnt about you which will also help you to adjust your advertising techniques!

Read More...

apache, Blogging, Code, Design, Development, freelance, Inspiration, Javascript, programming, Tutorials, web, Wordpress

5 Tips for Optimizing Your Web Hosting

Web optimization is a crucial component to the success of any website. If you go about the process of setting up and optimizing your web hosting in an efficient manner, you can save a considerable amount of money, time, and minimize your level of stress. The money you save, of course, can go towards promoting your website through various other means. Without further adieu, here are the five tips that will have you well on your way to getting the most out of your web hosting.

Pick A Quality Web Host


9 Steps To A Happy Relationship With Your Hosting Provider

Even though the provider of your web hosting account does not necessarily have any direct level of impact on your optimization strategy, picking a web host is such an important decision that it is worth mentioning nonetheless. With a quality web host, you will have peace of mind knowing that your site’s security, accessibility, and stability are all i good hands. Some sites, such as OfficialHostReview.com, offer comprehensive ratings of various web hosting services.

Optimize Your Images


8 Excellent Tools for Optimizing Your Images

Nearly every website these days features at least some images. Therefore, it is important that you learn how to optimize them effectively. If you don’t they can end up taking up copious amounts of bandwidth each day. There are a plethora of free tools available on the web that can assist you in this process.

Optimize WordPress


WordPress Codex – WordPress Optimization

WordPress is the preferred format for the creation of blogs these days, so if your website contains a blog, it’s important to make sure you have your WordPress setup optimized to maximize its speed and efficiency. Some steps you can take towards doing this include making sure no unnecessary plugins are installed, finding an efficient caching system, and removing any extraneous PHP tags you find.

Optimize CSS


Pro CSS for High Traffic Websites

Coding CSS has become the dominant code used for creating today’s websites. One of the ways that you can take advantage of its flexibility is to learn how to create CSS sprites. It’s also a good idea to keep the codes short, particularly when they provide the same style.

Optimize Javascript


Performance Optimization: How to Load your javascript faster!

Javascript can be optimized by combining the sometimes many javascript files used on a site. You can accomplish this through the use of PHP or by playing around with .htaccess. Javascript errors can really wreak havoc on your site loading speed, if one javascript is generating an error it could cause them all to generate them. It is good to always check your javascript for errors using tools like firebug and running the scripts through jsLint or other javascript optimization tools. Also, loading common javascript files like jQuery through a CDN, or popular places such as the code files that google host, are very helpful in lowering your server load.

These are just a few of the steps you can take as a webmaster towards optimizing your web hosting. The more efficiently your website runs, the more traffic you’ll generate.

Read More...

branding, Design, Development, freelance, Inspiration, marketing, programming, Tech, Tutorials, web

E-Commerce Web Design Success Formula

dont-make-me-think-e-commerce-user-experience-book

Designing a complete e-Commerce website is equal to appointing a trustworthy online brand ambassador for your business. This brand ambassador not only spreads the value of your business but in turn brings future business as well. When can you call your e-Commerce website as a successful website? You can claim your shopping cart website to be triumphant when it has increased conversions, achieved huge traffic, high visibility, positive user reviews and immeasurable input in your business progress. Initially an e-Commerce website should serve its purpose and make the users feel at ease. When it serves its purpose, undoubtedly your online store will take your business to new promising levels. There is a definitive success formula for e-Commerce web design which will bring you the real victory when employed in your web design. They are:

Simple UX


Designing Search: UX Strategies for eCommerce Success (UXmatters)

UX stands for User Experience and all you need to concentrate in the initial stage is to take a call on a simple User Experience Design for your website. Analyze the taste and preference of your target group and come to a decision on a direction for those factors that would give them complete satisfaction and improved user experience. You should always try to implement the feedback received from your ultimate users during the design evolution process. Complicated or loaded designs might implant discomfort and make the user want to leave your website. Here comes the need of simplicity and a user-friendly, interactive, usable, accessible, readable, user-centered, simple and to the point User Experience design that will directly guide you towards the path of success.

Simple Checkout Within Few Steps


Don’t Make Me Think: A Common Sense Approach to Web Usability

Ensure that your e-Commerce website is powered by a simple checkout process that gets completed within few steps. You should take special care on certain things like easy reference of the items in the shopping cart, safe, secure and effective means of payment with a clearly displayed SSL certificate, confidential agreement ensuring that the information about the customer will not be disclosed, exhibiting the shipping options along with the shipping charges, terms and conditions, confirmation of the personal data like the name and shipping address of the customer and your checkout process should always end with a confirmation mail stating that the payment has been received and informing the customer about their estimated delivery date.

Compatible Web-Browser


People under 35 prefer Chrome and Safari

It is always good to make sure your website is compatible with all kinds of todays latest web browsers. You cannot assume that all of your potential customers will use only Internet explorer for their browsing activities, instead they may use Firefox, Google Chrome or any other web browsers. So to cover all kinds of web users you should design and develop your e-Commerce website in such a way that it is compatible with all kinds of browsers whether new or old. If you fail to concentrate on this attribute then it means that you are ready to lose a considerable traffic to your site and your sales as well. Also, don’t just think about Web Browser differences, think of resolution differences and screen size in this mobile-centric world, perhaps consider a responsive web design.

Adapt To Future Trends


6 Hot Trends Driving Men’s Ecommerce

The web design of your e-Commerce website should be up to date and should never exhibit any kind of outdated or old-fashioned trends. This will leave a bad impression in the minds of your potential customers as most of them would like to follow a website that adopts the latest trends in the market and adapts itself according to the future trends. You should make your users feel proud that they are with the best website that focuses on progressive moves with every step they keep ahead.

Running a conquering e-Commerce website does not end up with creating thousands of customer satisfaction but should travel towards creating hundreds of customer delight as this will pay for your business conquest in the long run.

Read More...