текстовый редактор - для текста, графический - для графики и макетов.
пихать всё в одно это бред.
я обычно для верстки использую пхпшторм, фотошоп для макетов, хром для результатов.
---------------------------------
tl:dr
в фотошопе юзай хоткеи, спрайты собирай сборщиком (не онлайн), мелкие картинки с макета экспортируй скриптом (есть встроеный сценарий), юзай гугл-фонтс или белку, адаптивные макеты одной и той же вьюшки лучше скидывать в одно рабочее поле
в редакторе - юзай эммет (если есть), юзай лайвтемплейты (если редактор поддерживает), юзай автокомплит (если редактор поддерживает). юзай сборщики файлов (более системный совет). юзай другой редактор (если он нифига не поддерживает), например phpstorm / webstorm, грамотно организуй структуру проекта (логически), работай на основе какого нибудь адаптивного фреймворка (например бутстрап 4), юзай scss
---------------------------------
longread
в фотошопе можно ускориться так
1. юзать хоткеи. по факту верстальщику надо знать от силы 15 хоткеев
например вот такие (неполный список конечно же)
- скопировать слой в новый файл.
- тримминг пустых пикселей
- сохранить в формате для веб (типа сохранение картинок) - их всеравно потом лучше бы пережать так как ФШ добавляет много лишнего мусора внутрь (этот хоткей есть так то)
- вкл-выкл режим показа границ слоёв. мегаполезная фишка.
- вкл-выкл направляющие.
2. спрайты - мелкие фотки со всех макетов скидываешь в один новый файл, потом переименовываешь каждый слой по смыслу (в т.ч. ховер-слои) так чтобы названия не повторялись. далее запускаешь скрипт - импорт слоёв в файлы. он быстро всё триммингует, сохраняет в пнг и выплевывает в папку. название слоёв становится названием файла. однако скрипт достаточно "противный" и дописывает свои индексы в начале файла. исправляется единоразовой правкой самого скрипта (уже не помню где лежит, делал года 2 назад).
далее, если ты действительно верстаешь а не пишешь голый цсс - у тебя есть сборщик. например я юзаю бутстрап 4 (который наверно уже не альфа) и грунт. в грунт прикрутил команду grunt sprite которая берет все пнг из папки (которые фотошоп туда положил) и собирает из них
- файл спрайта
- парциал сцсс для использования каждого спрайта по отдельности в коде других парциалов
сборщик это примерно такой
"grunt-spritesmith": "^6.3.1"
код примерно такой
sprite:{
all: {
src: './sprite/*.png',
dest: './../images/sprite.png',
destCss: './scss_custom/_sprite.scss',
imgPath: '../../../images/sprite.png',
padding: 3,
algorithm: 'left-right',
cssVarMap: function (sprite) {
sprite.name = 'sprite-' + sprite.name.replace(/\s|\(|\)/g, '_');
},
cssTemplate: 'css.sprite.template'
}
},
спрайт темплейт примерно такой
{{#spritesheet}}
@mixin sprite(){
display:inline-block;
overflow:hidden;
background-image: url({{{image}}});
background-repeat: no-repeat;
}
.sprite{
display:inline-block;
overflow:hidden;
background-image: url({{{image}}});
background-repeat: no-repeat;
}
{{/spritesheet}}
{{#sprites}}
.{{name}}{
background-position: {{px.offset_x}} {{y}};
width: {{px.width}};
height: {{px.height}};
}
@mixin {{name}}(){
background-position: {{px.offset_x}} {{y}};
width: {{px.width}};
height: {{px.height}};
}
{{/sprites}}
генерирует не только сам класс но еще и миксин (который можно юзать во всяких ховер-эффектах!)
вобщем, тут сборщик очень сильно упрощает и автоматизирует сборку спрайтов. с ужасом вспоминаю дни когда руками их собирал в онлайн сервисе.
если юзаешь что то другое (компас, гулп или что там еще за звери наплодились) - красава, разберешься наверно как прикрутить.
3. вытаскивать фотки и сохранять - в фотошопе занимает около 4 секунд (по одной, руками).
там даже мышкой не надо тыкать (при условии что слой уже выбран).
алго примерно такой
- хоткей - скопировать на новый документ, ок, ты перешел в новый таб
- хоткей - тримминг пустых пикселей - фотка обрезана по размеру
- хоткей - сохранить для веб - и вот ты уже выбираешь место сохранения.
4. иногда дизайнеры ленятся и не обрезают фотки - на помощь приходит выделение нужного куска макета и "скопировать совмещенные данные". сразу же делаешь новый файл, энтер, ctrl+v, сохранить.
5. юзай линейку, заставляй дизайнеров соблюдать одинаковые отступы, проси шрифты которые юзали в макетах (хотя бы в одном формате), храни наборы конверченых для пуленепробиваемого font-face у себя где нибудь на складе - часто могут пригодиться. подключение уже готовой пачки шрифтов на все вкусы браузеров - что может быть приятнее (и быстрее) ? ммм, наверно только гоогле-фонтс.
6. адаптивные макеты я обычно скидываю все в один файл (один вид = 4-5 макетов, напр. карточка товара). так проще смотреть что куда уплывает и куда перемещается.
-----------------------
ускорение в редакторе
юзаю phpstorm. в его состав входит webstorm поэтому этот варик чуть менее чем абсолютный эпик вин. в него интегрируется вообще что угодно, в т.ч. можно настроить собственные вотчеры файлов (сасс, лесс) (без грунта/гульпа итп). алсо - автоподсказки кода (и тех миксинов спрайтов тоже), лайв-темплейты очень удобная штука, а еще встроеный эммет - совсем красота.
в шторме есть лайв-релоад. если имеешь хотя бы 2 монитора - можно заценить. на одном браузер, на другом верстаешь - тут же видишь результат (вотчер компилирует цсс, лайв релоад его перечитывает и обновляет)
всё делается на парциалах (т.е. файлы-кусочки в терминологии сасс "partials"). парциалы прикольны тем что вотчер не станет компилировать новый парциал в готовый код, пока ты его никуда не подключил. а если писать без подчеркивания - станет (т.к. это уже не парциал). т.о. создание таких файлов не ломает промежуточные результаты работы.
для адаптивной верстки выглядит примерно так
/* /includes/header/_header.scss */
header{
@include media-breakpoint-up(md){
margin-bottom: .5rem;
}
.top{
border-bottom: 1px solid #ccc;
height: (42rem/16); // нужно было 42 пикселя, а рем = 16. приходится изворачиваться
font-size: (14rem/16);
margin-bottom: (28rem/16);
@include media-breakpoint-up(md){
margin-bottom: 3rem;
}
@include media-breakpoint-up(lg){
border-bottom: 0;
}
}
}
для справки -
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 960px
);
media-breakpoint-up - миксин бутстрапа 4, просто сразу говорит о том что "для экрана больше чем md будет вот так то". само собой есть и -down, -between.
причем вся конструкция для миксина тоже не пишется руками - для этого есть лайв темплейт
поэтому я пишу (tab - это раскрытие эммета или лайв-темплейта)
bp (tab) md (tab) mb.5rem (tab)
это раскрывается в
@include media-breakpoint-up(md){
margin-bottom: .5rem;
}
и компилируется в
@media (min-width: 768px) {
header {
margin-bottom: .5rem;
}
}
не призываю юзать бутстрап прям везде и всюду - призываю лишь юзать "наработки" которые позволяют забыть о написании медиа-запросов руками. даже если от бутстрапа юзается одна сетка - да или хоть вообще одни миксины - это того стоит.
Простой
Средний
Простой