Free Printable: Xmas gift wrapping paper

{Read in Italian...}

I have to say that: I dislike most of the gift wrapping papers that can be commonly found at the supermarket or regular shops. I can't stand those cheap, plastic-like ribbons either!
This year I want to put extra care a personal touch into my Christmas gifts, and that will also involve my packages.

Pinterest offers us so many great ideas: I created a specific board about packaging and, reviewing my pins, I realized what I want for my own: simple ideas and materials, with a touch of green, red or gold.
This year I have three concepts for my packages: some of them involve elements that I've personally drawn.
cCarta regalo natalizia free printable
I made this pattern with small geometric pines, that can be printed and used as gift wrapping paper. If the package is too big, you can put together more than one A4 sheets.
I made a light green version, a darker green one, a red one, a golden one and a black&white one, as well.
You can download and use them freely, in case you need a fast idea for your own packages.

You can complete your package with some simple twine {I wanted to use a darker one, but at the moment I only own the one in the picture}, or a nice cotton thread that can be green or red, in order to match the color of the pines... or you can use a contrasting color as well! Just try to use a thick, coarse thread, to make your package a little more "handmade-ish"...
For a different style, you could also print the black&white version of the paper and pair it with a neon-colored thread!

I hope you liked my little freebie: of course, if you use these papers for your gifts I'd be happy to see the result :)

How to customize your Blogger widget titles {first method}

{Read in Italian...}

Today we'll learn how to easily spice up the titles of our blog widgets. Next time I'll explain another method, which is the one that I prefer and personally use when I design blogs, but this one is perfect in case you don't want to mess with your template and to deal with your CSS.
Here are the pros and the cons {which we'll try to minimize anyway} of this method:
  • you'll just need to type a short HTML code into a new widget;
  • you can have fun with typography, since you won't be forced to use web fonts;
  • it is very easy to use a different color or personalization for each title.
  • according to your own blog template, there coul be a little too much white space in between titles and widgets;
  • some widgets require a title, no matter what, so we'll have to solve this with a little trick;
  • images are always heavier than text and this will slightly decrease the loading speed of your page;
  • there's a risk that these titles, being images instead of real text, could look a little blurry if compared with the rest of your fonts.

Before beginning, here's how the sidebar of my testing blog looks like, without any customization.
How to customize your Blogger widget titles 1
Kinda ugly, right? It lacks of personality and those titles are so small that you barely notice them.

The first thing to do is to create our titles with a graphic editor. In my example I used Photoshop {of course, you can use any free editor, like Picmonkey, Ipiccy, etc.} to make some colored flags, then I wrote the titles of my widgets on them.
Now we have to upload our pictures: you can do it on Flickr, or on an unpublished blog post... Just get a direct link to those images.
Now go to your Layout page on Blogger dashboard and add to your sidebar a new HTML/JavaScript widget. Type the following code in:
<img src="" alt="My widget title" />
Change the green text with the direct link to your image, while instead of the purple text you'll have to type the title of your widget.
Why do we need to insert this alt tag? Because if a user won't be able to load our images for any reason, at least he'll display a textual description.
After saving it, we'll need to drag this new widget straight above the widget it refers to, as a title.
Let's repeat this operation for all of our widgets: basically, for each widget in our sidebar, we'll also have a new HTML/JavaScript widget containing its title.
Now we have to delete all of the text titles within their own widgets. If Blogger tells us that a title is mandatory for certain widgets, don't use a dot or an asterisk: this is something that I've seen many times, but it's kinda ugly! Just type this instead: &#160;
This is a non-breaking space glyph, resulting in an emply field.
Now our sidebar should look like this:
How to customize your Blogger widget titles 1
Much better, right? I still don't like that excessive white space, over that widget that had a mandatory title {the Google+ one}. We can fix this by adding a tiny-winy CSS line into the code of the widget that contains its title:
<img src="" alt="My widget title" style="margin-bottom: -30px;" />
The orange text is the one that we're adding. You can change the spacing: if, for instance, you think that "-30px" is too much, you can type "-20px" instead, so you'll have more white space in between. Use any value you prefer, until you're satisfied.
So here's what we get:
How to customize your Blogger widget titles 1
A couple of advices:
  • try to create or use images, fonts and colors that fit well with the rest of your design;
  • save your images as .PNG: your text will look less blurry and you can preserve the alpha channel, if you have transparent pixels;
  • resize your titles according to the width of your sidebar: they don't have to be too wide, neither too narrow!
I hope you found this post useful. Have fun!

Autumn Ribbons {FREEBIE}

{Read in Italian...}
Free autumn ribbons for your blog sidebar or whatever you want
These last two weeks have been quite hard for me. I'll sum it up fast.
I was ill and I had to do a lot of tests because one of the causes could have been leukemia. Also, my mate had a car crush. Luckily, we're fine now. It turned out that I have a pretty bad infection, but no cancer. My mate is ok and our car is on its way to be repaired, the insurance will cover the entire cost of this operation. Now we only have to deal with a crazy, senile neighbour, who's trying to get our bikes removed from the parking area because... I dunno, he's bored I guess...
I am unable to keep this sort of things for myself: if I do, my fears and my frustrarion tend to grow bigger and bigger...
I am lucky because I received a lot of support from my family and my friends, both real life ones and online ones: those who, patiently, care to read my blog even when my posts are just pointless rants.

That's why I wanted to make something for my readers: it's just a little freebie, a small token for my gratitude.
These are some ribbons, available in 6 different colors that I extrapolated from some of my favorite fall palettes.
They've been conceived as sidebar dividers or headers, but you can use them for anything you want, really.
They come in two different sizes, so you can use them according to the sizing of you sidebar.

Don't you know how to customize your sidebar titles? No worries, this is going to be the topic of my next tutorial...

I hope that you like them: if you want to give a little seasonal touch to your blog, maybe they can get useful...
Feel free to show me the result, if you use them: I'd bee happy to see that!

Do you like to edit your blog graphics according to the current season?
Would you consider the idea of using seasonal blog layouts?
Or, otherwise, do you fear that this sort of things can make your identity too messy?

Blog Design for 'Froda Creazioni'

{Read in Italian...}

Today I want to show you my latest custom blog design work: Froda Creazioni!
Blog Design for Froda Creazioni
Grazia, my lovely customer, needed a new look for her space: it had to be very kawaii, sort of otaku, slightly geek, with a sprinkle of fantasy.
Grazia is such a talented crafter. She creates wonderful amigurumi and polymer clay accessories {even for cosplay!} along with more traditional crafts, like ring bearer pillows.

For her new blog design, we started from a little illustration that represents herself as a little, crafty hobbit. This illustration was made by Grazia's friend Nari. Unfortunately, the original image was lost, so I had to rearrange the one that was in her old header, redrawing a couple of missing parts.
The rest of the design had to be very manga-inspired: a theme that was so very dear to me, when I was a teenager.
This work was so much fun!
I got inspired by my old addition to halftone screens, the ones that you can commonly see on shojo mangas {girly Japanese comics}: I used to buy these rare and expansive sheets, to apply them over my drawings and comics. I wanted my graphic elements for Grazia's blog to bring this halftone feeling.

As for colors, Grazia loves light blue and green. I paired them with a bright liliac, to create a nice contrast. With a total white background, the layout resulted simple, clean and fun.
The main font is a clear sans-serif, while for the titles I needed something with that fantasy vibe I was looking for... so I asked for help to Bilbo! XD
Desktop and Mobile Visualization for Froda Creazioni

On the home page I added a slider with some edited pictures that lead to some themes of Grazia's creations.
Her contact page contains a handy form scripted by me.

I hope that you liked my work for Grazia and I thank her again for trusting me!

Two little works

{Read in Italian}

Today I realized that I've never mentioned here a couple of little vector works that I made some months ago.

The first one is the new logo for the creations of Le idee della Vale.
New logo for Le idee della Vale
I revisited her doodle with Illustrator. Vale wanted her Mini Me to resamble her as much as possible. We needed a couple of tries to make her glasses look identical to the real ones that she wears! In the end, I think that this illustration is cute, very kawaii and a little geeky.

The second one is a watermark for Decoriciclo. Of course, there's a dark and a light version of it.
Watermark for Decoriciclo
I recreated the content of her header with Illustrator. The original piece was made by Daniela herself, with a pyrograph: she's one of the most versatile crafters that I've ever known!

What do you think?

Blog Design & Branding for 'I fiori di Marica'

{Read in Italian...}

Today I'm happy to show you my latest blog design and branding work, for I fiori di Marica.
Maria Carmela and Tina are a couple of creative mother and daughter. They work with almost any material, their imagination has no limits!
Blog Design & Branding for 'I fiori di Marica'
Tina and Maria Carmela had clear in their minds most of what they wanted for their new blog layout. Of course, when I had to deal with an idea that I didn't think could have been effective, I offered them different options.
Designers are not merely tools: our work should always include offering the customer the best advice possible, according to our experience.
So, they gave me some options about the color scheme to follow. They also wanted a certain font included and they gave me the scan of one of their felt creations, a flower. This felt flower eventually became the theme of the whole design. After cropping and editing it accordingly to my needs, I used this flower to create the social icons and the "back to top" button. The I used the same shape to make the logo and some other elements, like the bullets for the lists that they can make on their posts. Here you can see them in action.
Blog Design & Branding for 'I fiori di Marica' - palette da Design Seeds
The chosen color palette. Source: Design Seeds
I had some troubles when I had to include a font that was not present on Google Web Fonts: with Blogger, this can be very tricky!
In the end, I found a decent solution, thanks to a Jquery plugin.
The result is that now you can see the navigation menu, the titles of the widgets and some other written elements with this cute label style.
If I were a lazy designer, I would have opted for images, instead of "wasting" so many hours looking for a better solution. But this way the blog owners will be able to add new pages or widgets without having to create new images and mess with html code.
No sir, the labels will appear effortlessly, as they edit their widgets the easy way.

Of course, I made a custom mobile visualization for them...
Blog Design & Branding for 'I fiori di Marica' - mobile and desktop visualization
... and I created the app-style icon, for smartphones and tablets.
Blog Design & Branding for 'I fiori di Marica' - mobile icon
Screenshot from my smartphone.
When the blog was complete, Maria Carmela and Tina commissioned me also some packaging and branding material, for print usage. So, there we have:
  • business cards;
  • labels with their address, to be put on their envelopes;
  • round stickers;
  • tags for their jewelry;
  • small tags that will be printed on tissue, to stitche them on fabric creations;
  • labels to be put on promotional flayers for their online shops.
I used some qr codes, to make it easier to reack their links.
Blog Design per 'I fiori di Marica' - branding and packaging
Thank you so much, Maria Carmela and Tina! It's been a pleasure to work with you!

Custom Domain on Blogger - FAQ

{Read in Italian...}
Custom Domain on Blogger - FAQ
Some days ago I set up a custom domain name for the Italian version of my blog. Since then, I received lots of questions about the process: that's why today I'm going to answer some frequently asked questions on this subject. Hope you find them useful!
  • First of all, what the hell is a domain?!
    A domain name is an address that leads to a specific website, which is hosted on a specific server.
    For example, is the domain name that points to the Google server where my Italian blog is hosted.
  • Why should I consider buying a custom domain name?
    A good reason to get rid of the is that a custom domain looks more professional, compared to a standard domain that is clearly tied to a free service like Blogger itself.
    Let me clear this point: let's say that I'm looking for an information about weaning {since I'm comparing the authorship of two mommy blogs} and after my research Google gives me a link and the address to a website with a proper, custom domain. Which link will I click? Most of the times I'd click on the custom domain, because I expect the blogger who invested into her space to be more professional and reliable.
  • Where can I buy a domain name?
    I used GoDaddy, but there are many other options, like 1&1 and EasyDNS. Sometimes these websites have promotions going on, so check them out.
  • How do I buy my domain name?
    First, you need to choose the name. If you're interested in a top-level domain {which in most of the cases is what you're looking for your blog}, it will be a URL made of your blog name on the left {without dots in between the words} and an extension on the right, like .com, .org, .net, etc. If that domain name is already taken, you'll get an alert and you'll need to adjust to something slightly different.
    Domain names require an annual fee in order to keep their property. The cost is roughly 10$ per year. If you let them expire without renewing them, anyone can get their hands on your domain name.
  • But I wanted that domain name that is already taken! Why can't I buy it as well?
    Domain names are globally unique: it means that, worldwide, there can't be two domain names that point to two different servers.
  • I got used to Blogger interface and I love it... What's going to happen if I change my domain name?
    Absolutely nothing. Your blog will still be hosted on Blogger and the interface won't change. This would occur only if you switch hosting service, for instance if you decide to move to Wordpress.
  • What if some day I decide to move to Wordpress, after I set my custom domain on Blogger? Will I lose it?
    Nope! You'll just need to point your domain another time, to the server where your blog is hosted.
  • Will the custom domain mess up my SEO? Will I lose ranking on Google?
    No. When you switch to a custom domain, Blogger automatically redirects all of the traffic to your new URL, through a process called Redirect 301 {or 301 Moved permanently}. This way you won't lose any page rank and all of your links will still work.
  • Will my readers lose any feed?
    No. I was afraid of this as well, but soon I realized that everything was ok. I didn't have to change anything on Feedburner, etc.
  • What happens to Adsense ads?
    After you set up a custom domain, your Adsense ads won't be displayed anymore, leaving a blank space. In order to make them work again, you'll need to follow a procedure. I'm going to talk about it in another post, very soon.
  • What if I buy more domain names? Like "" and ""?
    If you want to prevent someone else from buying a domain that looks very similar to yours, which can be confusing for some potential readers, you should buy more than one domain name. Then you'll have to choose your "primary" domain name and point it directly to your blog, while the other names will be redirected to the first one. We'll see how in the next post about domains.
If you have more questions, leave me a comment: I'll add the answer to the FAQ.
Next time we'll see how to set up a custom domain name on Blogger. Since I used GoDaddy, I'll use some screenshots from that website. Then we'll see how to fix Adwords ads.

Blog Design for 'Carta e Cuci'

{Read in Italian...}

Today I'm happy to show you my latest blog design work, for Sabrina.
Blog Design for 'Carta e Cuci'
For some reason, her blog, Carta e Cuci, reminds me about myself. It is a very eclectic, but it always makes you feel at home. Working for Sabrina has been an authentic joy!

She has such a personal and original point of view on... like, everything. See how her son's toy car has become the inspiration for our color scheme...
Blog Design for 'Carta e Cuci'
In the end I used a brighter orange, because it was more readable on the screen.
When it came to creating her new logo, header and graphic elements, I wanted them to recall the main topics of the blog: tailoring and paper crafts.
So I used sketchy fonts, stitch-like dashed lines, washi tapes...
I tried to use the flat style that I love so much, giving it a playful, hand-drawn mood.

Working on this project gave me the possibility to learn so much.
I'm quite proud of the washi tape date headers, slightly tilted {CSS3 magic!}.
I'm also happy about the contact form placed on its static page, with the privacy policy check {which is mandatory by law, in Italy} and an anti-spam filter that doesn't rely on annoying captchas. The standard contact form widget available on Blogger doesn't feature these options, that's why I had to make a new one by myself. I was able to make it work by uploading on my personal server space the "engine" that delivers the messages.
Blog Design for 'Carta e Cuci'
For the first time, I created a custom mobile version of a Blogger blog.
Actually, it is half a mobile version and half responsive {media queries and fluid elements involved}... Maybe there are better solution and I hope to learn the as I keep learning, but the important thing for now is that it works!
Blog Design for 'Carta e Cuci'
On a side note: look at the app-like icon on mobile devices!
I also associated a new domain name to Sabrina's blog, as I did for my own some days ago. I'm going to publish a tutorial about this next week!
Lastly, I created some images for Sabrina's social network profiles: she'll upload them soon...

Thank you so much, Sabrina, for giving me so much trust on this project. I hope that we'll keep in touch as we did during these days for a long time because you're special. I also hope that my work for you will help to make your projects come true very soon!

PS. Thanks to Simona for her tips and all of the support she gave me during this project!

Cake Stand Pendant

{Read in Italian...}

I have a confession to make: I would spend hours on Pinterest, drooling on all of those stunning cake pictures...
When we talk about quality food photography, we know that there's a damn great amount of work behind the scenes. It is not just a matter of getting the perfect slice of cake with the right illumination. A lot of care for the detail is involved, like choosing the perfectly matching dish, a cute tea cup, or a beautiful cake stand...
These are all of those things that make me forget that time flies away when I walk into shops like Ikea or Maisons Du Monde. My boyfirend is always very happy about that...

Today I'm going to show you my second slice of cake made with polymer clay. I crated this pendant about one month ago, for a present.
Cake Stand Pendant
I was crazy about these mini cake stands when I bought them, and finally I used one!
Cake Stand Pendant
For the first time, I attempted to create a sort of glaze with Fimo Liquid. To be a totally new technique to me, I'm quite happy with the result.

Have a very sweet day!

How to find the measurement of blog columns

{Read in Italian...}

Remember this post, when we talked about a CSS code that would preset the maximum size your blog images? I didn't explain how to find out the width of your blog columns, without margins/padding.
This is a very simple procedure: trust me, it is waaaaaaay more complicated to explain, rather than to apply.
We're gonna use Google Chrome developer tools, but if you only have Firefox, it is quite the same thing.
Just please, don't tell me that you browse the internet with an old version of Internet Explorer. Pretty please!
  • Visit your blog with Google Chrome.
  • Place your mouse pointer over your blog content, right click and select “Inspect element”: the dev tools interface will pop up at the bottom of your page.
  • From this interface, on the left, look for a magnifying glaass icon: click on it.
  • On the right of the same interface, look for the “computed” button. Click on it and you'll see some colored boxes: they'll contain the measurement of your selected blog elements.
How to find the measurement of blog columns
Click on the image to enlarge it.
  • Now, place your mouse pointer over your post body: you'll see that the text and the images will be selected and you'll see the name of the element as well. Look at the blue box inside the “computed” window: the first measurement is your post body width.
How to find the measurement of blog columns
Click on the image to enlarge it.
If you understood this procedure, you can apply it for your sidebar(s), or any other blog element as well.

Hand-drawn line patterns {freebie}

{Read in Italian...}
hand-drawn line patterns (free)
For my current blog design commission I'm running lots of tests: I have a clear design in my mind, but I need to try a lot of things out in order to put it in place.
Sounds like a paradox, I know...
For this project, I'd like to use a background pattern. I created these lined patterns and I like how they look... but I realized that I want something slightly different for that blog.

That's why I'm going to share these patterns with you. There are different color options, including a greyscale and a sepia. You can download and use them freely, if you wish!

I just ask not to claim my work as your own, nor redistribute and/or resell it.

I'd be happy if you drop me a comment to show me how you used these patterns {as a blog background, or any other digital graphic project}.
Ad remamber: sharing is caring ;)

Need help to set a blog background? Here you can find some tips.

How to insert a description to Blogger posts

{Read in Italian...}

Have you ever noticed that sometimes, when you look for a blog post on Google or Facebook, the description to that article is very generic and related to the whole blog, or {worse} it is made of part of the first comment? I have to admit that, some time ago, this annoying thing happened to my posts as well. Then, fortunately, I made up for this...
How to insert a description to Blogger posts
Some days ago a Blogger user asked me how to insert this custom description on her posts: I'm going to share this information, just in case someone else didn't know as well!

How to insert a description to Blogger posts
All you have to do is to look at the sidebar of your Blogger post editor and fill in the "Search Description" field, then click on "Done".

EDIT: If you can't see the Search Description field in your post editor, maybe you didn't set your meta description tags.
From your Blogger dashboard, go to Settings > Search preferences and enable the Description field.
You should also insert a short description about your blog, including some keywords. This is extremely important, search engine optimization-wise.
How to insert a description to Blogger posts
If this doesn't fix the problem, maybe you're using a template that lacks of a portion of code that is necessary in order to enable the Search Description form from the post editor.
Backup your template, then go to Template > Edit HTML. Look for the <head> tag. Right below that tag, paste this:
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
Save and check if the Search Description field appears now.

Facebook new layout: Tips + Creative timeline covers

{Read in Italian...}

Starting from June 18th, all Facebook fan pages will go live with their new layout. This is going to be more compact, with the news on the right column and info on the left. You can already test the new look, in order to check if everything is ok before it goes live.

I really, really love those creative Facebook timeline covers that integrate profile pictures into a bigger scenario. If you don't know what I'm talking about, you definitely need to look at these brilliant examples here!
examples of creative timeline covers
Examples of creative FB timeline covers from Awwwards
I wanted to create a similar thing for my page as well. Here's how my timeline cover used to look like:
Facebook new layout: Tips + Creative timeline covers
Then I switched to the new look and... OMG!
Facebook new layout: Tips + Creative timeline covers
It was a total mess. And, honestly, I really hate that gray gradient at the bottom...
Whining doesn't solve the situation anyway: we can't change Facebook graphics, so we have to adapt to them as better as we can.

Timeline cover measurements aren't changing, you can check them here:
Facebook timeline cover measurements guide
What's new is the {fugly} gray gradient, those buttons hovering on the right and the title on the left. Also, the profile icon is positioned a little higher than before.

So, here's how I rearranged my timeline cover:
Facebook new layout: Tips + Creative timeline covers

You should check how your fan page will look as well: you're still in time to fix stuff before it goes live...
Do you like the new Facebook layout? What do you think about creative timeline pictures? Would you like to have one of those for your page as well?

Note: Unfortunately, the Facebook app positions the timeline cover and the profile icon in ways that are difficult to predict. It's quite impossible to have a profile picture that fits the timeline cover on mobile visualization as well, but what's for sure is that the profile pic is positioned on the left. So, if you have written content on the timeline cover, you'd better position it on the right.
As for my page, I haven't found a satisfying solution yet...

How to preset the width of your Post and Sidebar Images

{Read in Italian...}

I'm pretty sure that you've already visited blogs where images exceeded the space they were supposed to fit, like here:
How to preset the width of your Post and Sidebar Images
As you can see, this post image is extending onto the sidebar. This effect is horrible and, most importantly, it could make some contents unreadable and/or unclickable.
Same thing can happen with sidebar, like here:
How to preset the width of your Post and Sidebar Images
I see this sort of things very often and every time I can't help but ask myself: "How the hell didn't this blogger notice?!"

To avoid this situation, you should resize your images according to the width of your columns.
Anyway, it can happen to grab an image in a hurry and forget this step: it happens a lot of times while grabbing banners.
When I code a blog, after setting the width for content and sidebar(s), the first thing I do is to insert some CSS to prevent the future owner of the blog from having this sort of trouble at any time.

Adding this code is easy: you can do it as well!
First, you need to check the width of your columns, margin and padding excluded.
I usually upload my images slightly larger than the space they should fit, roughly 30 pixel larger: I do this because, if I ever decide to enlarge my column a little, I'd just need to edit my CSS to have all of my images as wide as the content once again!

Here's the code for post images:
.post-body img {
max-width: 730px;
height: auto;
To insert it {after you backup your template, as usual!}, from Blogger, go to Template > Customize >  Advanced > Add CSS.
Let's see what it does:
  • .post-body: we're giving a style to the class containing posts.
Note: almost every Blogger template adopts this name for the class that contains posts: check that your template is not an exception! Go to Template > Edit HTML, press ctrl+f and type .post-body into the search box
If you find this code, you're ok! Otherwise, if you need, I can help ;)
  • img: the style we're going to apply goes to every image that we put into .post-body... which means, every image in our posts.
  • max-width: we're setting the maximum width that our images can occupy. This means that a smaller image won't stretch to reach 730px {this would be awful and would happen if, instead, we only type "width"}, while bigger images will always be resized. If we choose the right measure for our column, we can say goodbye to overflowing pictures!
  • 730px: this is the width of my main column: edit this value according to your own.
  • height: if you set this withim auto you'll preserve the width-height ratio of your images, so that they won't be deformed when resized.
As for your sidebar: same thing, but instead of .post-body img you should type .column-right-inner img {.column-left-inner if your sidebar is on the left, of course}.
You should verify that your template adopted this name for its sidebar, as you did for post images.

When we upload an image into a post from Blogger editor, if we chose to have images as wide as their container, we shouldn't center them, otherwise Blogger will apply some margin that would make the image overflow a little.
You should align on the left and check Original size.
How to preset the width of your Post and Sidebar Images
Otherwise, if your picture is smaller, it is better to center it.

Let's see what happens if we apply this code to the template of  my test blog...
How to preset the width of your Post and Sidebar Images
Voila: everything fits automatically!

More posts about images:
Related Posts Plugin for WordPress, Blogger...