I have a Bachelor's degree in European languages, cultures, and literature from the University of Naples. I'm passionate about graphics and web design, and for several years I've been working on projects and designs for many companies. I'm a writer for the Audero User Group; my specialties are HMTL, CSS, Web Design, and Adobe Photoshop.

Annarita's articles

  1. How to Create Photo-filled Text with Photoshop

    Designing for the web has always been a fast-developing field where a professional has to skillfully combine visual information design, aesthetics and composition priciples with the most relevant current ideas and trends to satisfy the expectations of his client.

    A good web designer has a clear vision of the main aim of the website they are creating and the particular message they are trying to convey.

    With the rise of Bootstrap, Foundation and similar frameworks, it’s clear that layouts are in danger of becoming more ‘samey’ than ever before. We’re all very familiar with that ‘Bootstrap Look’, right?

    In this context, the need for a little design differentiation is more urgent than ever. I think that one of the most difficult tasks for a web designer is to find some creative angle to make work which can be considered as different and unique.

    In other words, ideally we’d all love to build layout and site experiences that couldn’t easily replicated by the masses.

    The rule to follow to accomplish this first task is to use imagination and avoid the most commonly used images, framing tricks, compositions or effects.

    3D Lichtenstein

    More and more professionals are trying to create some pretty cool graphics and animations with pure CSS, exploiting all its hidden potential, as in this case.

    OK, perhaps this is too much.

    Let’s try with this construction from Roman Cortes. Even though it may not be not accessible to everyone, it’s a fine reminder of what CSS3 can let us do.

    But what if I am not a CSS expert and don’t have such advanced competences? Or if I perhaps don’t have the time (or inclination) to draw images with CSS, and instead prefer to leverage what I’ve learned about Photoshop or Illustrator?

    Thankfully Photoshop can help us to achieve good results and create visual less conventional treatments.

    In this tutorial you’ll see how to create a photo-filled text in few simple steps that you could use to adorn your next project.

    Photoshop in Action

    This tutorial will help us to understand how simple is to insert a photo inside a text using Adobe Photoshop CS6. We’re going to use a very few and very well-known commands of the program and I assure you that the result you’ll achieve is awesome.

    We can use our personal photos or images we have found surfing the Web. There are no limits and all we have to do is follow our fantasy.

    Let’s start our project choosing a photo we particularly love, we are fond on, or we would like to work on and think about the typeface we’re going to use for this.

    I choose a beautiful view of the Tower Bridge, the wonderful combined bascule and suspension bridge that spans the River Thames. It is close to the Tower of London, from which it takes its name and has become an iconic symbol of this town.

    Obviously, feel free to work on also on a subject of your choosing.

    Let’s see how to go on.

  2. Creating a Vintage Television using BEM, CSS3, and JavaScript

    Many graphic effects that were previously only possible using a graphics editor are now feasible thanks to a combination of simple CSS rules. This trend is often referred to as “CSS Art”, a term that indicates the use of CSS for the creation of graphic experiments where the CSS bosses the show — whether it be images or real animations.

    A few beautiful examples of CSS art that you may have seen include Homer Simpson and Darth Vader, both created with pure CSS.

    In this article, I’ll show you how to draw a small vintage television created using HTML5 and CSS3 with the addition of few lines of JavaScript to simulate the possibility to show different channels (actually videos taken from YouTube).

    It should be noted that although a user may be attracted by these effects, probably in some cases they are taken to extremes. We would always want to ensure that any technique we use isn’t affecting the performance or maintainability of our code.

    Here’s a CodePen demo showing what we’ll be creating:

    See the Pen CSS3 and JavaScript Vintage TV by SitePoint (@SitePoint) on CodePen.

    A Brief BEM Intro

    For this project we’ll use the BEM methodology for naming our CSS classes.

    Explaining BEM in great detail is outside the scope of this article, but here I’ll cover it briefly.

    The acronym BEM stands for Block Element Modifier. This methodology suggests a structured way of naming classes, based on the properties and role of the element in question. To adhere to the BEM methodology, we have to stick with a naming convention that follows this pattern:

  3. Adobe Illustrator: Exploiting the Transform Effect

    The Transform Effect in Adobe Illustrator lets you move, scale, flip, rotate and clone the appearance of one of more selected objects (all from a central dialog box).

    Using it you can create patterns with paths and text blocks, and handle the whole pattern by making adjustments to the native project.

    In this tutorial, I’ll explain you how to create a simple bevelled stroke effect and I’ll show you some curiosities regarding the Transform Effect.

    You’ll be surprised by the power of this as simple as indispensable tool.

    The Transform Effect: what is it?

    As I mentioned in the introduction of the article, the Transform Effect is a dynamic effect whose main result is to create patterns of paths or text blocks that can be simply manipulated in a single command, allowing you to make adjustments to the original object.

    In this practical example, I’ll guide you step by step in the creation of a simple beveled stroke effect. Secondly, we’ll have a look at how to use one of the most important and curious Illustrator’s path wigglers, — the Pucker & Bloat.

    Well, right premises done, let’s get started.

    Step 1: Setting up the text

    Open a simple line drawing and do a background square which will be our starting point.

    The first task of this exercise is using the offset strokes to create a depth effect.

    Basically we’ll achieve this practical effect dynamically, which is a smarter and better way to work. It’s very common, indeed – especially among the very beginner users of Adobe Illustrator – that a good way to create a text with more than one stroke is the following: creating a text, assigning a stroke, doing a copy of it, doing a paste in front of the same image, change color and reduce the stroke and then repeat the same operations over and over again until reaching the desired effect.

    Obviously this is not the right (and recommended) way of creating this effect, not only because it is slow, repetitive and imprecise but above all because that means that if you make a change to anyone of your texts, you’ll have to change all the others of course.

    On the contrary, with this new approach, you have only one centered text, so that one change affects the whole set of offset strokes, and this appears a smarter way to work.

  4. Discovering Pure: Basic Examples

    Introduction Some of the most regular and frequent readers of the network might remember a previous series of mine entitled Build a Responsive, Mobile-Friendly Website From Scratch. It started with the creation of mockups and wireframes through to the adaptation of the layout according to the devices used. I decided to take up this small […]

  5. Examples of Mobile Design: Anti-Patterns

    This entry is part 3 of 3 in the series Mobile Design Patterns

    This entry is part 3 of 3 in the series Mobile Design PatternsIn the first article we’ve seen some useful tips and tricks for better organization of forms, galleries and search functions; in the second one we’ve seen, through some examples of more or less known applications available in the marketplace, which are the most […]

  6. Examples of Mobile Design Pattern: Part 2

    This entry is part 2 of 3 in the series Mobile Design Patterns

    This entry is part 2 of 3 in the series Mobile Design PatternsIntroduction In the first article of this mini-series dedicated to Mobile Design Patterns, I gave a brief overview of what they are and the importance of their implementation in any well designed mobile application. Besides, I tried to show, through the study of […]

  7. Examples of Mobile Design Patterns

    This entry is part 1 of 3 in the series Mobile Design Patterns

    This entry is part 1 of 3 in the series Mobile Design PatternsIntroduction We’re living in an era in which the constant and rapid changes of habits and the increasing presence of technology in our lives is presenting very big challenges to developers and designers. The growing importance given to the design and development of […]