За да се направят диагонални линии (seamless diagonal line pattern) за фон на html страница или за wallpaper понякога изисква малко математика или просто практика. Ще се опитам да покажа най-простичкия начин за правене на такива линии, който често използвам. За целта ще използвам чудесната OpenSource програма Inkscape.
В Inkscape си правим линиите, които искаме да искаме да получим:
Маркираме с плъзгане на мишката всички линии, натискаме Ctrl, за да получим възможност за въртене на обектите:
Отново натискаме Crtl и завъртаме с мишката на 45°:
С инструмента Rectangle изчертаваме един квадрат. За да се получи точен квадрат при чертането, задръжте Ctrl когато плъзгате мишката. Правим квадрата леко прозрачен, за да видим къде се намираме, спрямо диагоналните линии:
Сега нагласяме квадрата така, че ъглите на квадрата да обхванат максимално точно линиите, които са показани по-долу:
и долу в дясно по същия начин:
Сега трябва да разкараме квдрата на най-долния слой, за да не се вижда:
Почти готови сме с Background-а, само трябва да го експортваме. Докато е селектиран квадрата (който не се вижда) избираме File -> Export Bitmap:
Ако случайно кликнете някъде и квадрата се деселктира, тогава натиснете Alt и кликайте с мишката там където знаете, че е квадрата, докато не се селектира отново.
Много е важно да обърнете внимание на настройките: 75dpi и Selection. Експортираме и си имаме един много тарикатски фон за web-страница:
Примерна страница, в която може да се види как изглежда бекграунда: Background diagonal lines – example
Inkscape файла може да се изтегли от тук: Inkscape seamless diagonal background
Кратко флаш видео, което показва как точно се правят диагоналните линии:
[flv:https://blog.nediko.info/examples/diagonal_lines/Diagonal_lines.flv https://blog.nediko.info/examples/diagonal_lines/diagonal_lines_10.jpg 504 388]
Файловете от видеото могат да се изтеглят от тук: Inkscape-seamless-diagonal-lines.rar