08/11/2015

Designing Websites With Inkscape | Tucson Labs

W O R K

R E A D I N G

A B O U T

C O N T A C T

DSIGNINGWSITSWITHINKSCAP
POSTDOND C M R 1 2 , 2 0 0 7 YJ O S H

Inkcapeiagreatprogramtohaveinourtooloxaawedeigner.ItimilartoAdoe
Illutrator,uttheuerinterfaceandtoolarelightldifferent.Italoanopenource
programreleaedundertheGPL,andiavailaleforWindow,OSX,andLinux.Thi
programcaneuedononitownwithouttheueofphotoeditingoftwarelikePhotohop
orGimptocreateprofeionalweite.Thitutorialwillwalkouthroughomeaic
techniqueforcreatingweitewithInkcapeuingthiveraiclogdeignaaguide.

DOCUMNTSTUP
OpenupanewdocumentinInkcapeandeditthedocumentizenavigatingtoFile
DocumentPropertieorjutpreCtrl+Shift+D.Thenchooethedimenionforour
weite,Illchooe960pixelwide2000pixelhigh,utoucanchooewhateverize
oudlike.

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

1/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

Awidthof960pixelipopularforwedeignecauemotpeopleintheUShavea
computerwithareolutionof1280800orgreater.However,thedimenionouchooe
totalldependonourtargetaudience(whichmanotetheUS).Youmaalowantto
conidermakingapecialtleheetforthegrowingnumerofpeopleacceingthewe
fromtheirmoilephone.

THLAYOUT
Thenextthingweneedtothinkaoutitheitelaout.Imgoingwithafairltandard
loglaoutwithaheaderection,anarticleection,aidear(whichIllcallaide)anda
footerection.YoullalonoticethatIdidntincludeanavigationection.Thatecaue
thiiteiafairlimplelogandIjutwantedtointegratethenavigationintotheidear.

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

2/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

CRATINGANXPORTLAYR
SinceInkcapedoentupportafunctionlikePhotohopailittoliceanimageinto
multiplepiece,wewillneedtocreateanexportlaer.TodothipreCTRL+SHIFT+N,
andnameournewlaerliceorexport.Thenringupthelaerpalletifitnot
alreadpreingCTRL+SHIFT+L.Clickonournewlaerandthenuingtherectangle
toolcreatetheectionofourweite.Youllwanttomakeurethatourrectanglehave
notrokeappliedandthatthereutteduptooneanotherawellaourdocument
order.Tomakethieaierturnonourgrid(SHIFT+3)andmakeurenapienaledin
ourdocumentpreference.Youcanactualldothiafteroudeigntheiteandoure
readtoexport,utwhnotjutgetitoutofthewa?Youcanaloavethiaatemplateto
tartallofourweitedeignwith.

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

3/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

GUIDS
NextoullwanttoelectandcopalloftheojectonthilaerpreingCTRL+Aand
thenCTRL+C.ThenturntheeojectintoguidepreingSHIFT+Gandthenpate
ourexportlaerackinplacepreingCTRL+ALT+V.Iliketoueguidewhen
deigning,utitnotarequirementanmean.Youcanturnguideonoroffpreing
thepipeke|.

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

4/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

DSIGN
ImgoingtotartwiththeheaderandIalreadhaveanideaforthecolor.Uingthe
rectangletooldrawarectanglethatfillourheader.

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

5/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

Thenwithourheaderrectangleelectedopenupthefillandtrokedialogoxpreing
CTRL+SHIFT+Fandelecttheradialgradienticon.Clickeditandadjutourtop
accordingl.Ivechoentouealightluecenterthatgentldarkenattheedge.

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

6/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

DuplicateourheaderackgroundimageelectingitandpreingCTRL+D.Thenmake
thewidthofthiduplicateoject40pixelmaller.Youcandothiquicklturningonthe
griduingthe#keanduingtheelecttool.Youmaalowanttocreatenewguidetoue
lateron,utitnotnecearforthideign.

THDROPSHADOW
Thinexttepwilletocreatethedrophadow,whichoucandoeailinverion.47of
Inkcapeuingfilter,utin.46itaitmoreinvolvedothiquickandeamethodwill
do.Youregoingtoduplicatetheheaderetagain(eagain)andgiveitafilloflackanda
lurof3.0.Thenmovethidocumentelowtheheaderoucreatedpriortothione
preingPageDown.Thiwillgiveouthedrophadowthatwereafter.

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

7/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

THODY
Nextupweregoingtocreatetheodforourweite.Duplicateourheaderjutonemore
time(Ipromiethiithelattime)andgiveitafillofolidwhite.Thenwiththeelection
toolgrathetopcenterarrowanddragithalfwadownthepage.Thiwaourodwille
fluhwiththeheader.Nowcclethroughourojectuingthetakeandelectourdrop
hadow.Withthedrophadowelectedgratheottomarrowanddragituntiloucanee
iteneathouweiteod.

Nowthiicloe,utnotquitetheeffectthatImlookingfor.Togetitjutrightringupthe
fillandtrokedialogandclickonthelineargradienticon.Uingthenodetool(orthe
gradienttool)givethehadowaverticalgradientthatfadeoutlightlelowtheheader.
https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

8/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

THLOGO
Atthipointouregoingtowanttolockourackgroundlaerinplaceandcreateanew
laerforourlogo.Agoodnameforthilaerwouldeomethinglikelogoorranding.
Now,Imgoingtogooverhowtodrawalogo,ooulleitherwanttodrawoneonthilaer
orimportourexitinglogo.ToimportanimagepreCTRL+IandnavigatetoourSVGor
itmapfile.Ifouimportaitmap,electtheojectandthenpreCTRL+Atoconvertthe
ojecttoapattern.Thiwillallowoutoavethefilewithoutlooingtheitmap,andou
canedittheimageaanSVGoject.

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

9/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

MAINCONTNT
Nowthewecanmoveintocreatingthemaincontentection.Imjutgoingtoeuingplain
textforthemaincontentandheadlinewithoutanotherackgroundimageeidethe
onewevealreadcreated.So,thefollowingwontactualleuedinthecreationofthe
ite,utitjuttogiveouanideaforhowouwantthetpographetuporifouneedto
howaclienthowtheitewilllookeforecodingitout.
Totartlockourlogolaerandthencreateanewlaernamedcontent.Thenwhipout
thetexttoolandtarttping.FortunatelInkcapehaauiltinloremipumfunctionthat
willautomaticallinputdummtextforou.Thiianextremeluefulfunctionthatcan
eaileacceedthroughxtenionTextLoremIpum.Jutchooeourettingand
prethegenerateutton.

Youhouldnowhaveomethinglookingliketheimageaove.YoumighthavenoticeIadded
aunurtpatterntotheheader.Ifouwanttoreaduponhowtomakethateffect,Ive
writtenatutorialaoutithere.

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

10/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

FINISHINGUPATCHXPORTS
Allwehavetodonowiexportourimage.Weregoingtotartexportingtheackground
image,ooullwanttohidealllaerexcepttheackgroundandexportlaer.

Thenouregoingtoelecttheheaderexportlaerandringuptheexportdialog
preingCTRL+SHIFT+.Nextmakeuretheelectiontaipreedothatonlthe
headeriexportedandthenelectwhereoudliketoexporttheimageto.Itagoodideato
createanimagefoldertokeepeverthinginoneplace.Forthiexamplethough,Imjut
goingtoeexportingtomdektop.

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

11/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

Repeatthitepfortheod.

Nowouregoingtoelectall(CTRL+A),andthenhidethelaer.Withtheojecttill
elected,ringuptheexportdialogandelectatchexport.

Nowourheaderandmainackgroundwilleexported.Thihouldgiveouanideafor
howtheatchexporttoolwork.AndhowouwoulduildtheretYoullneedtocreatean
exportojectforourlogoawell.

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

12/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

TAGGD D S I G N , I N K S C A P , O P N S O U R C , U X , W D S I G N

42THOUGHTSONDSIGNINGWSITSWITHINKSCAP

L I N U X G H O S T

SPTMR20,2008AT6:47PM

TheaovePageiundercontruction!
Goodtutorial,congratulation.
Quetion:ItlackingtheexportationtoHTML/CSSxplanation!
ImnooinWeDeignandwouldliketouildaprofeionalWeitethatwhim
learningWedeigning(Inkcape,GIMP)andProgramation(html,php,c,mql).
mailmeifucanecauedontknowifiwillcheckourpothereaoon.
etwihe.

DANSK

FRUARY8,2009AT8:04AM

Cooltutorial,utcouldalodowithomemoreonexportingforwe.
IrealllikethelookofinkcapeandwouldlovetoueitmoreforwedeignutIm
findingtheexportoptioniprettlimited.Itonleemtodopngandanthingwith
curvejutlook,wellad.
cheer

J O S H

FRUARY8,2009AT9:28AM

@Dank
Imgladoulikedthetutorial,andIagreewithouaouttheexportproceforthewe.
Iveeenmeaningtotouchthiarticleupanddoaetterjoofillutratinghowoucan
uetheatchexporttoolpecificallforwedeign.Ifoureinteretedingettingwereadgif,ouhouldcheckoutImageMagick.Itapowerfultoolthatcaneuedto
convertpngimagetogif,andoucanintallitonOSX,Linux,orWindow.Whenouget
itintalled,navigatetothefolderwhereoureexportingourpngimageandtpe:
mogrif-formatgif*.png
Thiwillquicklcreategifimagefromourpngfileanddeletenothingintheproce.
Afaraourprolemwithcurve,Ihaventreallnoticedthat.However,Ihavenoticed
thelackofupportforfonthinting,whichwouldereallprolematicforpeopleuing
Inkcapeatheironltooltocreatewepageimage.

SCLOUD
https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

DCMR31,2009AT5:42AM
13/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

Hi
HowdoouuethePNGexportedtouildaweite?Igifacceptedoftwarelike
dreamweavertouildtemplate?idontuedreamweaverutNVUandamaNewie
Nicetutorialthough

J O H N H U N T

JANUARY13,2010AT11:49PM

Supertutorial,jutwhatIwalookingfor!

MIK

APRIL4,2010AT12:58PM

thankforputtingthiuptogetherwadefinitelhelpful!

JOSH

APRIL4,2010AT5:28PM

@cloud
uildingtheweitewiththePNGimagewouldeanothertutorialinitelfandi
omethingthatonmtodolit.IdonteewhouwouldntealetouePNGimage
withNVUorDreamweaver.GIFiaitlargerthanPNGanditdoentupportalpha
tranparencoIuualluePNG.IfouwanttoconvertourPNGtoGIFIrecommend
uingGIMP,Photohop,orImageMagic(thelitcouldgoonandon).

J O H N R

MAY6,2010AT2:25PM

Nicetutorial,
Ieeiteenaroundforawhile,utveruefulforthoefolkwhoarenewtoInkcape
andmiotherapplicationailttoexportlaer.
InthepatIveuedthexportSliceplugin(http://panela.logcit.com/licing_we_page_with_inkcape_and_pthon.htm)whichhaworkedatreat.
Itdidntoccurtometotrandjutdoaelectall!
Onethingthatiomittedthough:HowdooucopewiththeiueofInkcapeuingupixelvectortopreventlineandtextlurring?Ivereadafewwatomanagethiand
jutwonderedwhatourtakei.
https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

14/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

ADMIN

MAY6,2010AT3:08PM

Iwantawareofthatexportliceplugin,utitoundnice.Aforthelurringiueofthe
textthereintaolutiontothatandthedeveloperarentplanningtoimplementonea
faraIknow.However,ifouwantnicecriporderforimageallouneedtodoimake
uretherelinedupcorrectleforeouexportthem.Whenouelectanojectora
path,takenoteofthewidthandheightlocatedonthetoolcontrolar.Theenumer
houldewholeifouhavenotroke(i.e.,Y=3.000andnotY=3.324)andifouhavea
1pixeltrokethehouldeomethinglikeY=1.5or32.5.

SLIDR

JUN17,2010AT1:27AM

Sorr,utIcantgetthitowork.
UptothepointTheDropShadownorealpro,utwhenitgettoTheod,itdoen
tworkforme.Callmetupid,utItriedeveraltimeandIcantgetittoworkinthewa
intended.ImanInkcapeNewie.IuedCorelDrawn9foreveralearandnowI
wantedtotrInkcape.Motofthehortcutdontworkformeto.:(
CouldouoromeodelepleaepotanlinktodownloadtheendreultaSVG?
ItwouldeverniceandperhapithelpmeundertandingInkcapealittlemore.
Thankandrepectforournicetutorial.

S A M M Y D L L I C O U R

JULY4,2010AT11:22AM

Thankouforthiarticle.Iepecialllikedthetricktoelectthecroparea,thenhidethe
laer,efore(atch)exporting.Iuedtoettheopacitto0foranarea,export,etitack
tonormaletc.
IfindpngfileexportedInkcapequite*heav*,comparedtogiforjpg.SoeitherIue
atooltooptimizethepng(pngcruhand/oroptipng,othaanautiluaction),ora
Nautilucripttoconvertpngimagetojpg(againwitharight-clickinNautilu,noneedto
opengimporaconole).
Nautiluaction/extenion/criptare*o*uefultopeeduptheworkflow(another
example:needtoatchrenameimagefile?IntallThunarandthecorrepondingNautilu
action.)OneofthereaonwhIliketoworkonLinux
(pforLinuxnewie:NautiluithedefaultfilemanagerinLinuxUuntu.)
Greeting

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

15/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

Pingack:Coleccindewidgetparalacreacindewireframeeninkcape|
curorlire.com

Pingack:Howtodeigntemplate

Pingack:DeigningWeiteWithInkcape|ookmarkaldolat

J A S O N S I M A N K

MARCH11,2011AT10:16PM

InkcapepracticeofexportingtoPNGimartforafewimportantreaon.Thereeem
toeomeconfuionaoutPNGandwhetherornotitcaneueddirectlforweite.
Hereafewofthecommentthatcaughtmee:
1Imfindingtheexportoptioniprettlimited.Itonleemtodopngandanthingwith
curvejutlook,wellad.
2HowdoouuethePNGexportedtouildaweite?
3GIFiaitlargerthanPNGanditdoentupportalphatranparencoIuuallue
PNG.
4IfindpngfileexportedInkcapequite*heav*,comparedtogiforjpg.
Somehelpfulinfo:
1ThePNGformathanothingtodowithourcurvelookingad.Thatprolemimot
likelduetotoolowofreolution.Inthexportitmapdialogwindowcheckthepixel
atXXdpivalue.Forweiteimageithoulde90,ince90ppiithegeneralaumed
computerdiplareolution.Forprintinggraphic,300or600dpiiwhatouneed
dependingonhowprecieourprintingdevicei.
2JutlikeaJPGorGIFviaaURL.
3PNGhaalotincommonwithGIFintermofimagecompreionalgorithm.Inthatwa
imagemadeupofflatandlimitedcolorcompreverwell,makingrelativelmall
fileizeinthePNGformat.ItactuallmoreefficientthanGIF(aJohuggeted).
Withimageoftonalcomplexitmoreakintophotograph,PNGwillreultinrelativel
largefileize,epeciallincompariontoJPG.HOWVR,keepinmindthatPNGuea
LOSSLSSalgorithmforimagecompreion.Itavefileizewithoutloingimagedata.
JPGueaLOSSYalgorithm.Inordertominimizefileizeitthrowoutimagedata.Soif
imagequalitiourultimateconcern,PNGivergood.

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

16/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

Undertandingtheetwoextremeofimagetpemakeiteatouetheappropriate
imagefileformat.aicall,GIFinearlooleteutforimpleanimatedGIF.Animated
PNGfile(APNG)arenotwidelupportedweroweret.PNGhatheuperior
compreionawellaalpha-leveltranparenc.GIFonlupportinartranparenc.
4MotlikelthePNGfileexportedInkcapeareonthehigh-endofthequalit
pectrum(24-it).OpeningtheePNGfileinGimporomethingimilarandoptimizing
themforthewe(poil8-itPNG)willeneeded.And,adecriedaove,ifthe
imageinquetionhavealotoftonalvariationlikephotograph,theeimagewoulde
etaoptimizedJPGfile.
Furtherreading:
JPG
http://en.wikipedia.org/wiki/JPG
PNG
http://en.wikipedia.org/wiki/PNG

J A S O N S I M A N K

MARCH11,2011AT10:22PM

Sorr,IoverlookedthattheaovePNGwikipedialinkitoadiamiguationpage.Here
thePNGimagefileformatlink:
http://en.wikipedia.org/wiki/Portale_Network_Graphic

TNDOLLARADVRTISING

MARCH12,2011AT12:50PM

Thank!IwaneveruedInkcape,utiwilltritafterourpot.Tillnowiwauingonl
PhotohopCS5andDreamweavertodeignmwetemplate

V I C T O R M O R A L S

MARCH26,2011AT9:00PM

xcelentetutorial,olohaqueeguirlopaoaldedilloepoileconeguirun
reultadoprofeional,graciaqueDiotecontineendiciendo!

G A R Y

APRIL23,2011AT2:14AM

Imfairlnewtoinkcapeutplantoueitextenivelinaforthcomingweproject,ono
doutthiwalk-throughhallavemealotofheadcratching.
https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

17/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

ManthankJohandvarioucommentatorforharingourtimeandknowledge.Some
vergoodpointerandlinkhere.:)

Pingack:Segnalirial27aprile2011|Uuntulocknote

IWAN

MAY5,2011AT5:29AM

Thankmate,greattut.

Pingack:TutorielInkcapepourcreretdcouperundeignwehtml|Kicoe.net
-Lelog

Pingack:Quora

W I L L I A M

JULY10,2011AT7:03AM

Inkcapenowupportlicing,right?Sothereinoneedtocreateanexportlaerthen,
andcanwekipthattep.

Pingack:Pelangi

JOSH

SPTMR12,2011AT10:07PM

YeInkcapehaalicingplugin,utIhaventuedit.Idojutaoutallofmdeignin
therowernowda.
https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

18/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

PDRO

NOVMR9,2011AT8:17AM

Goodtutorial.
Theonetepmiingihowtogofromtheexportedpngtoafinalweite.While
acknowledgingomeonecommentthatthiiawholenewtutorialinitelf,tillome
programorlinkthatcouldeuedaacontinuationofthipotcouldementioned.

M I C H A L W I L L I A M S

NOVMR9,2011AT8:39PM

He,greattutorial,IwawonderinghowtoaemleheeliceinanHTMLdocument,or,
ifthereiomeotherwa,howtodothat.Iwouldloveitifoucouldemailmeandhelp
meout.Thank!

D A N I L

MARCH9,2012AT1:38PM

ThiimoreorlequiteimilartothetechniqueIuedwhenIcreatedmfirtweite
formwedevelopmentcla.Itquiteover-killinmanwa,utitwaallexperimental
tomeandnotwhatIwouldactualldoinapracticalene.
http://www.wedevtudent.net/dhauck/tcc/<thiitheite
Othercommentak"howdoeitecomeHTML?"That'theiggetprolem.ForthatI
wouldliketouggetgoingthougheitherawedevelopmentclaorfindingagood"how
tocreateaweite"uingHTML4orxhtml1.0.Thehortofitithatouneedtolearn
howtoueDIVandCSStoperformthelaoutofimage.It'pretteatoeethatItuck
withmroundedcornerandpaceetweenelementandallthat.utouwillaloee
thatItackedthingontopofotherthinguingtranparenctocompoitetheweite.
Thiinotquitetheetwatodothinguttheexerciedemontratealotofhowto
manipulatethingwithDIVwhichwathepurpoeofwhatIwauilding.Thereiaitof
Javacriptinthereandit'allhand-codedaIorrowedverlittlefromotherite.
To"complete"thitutorialwouldrequirehugeamountoftimeandefforthowinghowto
createactualHTML.It'importanttoknowthatInkcapeiexcellentforlaoutanddeign.
Thereino"exporttoHTML"alonghot.Youhavetoealetoexporttheindividual
elementandthenpullthemintoourHTML/CSSlaouthandorwithaprogramlike
Dreamweaver.(Itrieduingdreamweaver,utthetackingofelementecameunwieldl
afterawhileetteroffjutcodinghandandrefrehingtherowertoeehowit
look.)
Interetinglenough,though,moreandmorewerowercanrenderSVGgraphic
nativel.Youdon'thavetoexportourwepagegraphicalelementaitmapifou
https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

19/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

don'twanttoandtoheckwithMSI6and7.MSI8canviewSVGimageandthecan
eRALLYmall.AnwathoughtI'daddtothedicuionwithmownueofthe
techniquedemontratedaove.Iinvitethecurioutotakeitapartandlearnfromit.Ihope
omeonefinditueful.

Z A F A R

APRIL10,2012AT5:52AM

niceanduefultutorialforweitedeigningthxfriend

LOUARNOLD

JUN12,2012AT5:12PM

SeemaitlackinginintructionepeciallforomeonenewtoInkcape.Rememer
thatthitutorialmaeuedomeonewhoneedtodecidewhethertoueInkcape
ornot.ThiwafirttimewithInkcapeanditwaimpoiletoaccomplihomething.
exportaalaername,vlice.Waagradientanddrophadowreallnecear?
Whchooe2000pixelathepageheight?Itdoentlookatallliketheexampleinthe
tutorial.

AROS

SPTMR10,2012AT1:26PM

HowdoouuethecodetoimplinertitintoHTML,foramagazineorook-likeweite
forexample?LikethelatoptionfromthipagemedSVGcodedirectlintotheHTML:
http://www.w3chool.com/vg/vg_inhtml.ap

AROS

SPTMR10,2012AT3:57PM

Figureditout.
File->SaveA->*PlainSVGformat*->Open.vgfilewithtexteditor->cop&pate
everthinginHTML/OR/rename.vgfiletoindex.htmlandupload.
SavinginPlainSVGformatwatheiue.

P H I L
https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

OCTOR20,2012AT3:28AM

20/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

lovethetutorial,utthelinkfortheunurttextiroken.Ihopethattutorialtillexit
omewhere?

IRAHIM

JANUARY3,2013AT2:54PM

Attartitlookniceutthetutorialioruh!Firtweaddalaernamedlice,then
onnextimageouvegottwolaer:liceandackgroundandthenaouexplain
howtomakedrophadow,oualreadhaveliceLogoackgroundandcontent
alaerwithouttellingutoaddthoeandhowhouldwedoit..Ithardtofollow

MAHDI

JANUARY15,2013AT3:09AM

Thankforthitutorial,helpful!<3

DIMA

FRUARY27,2013AT9:42AM

Thankforthetutorial,itgreat.Iwawondering:inceallwecreatewithinkcapei
.vg,cantweuethemavgtraightawa?Andthatwathewillkeepthecriplookno
matterhowcloewezoom.

JOSH

FRUARY27,2013AT10:46AM

Yourewelcome!Yeoucanuethemtraightawa(Iwrotethiarticleafewearago),
utoutillneedtoconiderolderrowerandprovidePNGfallackifnecear.You
caneecurrentrowerupporthere:http://caniue.com/vg-img

OPNSOURC

APRIL25,2013AT1:19AM

Iitpoiletomakedpiinto72?Itriedplaingitutitcreate90dpi.

JOSH
https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

APRIL25,2013AT9:16AM

21/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

YeoucanchangetheDPIettingwhenouexporttheimage,utitwillchangethe
documentizeawell.

A D M A L S A S A A K A R

MAY16,2013AT11:31AM

Cool!Sameame:thiiwhatIearchedforlongtime.WhatIneedinInkcapewe
mockupcreating.
Thankouwhoevercreatedthitutorial.

M K H U D A

MAY17,2013AT12:35PM

ihaveeenuinglicewemethodwithinkcape.maeicanimprovingitmkill!:)

LAVARPLY
Youremailaddrewillnotepulihed.Requiredfieldaremarked*

Name*

mail*

Weite

Comment

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

22/23

08/11/2015

Designing Websites With Inkscape | Tucson Labs

POSTCOMMNT

Copright2006-2015|TuconLaLLC

https://tucsonlabs.com/2007/12/12/creating-websites-with-inkscape/

23/23