After receveid that asking about how I blend my images, I have the idea to start a serie of posts teaching my ways of editing. In this first post, I will teach how I edit my banners (like the header of my current heaven edits theme).
First of all, I want to make clear, english is not my first language and this is my way of editing, if you have a better way, good for you. And we will use pixlr, but you can use photoshop if you want, the settings are practically the same.
So let's go.
I will use two image as example. x x
Open a new file with the size you want your banner. Mine will be 900x400.
I open the first image and after put it where I want, I duplicate and I palce it beside the first. There’s a tip: In the layers window/box, select the toggle layer setting and (if your image is dark as mine) slect the darken option. Notice that all dark fileds will blend/merge with the bottom image. Now, I will erase the parts I don’t want to appear and will apply some light/contrast efects using the curves (ctrl+m) If you select the channel opition, you can change how some colors of he image will appear. It’s time to use your imagination to edit.
Mine came out like this:
Now, I will add the other picture.
After paste and position the second picture where I want. I will drag the first picture to the op and use the darken option on it. The white fields will be merged with the second picture and will be transparent. To fix that, I will add another layer and select the gradient tool to paint white again. I click outside the picture’s fild and drag the line until I want to "paint". You can drag the other picture and edit it if you want. To edi your pictures, you can use the sharpen tool and box blur as you want. This part will be as you want.
Not, I need something to hide the joined part. This shadow in white that apart the two pictures. You can also use some textures or add other picture, blending it. You can make whatever you want. I will use one of this textures.
I will use the same settings to blend the texture. The best to me with this texture was lighthing. I used the erase tool to delete some fields I don’t want to appear and duplicated the same texture to make another effect. Now, you just need to add some text. Mine came out like this:
You must use your imagination to edit the text like you want.
As I said in the begin, this is the way I edit some of my banners. Hope you guys liked!!
Our first css and html effet!! Hope you guys like. Warning! You need some knoledgment about where to paste or how edit a theme before trying this effect. If you want some help, jus message me or send an ask.
Preview
Effect 1:
Paste this code above </style>
It’s extremely important you edit the width and height part. You have to put the same size of your image, if you don’t did that, the effect would not work well.
Now, paste this code where you want your effect work. You can duplicate the same code many times you want, if you are going to apply more than one link on your them.
Effect 2:
Paste this code above </style>
After, paste this code where you want your effect work.
Please do not repost this code nor any part of it and do not use it to create another code/effect. There’s no need to credit me in your theme, just do not delete the credits line. There’s no need to reblog this post if you will use or find this tutorial helpfull, just like the post would be great.
Go to your customization page and search for {block:answer}. Delete everything until {/block:Answer} (you need to inlude this tags when delete them) and paste this code.
Now, search for </style> and above, paste this code.
Warning! This code only works well for 500px posts sized. If your posts field is bigger or smaller, you’ll need to edit widht’s and margin’s properties. If you have any kind of knowledge about how to edit this parts, message me or aske me with your post’s fied size and I will help you!
How do you blend pictures together? Like your banner? It looks like you blended the same photo together side by side into one photo. I’ve been trying to figure out how to do. But I can’t seem to find a tutorial.
I use pixlr editor and select the layers mode.
It will depend on the layers, if they are dark or light. You have to try randomly until find he effect you want.
- background colors.
- links, title, scrollbar, borders, almost everything is customizable.
- six links.
Is a very very very very basic theme. Theme all made with that tutorial we are providing.
Please like the post if you use, don’t need to reblog if you don’t want to. it would be awesome if you could send me an ask telling me you are using. Every problem with customization or elements doesn’t working, please message me or send an ask.
In the lasts posts, we learned how to edit the images we will use in our theme (we learned how to create our themplate/layout on pixlr editor) and we knew the basic codes to make a tumblr theme work.
Just reminding to NOT repost my code or the pastebin link. Please, if you want this on your blog use the reblog button. And DON’T use my code as base to create others bases. I’ve worked in this final base code for almost two years fighting with tumblr updates from time to time. It would be unfair if you just take this ready code and just repost without working yourself.
The first thing we need to do is limitate our post post field. The default size is 500px because all images will be in this size. But you can put the size you wish. Let’s work with 500px for photo posts, photoset and video posts. You need to verify the size of your theme images (we have made in the first lesson) to know the real size you need to put your posts.
Between <style> and </style> (remember that those tags are responsable to make our css properties work. Everything you want to customize in your theme is pasted there) paste:
The tag posts are already on the code, so you don’t need to edit nothing besides this.
500px is our post field size.
#fff is the color’s code of the background of the post field.
float:left is the property the will show where your posts will be, left or right. If you are not going to put a sidebar, delete this and after, you can put the posts to be on the center.
If you don’t want border, just switch 1px to 0px or you can switch the solid for dashed, dotted and goove, respectively on the image below:
You can also change the size of the border to 2px, 3px or whatever you want to. To know the hexadecimal code of the color you want to use as border, just go to pixlr editor and copy the code:
Don’t forget to use the hashtag and to close all the properties you paste with ; (semicolon). Any hashtag missing or property open will make your code not work.
Margin-top, bottom and padding are optional elements which will your code good look. There’s no need to change anything, but if you have a bit of knowledge with css you can edit as you want.
Now your theme will be like this:
Now, before keep on apllying properties to or theme, we will start to codify the theme’s image we have made before. Remember that we had made the images elements of our layout and uploaded them at imgur. And remember I said to save them links ;)
Go to your theme page and search (click inside of the code box and type ctrl+f) for <body> Below it, paste this code. (I will put every code with quotation marks on pastebin, because when posted on tumblr, it use to change, and if change our code may not work)
Now, search for </body> and below of it paste this code.
Those are the tags that will allow us to codify our theme’s images into html.
Let’s get back on our </style> tag and above it, paste:
body{
background:#color of your background;
text-align:justify;
color:#color of your text;
font-size:size of the textpx;
font-family:name of the font if you want to;
}
.content{
background:url(your body url)repeat-y;
width:width of your image px;
margin:auto!important;
}
.header{
background:url(your header url)no-repeat center top;
width:width of your header image px;
height: height of your header image px;
margin:auto!important;
top:0!important
}
.all{
margin-top:-10px;
margin-left:px;
}
.footer{
width:the same width of your content imagepx;
border-bottom:14px solid #the same color of your solid background;
height:20px;
clear:both;
}
I put subtitles in every part of the code you need to change. So there’s no need to talk to much about this.
To know the width and height of your images (it is really important, don’t forget to edit this) just open the link in another tab and hover your mouse in the browser title:
Make sure all the widths of the images are the same number.
About the footer element, you can make an image for this, but if you will make a solid color background (without using patterns or images), just the border-bottom element is easy to edit. So you need to put the same color of your background as the color of the footer.
About the text-align, others properties you can use are: center, left and right.
In the element .all{ the margins are there to help you to move the theme area to fit the content and header sizes.
The font-family part, you need to search for a font that works on google. Go to google fonts and choose the one you like. After choose, click on quick use:
And you will find the code to make it work on html. You just need to copy the link and paste above <head>.
And paste this part:
where the subtitles said. Never forget to always close the tags.
Mine came out like this:
Never get discouraged when at first your theme came out a mess. You have to put effort to make it work and don’t will be right at first.
In the next post, we will learn how to add our sidebar and custimize the basic elements of our theme. See you later.
Creating themes with Pixlr #2 - Basic tumblr codes
In the last post, we knew how to create your layout (the group of images part of a theme). Now we will know the basic codes to creating a theme. (Just the codes, the coding and customization things will be on the next to better organization)
↳ Click here, copy and paste the code on your theme customization page. (if link or page doesn’t open, go to your dashboard, click on the icon menu and select edit appearance>edit theme. If there is a code (a default theme tumblr install when you create your tumblr), select all the code (ctrl+a) and paste (ctrl+v) my code instead.)
PLEASE NEVER REPOST THE CODE OR THE LINK ITSELF. JUST FOR THIS POST. YOU CAN REBLOG TOO, AND DON’T USE MY CODE TO CREATE OTHERS CODES OR BASES.
Now that you′ve pasted the code, your theme will appear something like this:
full size
Notice that all images and players of music or video (except the default audio post) will be centralized. This is because the tags <center> and </center> responsable to centralized elements. If you don’t want them to show like this, just delete the tags don’t forgetting to delete the close tag too.
In the code, the part you will need to customize is between <style> and </style>. This two important tags is responsable to make your css properties work. Make sure to always close your tags with } after your properties. It would be great if you have a little bit of knowledge about css and html. Is helpless if you want to try make a theme if you don’t know the basic of it. There’s a lot of helpfulls sites on web who teach begginers of how to deal with basics of css and html, it would be pretty good if you could check some basics tutorials before start to coding.
codecademy
w3schools.com
learn.shayhowe.com
htmldog.com
Those sites above will teach you the basics of html and css coding. I want to make clear that I don’t check any of them to really tell you if you will able to learn or not. So feel free to ask for yourself a site which you think will help you better.
By the way, in the next post, we will learn how and where to put a tag to make your css properties work on our theme. See you later.
Creating themes with Pixlr #1 - Creating the layout
Our first tutorial will be how create the layout with pixlr. When we work on Photoshop, we know this as psd. Is the file where you edit your images and create your theme and then cut them into a template/theme/layou part you need to create the html. (you will need a bit of knowledge of how edit images)
After choose all the images you will need, open pixlr. Click in file>new image. Creat one with 800x600 if you want only one sidebar (we will know how to make two sidebars themes ahead).
Now, open your images you want to create your theme and start to edit. Click in layer>open image as layer and select them one by one. With the free transform tool (in edit menu) you can adjuste your image as you want.
Now is about the time for you to use your creativity. You can use the curves (ctrl+m) to make your image more bright. Also you can use the levels (ctrl+l). Now is time to play with the editor’s tool. Feel free to edit as you want. Just don’t forget to manage well where will be the posts and where will be the sidebar.
Now we have to cut the theme in two parts (for this basic tutorial, we will make some more detailed tutorials ahead). Select the crop tool on the tools window and cut the header. You will need to cut it a bit after the header, so the posts will be together with the header. Save as png image and do the same after with the “body” of the theme. (ctlr+z to undo and to cut the “body”)
Save as png to mantain the original quality.
Now that we have our theme pieces, we need to upload the images so we can use them in our html code. Go to imgur, create an account and load the two images.
To get your image’s link/url you need to click the second link displayed after finished load the image and copy. Save all the links first in a notepad, so we can use later.
That’s all. We finished the theme creation and upload part and in the next post we will know the code to a functional theme and how to transform all those basics codes into a nice theme. See you later.
Hi! This is our first post on here and I have decided to tell more about how pixrl can be usefull as photoshop.
Firstly, is not everyone who can purchase the original version of PS, and those people who can’t, use to search for free versions out on internet. Some of these versions are good, but sometimes some aren’t. Those bad versions could danify your computer if there are virus, and this is not good.
Because I was having problem with my free version of Photoshop, I have decided to search for online editors, then I met Pixlr.
This online app has almost the same photoshop’s features and is usefull because is online and free. So since august of 2015 I’m using this online app and I can say that it is almost 90% the same features and tools I need to make edits and my things.
Thinking about those peoples like me who can’t purchase the original version or couldn’t find I really good free version, I decided to start a new blog with tips of how to use this editor.
Not only about pixlr, here we have some tips and help for theme makers or theme’s costructions and materials for editing or personal use. I will try to make bases for theme’s criation too, and If i have time, I will make and post some themes free then.
So now, let me show you guys the features and tools of Photoshop that pixlr can provide to you. I want to make it clear, that is the basic of Photoshop’s tools.
Interface:
full size
full size
About interface (layout), we have almost the same appearance. We have little windows with layers, navigation and main tools. In the top bar, are the main opitions, like open an image, save or apply effects to editing. Is basically the same. But! Pixlr has a bit adversiting in the right side of your screen. So you’ll need some extesion to remove it and you will work better. You can use the extension (for google chrome) by clicking here. Is free and is the same extension I use, so there’s no problem.
Pros
- There's no need instalation to start use pixlr editor, since it is online. And photoshop, as I said before, you need to purchase the original version if you don't want risks with virus or risk your computer by downloading some free version in internet.
- The same basic features (functions), adjustes, background removing tools, curves, it even can open psds (photoshop's file) and after, you can salve them in the pixlr's format.
- You can use images from web without needing save them and open it on the app after. Pixlr have a gallery/library, in which you can save the images you edited online.
- Although Photoshop sometimes take a little bit of time to initiate, Pixlr is fast and light.
- Pixlr has merge layers option and tools same as photoshop, usefull for designers who like to merge layers to create textures and elaborated editions.
Cons
- You can't edit with pixlr if you don't have access on internet (obviously). But, you can normally edit in it if you have opened before your connection have down, it just don't will open images by url.
- Brushes and pencils tools are relly heavy. Really heavy. If you want the app's features to make digital arts like drawings or fanarts, you will have some issue with that.
- Doesn't open nor edit gifs. But don't worry, there are many ways of edit or create gifs online successfully (i'm planning make some tutorials of how after).
- Sometimes, because it's online, the site (or server) can get down due maintenance or something like.
- Doesn't have actions options.
- Doesn't have selective colors opition, what is the thing that was really sad to me (the only thing I really regret to not use a photoshop). Is a tool really usefull for editors whom like to make pale or pastel edits. And not to mention was a really usefull tool to remove yellows from pictures (thing I hate).
- Alignment of layers hardly to deal on. Since photoshop has a tool to centralize layers just by a button click, to make the same with pixlr you'll need to copy and paste again, so it will be centralized automatically.
- Png images more heavy than normally.
By the way, if you don’t want to risk downloading some free version, Pixlr is really usefull and as I said above, has at least the basics tool you will need to make edits.
I hope I can help people as me, who can’t buy photoshop or have afraid of put anything in my computer, to editing in this app online. Just for begin, I want to excuse me for my bad english (feel free to correct me if I get some wrong word), and i want to say I will not put a big text everytime I post something This first big text is just for apresentation and for to explain better the similarities between. I will read again after and make some corrections. Photoshop and Pixlr. I want to make in english for more understanding and for peoples of different countries who want to learn tips to how editing for themselves.
If you want our basics tutorials in portuguese, please check Queen Designs. We will not update that blog, but all our tutorials will always be displaying there. Some of them, specially for tumblr tips, is not working anymore, but as we are updating in here, if I have free time, I will edit there. But there will not any news posts.
I want to thank everyone who will follow this blog in advance. Hope we can be friends and I hope I can really help everyone who found this blog.
theartofmadeline
kaledo-art
tangentwithtanner
janainaart