Jump to content

How To Create A website header graphic


Recommended Posts

Hi everyone

I'm completely new to Paint.net and Ive read thru some of the tutorials but can't get the hang of it.

Can someone give me a heads up how to create a header graphic from scratch for a website .

I want it 770 pixels wide and 140 deep and I have two small graphics to lay on each end of the header and then write some text in between these.

Many Thanks

Cheers

Brett

Link to comment
Share on other sites

Could you please edit you topic title to include the phrase 'How to' just to make it easily identified for future use. Thank you :D.

------------------------------------------------

1) Open Paint.NET then navigate to Image > Canvas Size, set your size in the relevant boxes.

2) On a new layer (Layers > Add New Layer) import or paste the graphic onto the canvas and move to your desired position using the Move Pixels Tool ( :MoveTool: ).

3) Copy that graphic and repeat the steps for the other side. You may stay on the same layer or create a new one, that is your choice. Again the Move Pixels Tool will come in handy combined with the Selection Tools ( :RectangleSelectTool: :LassoTool: :EllipseSelectTool: ).

4) On another new layer (so it will be easier to edit later on if needed) use the Text Tool ( :TextTool: ) and your preferred font and size - selected from the top row underneath File, Edit, etc. - then type your text. You will notice a small four-sided arrow nub to the bottom right of your text, you may use this to move the text whilst it is still active; once you finalise the text by striking the Esc. key on your keyboard that will disappear and you you will have select the text manually (using the :RectangleSelectTool: tool) and move it, much like you did with the side graphics.

5) Flatten (Image > Flatten) if you want your file to be all one layer, although it is advisable to save one version as a layered .pdn file - which will be default when saving - and a flattened version for upload on a website, to send to friends, or post here in the forums. The .png file format is quite popular. If you are unsure about the saving process then take a look at my tutorial which is listed in my signature under 'How to save your images under different file types'.

------------------------------------------------

Between steps 1) and 2) you may create a custom background or copy and paste from elsewhere - the tutorials will be handy here is you have an intended look in mind. These steps leave room for adaptation and adjustments and are only guidelines to achieve the basic look.

Does this help?

Link to comment
Share on other sites

Hi Myrddin

Thanks for helping me out.

I followed ur comments and all went well until I created a new layer and selected the text tool. When I click the cursor in the area I want the text and start to type no text shows up. The cursor moves with each keystroke but no text! Only thing I can think of is that it is typing in white color but I see no color controls at the top near the font style box etc to select colors?

What do you think?

Many Thanks

Brett :D

Link to comment
Share on other sites

Did you have a selection active at the time? If one was active then nothing outside of that will show or cause effect. Simple press the Esc. key or Edit > Deselect to deactivate the selection and all should be well.

The Colour wheel is located at the bottom left of the screen (if not present: Window > Colours, or Reset Window Locations) of which the Primary colour will affect the the colour of your text.

Link to comment
Share on other sites

sorry- I dont know what you mean.

After I imported the second graphic and moved it to the right side of the banner, I then clicked new layer, then text tool (A) and placed my cursor in between the two graphics and nothing shows as I type? I tried like 10 times already?

P.S How do I edit the topic title?

Cheers

:D

Link to comment
Share on other sites

Beaten by you spike 121 :P.

Yes, you may still have a selection active around that object, it will be a flashing dotted border. If that selection is still there then nothing outside of it will show, including text. If in doubt Edit > Deselect anyway then try again (or as spike has just suggested, Ctrl + D).

As for topic title, there will be an Edit button in the bottom left of your first post, click and change. Thanks for taking the time to do so :D.

Link to comment
Share on other sites

I just got it- sorry I should have thought longer about what you wrote.

Now, is it possible with paint to make the text (i.e. the words "nutritional-supplement-truths:) look like the text in the attached graphic above (which was done on ACDSee software)?

Many Thanks

9575_451169fa559ca9da558b75ce8c3294fe

Link to comment
Share on other sites

You will need two layers for this, or maybe three for further detail.

First layer) A semi light colour for your text, position as needed.

Second layer) To keep it simple, add a new layer and move it down below the first ( :Down: ) then retype the text but this time with a much darker shade of colour. Position this slightly to the side of the first layer but directly below the text; see how it gives the text depth?

Third layer) Above all other layers and with a nearly white colour, type out the text again and position slightly to the side this time, though, to the opposite side of the darker shade. So if your darker layer is to the right, this lighter one should go to the left. Double click on this lighter layer and reduce the opacity (the slider) to around 200, although experiment and see what works best.

------------------------------------------------

Again, only a basic outline, with a few extra steps or adjustments you can go even further with what you have. Also, if you do not wish to retype each time then simply duplicate the first layer with text (Layers > Duplicate Layer) and apply Curves to adjust the tone of the colour. Curves can be found in the Adjustments menu and you'll want to use the Luminosity mode found in the drop-down in the upper right of the dialog.

Link to comment
Share on other sites

Not a problem, so please don't hesitate to ask if you fall under any more difficulties. I won't be here until tomorrow now but others will be around to solve any problems if you have any.

And no, I'm not in the US, I'm from England and it's actually quite late now at 2:15 in the morning; very tired indeed.

Thank you for the change in topic title, your thread is safe from closure :D.

Link to comment
Share on other sites

you should just get the size find a pic and give it some text

I don't understand what you're saying. Punctuation might help... :-) But honestly, what do you mean by this?

 

The Doctor: There was a goblin, or a trickster, or a warrior... A nameless, terrible thing, soaked in the blood of a billion galaxies. The most feared being in all the cosmos. And nothing could stop it, or hold it, or reason with it. One day it would just drop out of the sky and tear down your world.
Amy: But how did it end up in there?
The Doctor: You know fairy tales. A good wizard tricked it.
River Song: I hate good wizards in fairy tales; they always turn out to be him.

Link to comment
Share on other sites

...I thought that's what everyone else just said...

 

The Doctor: There was a goblin, or a trickster, or a warrior... A nameless, terrible thing, soaked in the blood of a billion galaxies. The most feared being in all the cosmos. And nothing could stop it, or hold it, or reason with it. One day it would just drop out of the sky and tear down your world.
Amy: But how did it end up in there?
The Doctor: You know fairy tales. A good wizard tricked it.
River Song: I hate good wizards in fairy tales; they always turn out to be him.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...