Calligraphy is a Visual Type Art which in former time, it can be done only on traditional method, using pen, brush, or swan feather. But now, you can easily make calligraphy on digital method.
In this tutorial, I want to share step by step how to make Digital Calligraphy with Adobe Photoshop and Adobe Illustrator. See the finished version: "Rise and Shine". I hope this tutorial will be useful.
1. Make the sketch, u can scan from your sketch book, or make the sketch in Photoshop. And to shorten the work time I make the sketch in Photoshop. Just draw a rough sketch, no detail needed.
2. Open your sketch in Adobe Illustrator, choose "Paint Brush Tool" or press "B". Open the brush palette ( Window - Brushes ) or press "F5", double click on "2 pt. Oval" brush to open the brush option, then use this setting:
Angle = 45 - Fixed
Roundness = 10% or lower - Fixed
Diameter = Try your best - Fixed
Now you are ready to write calligraphy, make new layer above the sketch layer, and trace the sketch.
3. Refine the path shape with "Direct Selection Tool" or press "A". We don't have to do this step, if you already have a smooth shape.
4. Hide your "Sketch" Layer and Export your calligraphy to png with transparent background.
5. Open your Png file in Photoshop. I want to change my Calligraphy to white color, you can easily change the color by pressing "Ctrl+U" or go to "Image - Adjustment - Hue/Saturation", then set lightness to 100%. Create background layer and fill it with black color (You can use "Paint Bucket Tool" or press "B").
6. Create new layer, give it a name "Shadow" and place it above your calligraphy layer. Right click on "Shadow" layer then choose "Create Clipping Mask".
7. Now, we will make the shadow, and you must brush manually to make 3D effect. First you must make selection, and I recommend you to use "Pen Tool", because you can make the shape of your selection easily. After you create the shape with Pen Tool, right click and choose "Make Selection", set Feather Radius to "0".
8. Select "Brush Tool" and choose "Soft Round Brush" (standard Photoshop brush). Now, brush slowly in the selection area with black color.
9. After you done with your brush, remove the selection by pressing "Ctrl+D" or right click and choose "Deselect".
Repeat step 7 to step 9 to your another shape, you must use your feeling to place the shadow and you'll make cool 3D effect.
You may have the experience of diving headfirst into a web design project, only to get overwhelmed by the design possibilities. There are steps in the design process to implement to cut down on the unknown and this is usually in the form of a mood board.
You may have already heard of a mood board, but aren’t too sure how it could truly benefit you or cut down on the overall time spent designing – after all, mood boards take time to complete, themselves.
In this article I will discuss the benefits of using a mood board for a web design project as well as the methods commonly used in creating them.
It’s extremely useful in establishing the visual and aesthetic feel of a site. A mood board not only gives you inspiration in going forward with a project, but also is an effective time-saver and necessary component in the creative process. By creating one, you can tackle many issues early on that you would otherwise encounter later on in the creative process.
Imagine spending hours in Photoshop creating a layout filled with a lot of texture and style, only to have the client not prefer that design solution.
Mood boards can prevent unnecessary frustrations as the result of not having a clear creative direction and may cut the overall time spent on a project in half as a result of careful planning. They also give the client tangible evidence of a ‘research phase’ that they may not understand otherwise, and gets them involved early on.
A mood board helps:
Translate a concept where words may fail
Create a picture in the clients head early on and let them see exactly what you’re planning and how their site is shaping up before you even start properly designing.
Cut down on time spent revising due to miscommunication
Establish the theme of the website (i.e. Soft or hard? Clean or grungy?)
The first step in realizing what needs to go on your mood board is choosing the style that fits the project best. While there are many different ways to present a mood board, the direction you choose will be based on the time allotted, personal work habits and most importantly your client’s personality. The following are just a few elements that generally should be on a mood board.
Include notes on why you like a particular website and how you feel it can be best integrated into the design of their website. Include reasons why the look will suit them.
At this stage you can either use photography the client has supplied, or use stock photography to portray the overall theme of the site.
Style
Depending on the time you have and the scope of the work, it may be beneficial to make more than one mood board, focusing on one style for each. Before you start, come up with a list of adjectives to describe a particular board. A certain mood board can be designed around various adjectives such as:
In doing so, you create a wide variety of styles for the client to chose from.
Physical or Digital?
Mood boards can be created in both digital and physical spaces and there are advantages to both. For instance, a digital mood board can be created quicker, however, physical objects tend to have a higher impact on people because of the more complete palette of sensations physical mood boards offer, in contrast with the black & white or color-prints of a digital mood board.
Mood boards 2.0
Evernote
This virtual mood boarding tool is useful for collecting inspiration by clipping and pasting. It’s a website, desktop, and mobile app that allows you to gather your thoughts through note-taking, capturing images from webpages and your camera, and even writing handwritten notes.
Sampleboard
Another useful virtual mood boarding site is Sampleboard. Simply upload images and organize them into project files to be stored online and use the web editor to easily pull together design trends and color schemes. Mood boards can be shared on Twitter and Facebook, or integrated into your own documents and presentations in one easy click.
Oliaboard
Geared towards Interior Designers, Olioboard is an easy and intuitive application for creating digital mood boards. It is also a community of creative thinkers coming together to share inspiration and offer feedback.
Polvore
Discover style and trends around the world at Polyvore. It’s one of the web’s largest tastemaker communities with 6.5 million monthly visitors.
iPad Moodboard Creator
Moodboard is the bestselling app for creating mood and inspiration boards on your iPad. Each board is a blank canvas for organizing the things that inspire you. Add photos, text, color swatches, and special elements to your boards, then share them with friends and colleagues, anywhere, anytime.
Benefits:
Can be synced with desktop, iPhone, and iPad apps for collecting inspiration wherever you are.
Ideal for the designer who has a loose deadline and the time to collect images on the go.
Template
If you prefer a more formal approach that captures all the details that will go into the design, a refined template may be the best bet. It’s here where you can delve deeper into the design details, incorporating color palettes, font treatments, button styles, and photography.
Benefits:
Helps your client focus on the details and featured elements.
Multiple templates can be developed, each focusing on a separate theme to get the most out of the process.
It’s best to start the creation of a template-based mood board by choosing adjectives to describe each one. These words can be referred to as you pull items together. For instance:
Loose Collage
A loose collage is beneficial for those who aren’t too obsessed with details and wish to create the overall impression of the site in as free a way as possible. If you’re a big picture thinker this mood boarding method may be for you.
Benefits:
Can be thrown together relatively quickly and doesn’t force you to make decisions about smaller details like colors and fonts.
Grab inspiration from wherever – whether it’s a book or images found online.
Moleskine
Moleskines are another practical way of showing your intent. In addition to doodling and note taking you can also use them for collecting various scraps, images, doodles, and notes.
Benefits:
Like a loose collage, they can be as free flowing or organic as you want them to be.
Multiple pages allow for a convenient way to keep your inspiration all in one book.
The portability (and reasonable size) allows you to take your inspiration on the go.
Resources
Flickr Inspiration Boards – contain a great collection of inspiration boards from a variety of designers.
If you often have a hard time initially in the design process, creating a mood board through any of the methods mentioned here can take some of that initial frustration away. It’s through creating these mood boards that experimentation is delegated to the beginning to the process, laying a solid foundation for the rest of the web design process.
