2

Svg Grid Highlight With Inkscape


9 replies to this topic

#1 RobJM

RobJM

    Nokia Theme Support

  • Admin
  • 5,682 posts
  • Gender:Male
  • Location:UK

Posted 30 June 2009 - 06:04 PM

I was asked how to make an element in Inkscape, one that I had done in Illustrator.
I don't really use Inkscape so bare with me, the element in question was this one [or similar at least].
Just a border with a transparent window.
Posted Image

Open Inkscape and go to File/Document Properties and in the Properties window set the size of your document, I chose 70*70 for this element.

Posted Image Posted Image

Next go to View/Zoom/Page to fill the window with your document, also go to Object/Fill and Stroke, to bring up that settings box.

Now select the square shape tool, in the fill and stroke settings under stroke style, change the width to zero,if it isn't already [inkscape seems to save and use your previous settings,so these may all be different on your PC].
Draw your shape by clicking and dragging to the size required, if you want rounded edges, there are two boxes labelled Rx & Ry ,you can input two of the same numbers in here to give an even curve, there is also round slider options on the top right corner of your shape, you can move these to set the curve as well.
Set the colour of your shape[this will be the border colour] with the colour slider along the bottom or in the fill tab in the fill and stroke settings box.I set it to black.
Attached File  05square_copy.gif   131.13K   34 downloads

Once your happy with the size and shape make sure it is selected [go to edit/select all]
then go to Edit/Copy then Edit/Paste in Place, this pastes a copy on top of your existing shape, change the colour of it to something different,any it doesn't matter so long as it's not the same, I chose red.
Posted Image

Next go to Object/Transform
Posted Image

A Transform box will come up next to where the Fill and Stroke box is, I changed these settings to width and height 90% ,under the Scale Tab,and pressed apply, you should now have the screen below.
Attached File  08scale.gif   79.48K   15 downloads
Could be used here as a simple highlight, there are also gradient settings etc in the Fill options.

Now to make the centre transparent.
Go to Edit/Select All then Path/Combine.
Posted Image Posted Image

This will remove the red inner square and also the same shape from the black square underneath.
You should now be left with this..
Posted Image
That centre is transparent, so you could use that as it is if you wanted just a 'frame effect'

To give it a transparent colour, select the fill tool and click in the centre of your square, it should fill with your last chosen colour, you can change this using the same method as before.
Now when I did this there was a slight gap between the 'frame' and the fill, just simply drag the edges over at each side until it covers, don't worry about it overlapping your border, just go to Object/Lower to Bottom, to send that layer behind your border.
To make it transparent, go back over to your Fill and Stroke settings, and, with just your centre layer selected, you can change the opacity by using the slider.
Attached File  12fill_copy.gif   136.9K   22 downloads

Of course you can use the same method for any element, just change the sizes, and also the colours can be changed in carbide so you can reuse them in different themes with different colours.

Attached Files



#2 elegantmavi

elegantmavi

    MAvi

  • Theme Maker
  • 827 posts
  • Gender:Female
  • Location:Heaven

Posted 30 June 2009 - 06:48 PM

Thank you so much Rob
I wil try making highlights with the help of this tutorial
If i get any difficulty wil drop in again to eat ur head :(
Again many many thanks for the tutorial :(

#3 RobJM

RobJM

    Nokia Theme Support

  • Admin
  • 5,682 posts
  • Gender:Male
  • Location:UK

Posted 30 June 2009 - 06:52 PM

View Postelegantmavi, on Jun 30 2009, 07:48 PM, said:

Thank you so much Rob
I wil try making highlights with the help of this tutorial
If i get any difficulty wil drop in again to eat ur head :P
Again many many thanks for the tutorial :(


:( Well, that's something that must mean something else where you are :teehee:

#4 elegantmavi

elegantmavi

    MAvi

  • Theme Maker
  • 827 posts
  • Gender:Female
  • Location:Heaven

Posted 30 June 2009 - 09:17 PM

View PostRobJM, on Jun 30 2009, 07:52 PM, said:

:( Well, that's something that must mean something else where you are :teehee:


:(

#5 IMSAGI

IMSAGI

    Member

  • Nokia Themer
  • 323 posts
  • Gender:Female

Posted 02 December 2010 - 01:52 AM

thank you

#6 sagar12345

sagar12345

    Member

  • Member
  • 364 posts
  • Gender:Male
  • Location:mumbai , india
  • Applications of choice:carbide ui , audacity , adobe ps , Inkscape much more !

Posted 26 December 2011 - 10:03 AM

ohh thanks rob

#7 Nadia24

Nadia24

    Member

  • Nokia Themer
  • 181 posts
  • Gender:Female
  • Location:Iran

Posted 09 March 2012 - 09:25 PM

i will try , thanks for help dear rob:wub:

#8 azqial93

azqial93

    Member

  • Member
  • 12 posts

Posted 16 April 2012 - 03:12 AM

please help, i'm a newbie :)

why not choice the single element on a grid highlight and list highlight?
but every i found a theme, thats the nine element?
What a difference?

Sorry, my english, ist so bad.
:D

tq

Edited by azqial93, 16 April 2012 - 03:16 AM.


#9 RobJM

RobJM

    Nokia Theme Support

  • Admin
  • 5,682 posts
  • Gender:Male
  • Location:UK

Posted 16 April 2012 - 01:57 PM

Nine parts can be used for different sizes and shapes (squares or rectangles) without getting distorted.

It uses the 4 corners as fixed shapes, then stretches the 4 sides and centre to fit.

You can use single if you want, but if the same file is used somewhere else in the theme, and it's a different size, it may get distorted.

Would not be needed if Carbide didn't share some elements and all could be individually made.

#10 azqial93

azqial93

    Member

  • Member
  • 12 posts

Posted 16 April 2012 - 06:14 PM

ow. Yeah, i understand it! :)
thanks rob.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users