Как сделать таблицу в Adobe Illustrator

Существует два известных мне способа создания таблиц в программе Adobe Illustrator. Рассмотрим оба способа.

Самый лучший способ – при помощи инструмента “Прямоугольная сетка” (Rectangular Grid Tool). Таблицу, созданную при помощи этого инструмента гораздо проще редактировать, чем созданную при помощи команд “Объект-Контур-Создать сетку“, так как в случае Прямоугольной сетки мы оперируем линиями, а во втором случае таблица представляет собой набор прямоугольников, каждый из которых имеет свой контур и заливку.

Создаем  таблицу при помощи инструмента “Прямоугольная сетка” – Rectangular Grid Tool.

Что бы создать не произвольную сетку, а с необходимыми параметрами – дважды кликните по иконке инструмента “Прямоугольная сетка”.

При способе создания таблицы в Adobe Illustrator при помощи  инструмента Прямоугольная  сетка выделяется и редактируется сразу вся линия целиком. Но есть и минус – если нужно часть ячеек окрасить в какой-нибудь цвет, придется изрядно помучиться.

Создание таблицы в Adobe Illustrator при помощи команды “Создать сетку”. 

При втором способе вначале  нужно создать прямоугольник, а потом при помощи команды “Объект-Контур-Создать сетку (Object – Path – Split Into Grid) создать сетку с необходимым количеством ячеек. Параметр “Средник” (Gutter)  задает расстояние между строками и столбцами.

Rows -ряды, Columns – колонки, Gutter – средник

Редактировать прийдется каждую ячейку отдельно, что не очень удобно, на мой взгляд, если нужно делать не стандартную таблицу. С другой стороны при этом способе легко перекрашивать ячейки в разные цвета.

Зато этот способ позволяет получить быстро и легко набор одинаковых прямоугольников.

Можно еще просто скопировать таблицу из Word и вставить в документ Adobe Illustrator. Иллюстратор преобразует табличку из Ворда в огромное множество заливок, с которыми будет сложно работать.

Если у вас большие сложные таблицы – то быстрее и проще всего сделать их в InDesign – туда они без проблем копируются из Word. А затем сохранять их в pdf и импортировать в Illustrator.

Youtube

Моему каналу на ютубе уже девять месяцев, а у меня по-прежнему 31 подписчик. Каждое видео сходу набирает примерно 15 просмотров. Это особенно удручает, когда встречается видео, выложенное четыре дня назад, первое видео на канале и у человека уже 40 подписчиков и 200 с лишним просмотров. WTF? Вот как это. При этом на меня подписаны родственники и друзья. Новых людей почти нет. Это значит что ютуб не отдает в поиске мои видео. А почему не отдает? Почему одни запускают видос и сразу дело пошло, а другие снимают по два видео в неделю и бестолку. Я иногда просто в отчаянии.

Вот недавнее видео про книгу Орхана Памука Музей невинности

Партнерская программа booking меня забанила

На букинге есть программа для аффилиатов. Суть – ставить партнерские ссылки на отели или целые города у себя в блоге или где там еще и когда кто-то по ссылке бронирует – идет какой-то процент. Вообщем на днях все ссылки перестали работать у меня на сайте. И в админпанель зайти не могу. Написала письмо в поддержу – мол че за фигня. Ответ ждала 4 дня и вот он ответ – мол у вас нет активности. Если вы хотите продолжать, пришлите нам стастику по сайту и т.д. и т.п.

Ну вообщем раз за год так никто и не забронировал, то и не нада оно мне. Поудаляля все ссылки на букинг с сайта. Может потом, когда будет больше посещений, тогда вернусь к этому.

Переход со старой неофициальной версии wordpress на новую

Казалось бы, в чем проблема, обновил подряд все имеющиеся обновления (кто-то писал где-то как обновлялся 30 раз подряд), и все, вот тебе последняя версия. Все это прекрасно, если на сайте стоит официальная версия.

А мне вот не повезло, попался мне заказчик, а у него стоит какая-то русская сборка. Она обновлялась, обновлялась, да перестала. Зависла на какой-то четвертой, а в консоли пишет, что версия мол самая свежая.

Только плагины уже некоторые не работают. Jetpack например. А заказчик привык с телефона в приложении статистику смотреть. Статистику ему показывало, а ежегодная сводка пришла пустая.

Вообщем что делать, переустанавливать wordpress?

Думала, я думала, скачала последнюю официальную версию, посмотрела структуру файлов, в чем там разница.

Сохранила рабочую версию сайта без папки wp-content, и перезалила поверх новую версию, за исключением этой самой wp-content. Почему без wp-content? Потому что там настроенная тема, плагины, картинки. И еще, конечно же файл wp-config.php не трогаем.

После перезалива на хостинг новой версии, обновила страницу консоли. Вылезло сообщение – обновите базу данных. Ок, обновляем. И потом все прекрасно заработало.

Для перестраховки, в консоли еще раз переустановила уже официальную поледнюю версию, обновила все плагины и jetpack – и все стало прекрасно.

Не знаю, насколько такой метод перехода корректен, может нужно было сохранить базу, и все по новой переустановить, но он сработал.

Как в Adobe Illustrator сделать документ на несколько страниц

Допустим вам нужен в результате  pdf  3 страницы А4 формата. Для каждой страницы нужно создать новую Artboard.

Когда вы создаете новый файл, вам уже предлагается выбрать количество рабочих областей:

Так же новые рабочие области можно добавлять в процессе работы. Выбираем Artboard tool (shift+O), в верхнем меню нажимает на иконку new Artboard.

При сохранении в pdf все рабочие области автоматически станут страничками.

Как создать дерево ссылок для instagram — много ссылок в профиле инстаграм

В профиле инстаграм можно указать только одну ссылку.  По-этому появилось множество сервисов, позволяющих создать свое дерево ссылок.

Один из них https://linktr.ee

Сервис создает для вашего эккаунта в инстаграм ссылку на уникальную страницу с вашими ссылками.

К примеру дерево ссылок для страницы в ИГ avon.my.boutique будет доступно по ссылке  https://linktr.ee/avon.my.boutique

Что бы создать такое дерево, переходим на сайт https://linktr.ee и после несложной регистрации, прописываем  свои ссылки.

Вот как это будет выглядеть в инстаграм

В бесплатной версии   у вас будет логотип linktr и ограниченые настройки.

В платной версии предлагается различная статистика и возможность брендирования.

Другие похожие сервисы:

mssg.me — возможность добавить ссылки на различные способы связи с вами — вайбер, телеграмм и т.п.

taplink.ru — позволяет создавать формы обратной связи, добавлять ссылки и т.п.

Некоторые сокращения EMMET для CSS

EMMET наиболее удобен для быстрого написания css стилей. Некоторые стили довольно сложные и труднозапоминаемые, с помощью EMMET достаточно лишь запомнить короткое сокращение.

fz20font-size: 20px;
fwbfont-weight: bold;
bgcbackground-color: #fff;
bgbackground: #000;
ccolor: #000;
m0margin: 0;
p0padding: 0;
w100width: 100px;
h100height: 100px;
mw100min-width: 100px;
dndisplay: none;
dbdisplay: block;
lstpnlist-style-type: none;
bg+background: #fff url() 0 0 no-repeat;
ffafont-family: Arial, «Helvetica Neue», Helvetica, sans-serif;
bd+border: 1px solid #000;
bdnborder: none;
bt+border-top: 1px solid #000;
bb+border-bottom: 1px solid #000;
bdbnborder-bottom: none;

Сайт emmet

EMMET — плагин для ускорения верстки.

Первоначальная разметка:  !+tab

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
</body>
</html>

Вставить ссылку на css: link+tab

 <link rel="stylesheet" href="style.css">

Добавить div с определенным классом  .class1+tab

 <div class="class1"></div>

> добавляет дочерний элемент:   .class1>p + tab

<div class="class1"><p></p></div>

* Добавление нескольких однотипных элементов: nav>ul>li*4 + tab

<nav>
 <ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
</nav>

Создание таблички 3 строчки по 3 ячейки: table>tr*3>td*3 + tab

<table>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
</table>

+ Соединение:  header+section+footer + tab

 <header></header> 

 <section></section> 

<footer></footer>

^ Переместить выше в DOM html: ul>li*2^p

<ul>
 <li></li>
 <li></li>
</ul>
<p></p>

Если в этой конструкции вместо ^ поставить >, абзацы вложатся каждый элемент списка. Если поставить +, абзац будет стоять последним элементом после всех li

Группировка (): .class1>(.class2+.class3)+tab

<div class="class1">
 <div class="class2"></div>
 <div class="class3"></div>
</div>

Нумерация $: a.class$*3+tab

<a href="" class="class1"></a>
<a href="" class="class2"></a>
<a href="" class="class3"></a>

id для div ##element$*3

<div id="element1"></div>
<div id="element2"></div>
<div id="element3"></div>

Ссылка: a+tab

<a href=""></a>

Ссылка с адресом: a[href=irenebelle.com]

<a href="irenebelle.com"></a>

Обычный текст: a{ссылка}

<a href="">ссылка</a>

a:link

<a href="http://"></a>

a:mail

<a href="mailto:"></a>

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

lorem и loremru — вставляет произвольный текст

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae maxime, necessitatibus accusantium magnam maiores.

В EMMET очень много различных сокращений, посмотреть их можно в документации на официальном сайте.

Скачать плагин для своего редактора можно здесь


Подробнее об нумерации

ul>li.item$*5

<ul> <li class=»item1″></li> <li class=»item2″></li> <li class=»item3″></li> <li class=»item4″></li> <li class=»item5″></li> </ul>

h$[title=item$]{Header $}*3

<h1 title=»item1″>Header 1</h1> <h2 title=»item2″>Header 2</h2> <h3 title=»item3″>Header 3</h3>

Если нужны нули в начале

ul>li.item$$$*5

<ul> <li class=»item001″></li> <li class=»item002″></li> <li class=»item003″></li> <li class=»item004″></li> <li class=»item005″></li> </ul>

Отсчет в обратную сторону

ul>li.item$@-*5

<ul> <li class=»item5″></li> <li class=»item4″></li> <li class=»item3″></li> <li class=»item2″></li> <li class=»item1″></li> </ul>

Начало нумерации с определенного числа

ul>li.item$@3*5

<ul> <li class=»item3″></li> <li class=»item4″></li> <li class=»item5″></li> <li class=»item6″></li> <li class=»item7″></li> </ul>

CSS

Определение приоритетов стилей css

Метод определения приоритетов css

1 условная  единица — селектор тегов (h1, p, a), псевдоэлементы (::first-child)

10 условных единиц — класс (a.linkwhite), псевдоклассы (:link)

100 условных единиц —  идентификатор  (#whitelink)

1000  условных единиц —  строчный стиль (<a style=»color:white;»>)

При двух стилях с одинаковым приоритетом будет применен последний стиль.

Для установления максимального приоритета используется метка !important. Оно приписывается к конкретному свойству. Но лучше избегать  использования метки.

a.link{

color: white !important;

}

Анимация css

timeline — тоесть шкала времени задается правилом @keyframes

@keyframes name
{
0% {}
25% {}
50% {}
100% {}

}

name — имя анимации

Свойство animation

Параметры анимации и значения по умолчанию

  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
  • animation-play-state: running

Краткая запись и синтаксис

animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction ||
animation-fill-mode || animation-play-state

box-shadow

box-shadow: inset 4px 4px 8px rgba(0,0,0,.75);

Префиксы браузеров

-webkit- — применяется Chrome, Safari и другими браузерами на базе WebKit;
-moz- — используется Mozilla Firefox;
-o- — применяется Opera;
-ms- — используется Microsoft Internet Explorer.

Тени у текста, css

1 значение — смещение по горизонтали, 2 — по вертикали, 3 — степень размытости, 4 — цвет

text-shadow: -4px 4px 3px #666;

<h1 style=»text-shadow: -4px 4px 3px #666;»>text-shadow: -4px 4px 3px #666;</h1>

css font-variant: small-caps

<p style="font-variant: small-caps;">делает весь текст маленькими  прописными буквами. Не знаю, где нужен такой эффект. Главное, что б маркетологи не узнали.</p>

Ключевые слова свойства font-size

Собсвенно, известно, что размером по-умолчанию является 16 px. Это соотвествует medium.

Остальные выглядят так:

а еще они множатся.

<b style="font-size:1.5em"><span style="font-size:2em">куку 1.5*2em</span> куку 1.5em </b><span style="font-size:2em">куку 2em</span>

Значок pdf возле ссылки средствами css

Как прицепить значок pdf перед ссылкой на pdf-документ при помощи css:

a[href$='.pdf'] {
 background-image:url(../img/image_preview.png);
 background-repeat:no-repeat;
 padding-left:20px;
}

a[href$=’.pdf’]  — ищет ссылки, у которых в конце значения атрибута href есть .pdf.

$ — означает «вконце»

css и таблички

Продолжаю читать свою книжку по css. Нашла там интересный способ выделения строк таблицы цветом через одну:

table tr:nth-child(odd)

{
background-color: #eeeeee;
}

:nth-child(odd) — псевдоэлемент, выбирающий дочерние элементы. odd— нечетные, even — четные.

Чтобы  выделить опреденный столбец в таблице:

table tr td:nth-child(4n)
{

background-color: #c7f4ff;

}

:nth-child(4n) — 4n — выделить каждый 4 элемент

Или вот:

tr>td[align]:nth-child(2n)
{

background-color:#090;
}

Выделяет второй дочерний элемент, у которого есть атрибут align и раскрашивает в зеленый цвет:

А в красный верхнюю строчку я покрасила так:

table th

{
background-color: #ff0000;

}

Тут ничего сложного нет.

Этот код

#text li>a[href*=»n_id»]:after
{
content: » >>»;
}

цепляет вконце всех ссылок «Читать далее» которые содержат в ссылке n_id (ссылку на новость) символы » >>» Таким же способом можно прицеплять вначале всех ссылок на pdf маленький значок pdf.

Можно добавлять шрифты из гугла к себе на сайт

Типа так:

<link href="http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic" rel="stylesheet">

а в css так:

p

{

font-family: ‘Philosopher’, ‘Arial Black’, serif;

}

Селекторы

Селекторы, которые я не использовала ни разу, а наверное полезная штука:

h1+p — выделяет абзац, следующий сразу за заголовком. Это работает только с сестринскими тегами, не с потомками.

p * — все теги, вложенные в p (например strong, em, span, a)

Селекторы — примеры использования

Селектор :target

Селектор :target используется с внутренними ссылками.

В примере при нажатии на ссылку, появится форма.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>

 <style>
  #hello {
   display: none;
  }
  #hello:target {
   display: block;
  }

</style>
</head>
<body>
 <a href="#hello">Подписаться на рассылку</a>
 <form action="" id="hello">
  <label for="email">Укажите ваш адрес электронной почты</label><input type="text" id="email"> 
  <input type="submit" value="Подписаться">
 </form>
</body>
</html>

Селектор  :not()

Выбрать все ссылки, ведущие на внешние сайты (тоесть не на домен mysite.com)

a[href^="http://"]:not([href*="mysite.com"])

Сброс значений отступов

*{
 padding: 0;
 margin: 0;
}