Не раз, каждый графический дизайнер приступил к работе с программистом, и не раз это сотрудничество превратилось в открытый конфликт, доведя до белой горячки обе стороны. Иногда, однако, бывает и так, что сотрудничество идет гладко и приятно. Речь идет не только о «достижении» людей между собой взаимопонимания, но и о способе сотрудничества. Тот же графический дизайнер (программист), который только что кричал на своего коллегу, очень хорошо изменил свое отношение, потому что изменились действия двух сторон. В этой статье я рассмотрю некоторые из способов, которыми у меня была возможность испытать на себе. По понятным причинам этот текст в основном предназначен для команд, а не для графических дизайнеров, которые сами кодируют и не нуждаются в поддержке разработчиков.
Программист сокращает графику
В случае, когда программист знает программу, которую мы использовали для создания страницы, и, самое главное, он хорошо разбирается в графике, вся проблема исчезает, потому что никто не переходит дорогу. Этот метод, вероятно, самый известный — то есть графический файл создает страницу и отправляет файл открытым для программиста. Этот файл уже работает сам по себе и превращает его в интерактивную форму. Теоретически конфликт не должен происходить, но, как хорошо известно, теория не всегда найдет подтверждение на практике.
Основные проблемы, с которыми связана графика, — это те, которые влияют на сферу упорядочения. Не только имена файлов, словарный запас, используемые в описаниях, но и соответствующая каталогизация и обозначение слоев в файле. Решение этой проблемы состоит в том, чтобы изучить привычку именовать каждый элемент логически. Уже в начале, создав новый документ, стоит создать прототип такой иерархии.
Мы видим пример иерархии, которую мы готовим, как только мы начнем работу над новым документом. Известно, что это только начальное деление, потому что в процессе работы обязательно появятся слои, которые мы сможем каталогизировать отдельно. Если у нас много слоев, мы можем использовать цвета для их маркировки. Просто щелкните правой кнопкой мыши на значке глаза и выберите нужный цвет.
Где у всего этого заказа есть интерес программиста? Ему будет легче найти слой, в котором он заинтересован. Это занимает много времени. Особенно полезным является порядок, когда мы работаем с кодировщиком в течение некоторого времени, разработка определенной схемы действий сокращает время всего процесса создания веб-сайта и создает дружескую атмосферу. Однако, если у кого-то есть проблема или сопротивление, чтобы сохранить этот слой в трюме, было бы целесообразно создать отдельную плату, желательно в отдельном файле, где будут образцы цветов, заголовки форматирования, абзацы или ссылки и т. Д. Если вы используете набор значков, вам стоит присоединиться или сделать это самостоятельно.
Поскольку загрузка самого файла открыта для разработчика, есть несколько важных правил, которые следует учитывать:
Если мы используем пользовательские шрифты, мы отправляем их упакованными. Конечно, кодировщик захочет отредактировать текстовый слой, а не использовать шрифт, который мы использовали, не сможет его правильно обработать. Шрифт будет преобразован в стандартный шрифт. Мы можем рассчитывать либо на использование стандартного шрифта, поскольку он будет игнорировать недостающее сообщение или написать нам сообщение для отправки, но в этом случае лучше не рисковать и сразу упаковать такой пакет.
Вышеупомянутые шрифты могут создать проблему, когда кодировщик или клиент после получения страницы захочет записать текст и использовать в нем польские символы. Важно проверить шрифты в этом отношении. Если мы делаем страницу только для англоязычной версии, это не проблема, к сожалению, на нашем родном языке это довольно часто проблематично. Перед загрузкой шрифта, например из dafont.com или шрифтов Google Web, мы можем проверить достаточно простой способ или убедиться, что наш выбранный шрифт имеет русские символы. В соответствующих полях, где текста примера достаточно, чтобы напечатать: ßśęłółółńńńń — благодаря этому обращению мы увидим, какой шрифт подходит для правильного написания на нашем языке.
Умные объекты. Нам нужно предположить, что наш кодер может работать с более старой версией Photoshop, чем CS2 (поскольку из этой версии доступны интеллектуальные объекты). В этом случае могут быть различные осложнения, такие как интеллектуальные объекты, которые не будут видны. Поэтому перед загрузкой файла растеризуйте этот слой или если что-то необходимо для редактирования разработчиком — сохраните его как отдельный файл.
Способы смешивания — часто используются, потому что вы можете добиться интересного эффекта, например, вырезать фон из изображения без использования других инструментов. Режимы микширования — это немного иллюзия, которая скрывает то, что мы видим, мы не хотим (то есть фон действительно там, но мы его не видим) — условие для работы над такими режимами — это два разных слоя, взаимодействующих правильно.
Когда мы создаем фон для однородной страницы и будем сохранять в этой форме — никаких проблем. Если мы создадим фон, где его элементы предоставляются как отдельные объекты в структуре страницы, а в нашем PSD-файле перекрываются и смешиваются — это проблема. Он состоит в том, что нам нужно минимум два слоя, если мы вырезаем элементы независимо друг от друга (т. Е. Один слой), тогда проблема возникает, потому что когда один слой выключен, смешение прекращается. В этом случае мы либо оставляем вырез индивидуально, и вырезаем его так, чтобы режим смешивания продолжал работать, либо мы вручную обрезаем фон (или мы пытаемся получить эффект правильно, потому что режимы наложения не просто вырезают фоны из изображений).
Стоит обратить особое внимание на стандартные эффекты Photoshop. Для Shadow основным вариантом является Multiply, для Brightness, Screen. В эпоху CSS3 значения этих цветов должны быть выбраны так, чтобы разработчик мог кодировать его без использования дополнительных изображений.
Взаимодействие. Программист получил страницу и закодировал ее. Мы наблюдаем за ней, но чего-то не хватает. Оказывается, в отправленном нами файле мы не создавали эффекты, с которыми мы часто сталкиваемся на сайте, такие как наведение, посещение, ссылка и т. Д. — это те эффекты, которые меня немного меняют после того, как мы делаем какое-то действие, например, мы перемещаем курсор на место или мы нажмем на ссылку. Для программиста важно получить проект с примером такого эффекта, иначе он вообще этого не сделает, или он покончит со всей концепцией проекта.
Резка изображений — общая проблема, особенно в начале со-разработчика-программиста, когда им никогда не приходилось сталкиваться с таким сотрудничеством. Программист не справляется с разрезом изображений, но не запрашивает справочную графику, поэтому вся сборка может выглядеть как минимум странно. Наиболее распространенной была запись изображений альфа-канала в формат JPG, который наложил свой собственный фон в пустое пространство. Позже вы могли любоваться вырезанными кнопками с белой рамкой. В этом случае мы можем прийти на помощь программисту и вырезать фотографии или узнать, как это сделать. Наконец, мы можем использовать номер два для совместной работы.
Решения этих проблем просты: мы не используем шрифты, которые не имеют русских символов для проектов на родном языке, мы всегда отправляем специальные шрифты программисту, мы также не забываем создавать интерактивные эффекты на странице, избегать микширования, Не используйте интеллектуальные объекты, если мы не уверены, какую версию программы использует кодер, мы поддерживаем кодировщик при резке и сжатии изображений.
Графическая графика
Раньше я думал, что это единственный и правильный метод сотрудничества. Программист не только получает видения страниц, но и зашифрованную страницу и файл CSS. Кодер в этом случае создает, главным образом, back-end.
Графическая работа расширяется несколькими элементами, т. Е. Она создает полный скелет страницы, чаще всего основанный на html-файле, и добавляет таблицы стилей, иногда возникает соблазн бросать скрипт или шрифт, если это требуется проектом. Кодер прибывает позже и помещает соответствующий код на место, чтобы он не перемещал структуру (если только графический код не сделал что-то неправильно). Таким образом, мы уверены, что никто не сломает нашу работу, что каждая деталь будет точно настроена, потому что в конечном итоге графика кодируется и лучше знает, как работать и смотреть.
Однако нет золотой середины, и здесь тоже часто доходит до конфликтов. Часто программист, в поддержку своих собственных знаний (иногда, к сожалению), критикует наш способ упорядочения элементов в структуре. Иногда он прав, иногда нет. Нельзя предсказать, что некоторые элементы страницы будут иметь переменную ширину, что часто приводит к очистке скелета страницы.
Это решение требует графического знания в основном о HTML и CSS. Не зная этих двух языков, мы не будем двигаться. Вы должны иметь в виду некоторые правила, чтобы подготовленный скелет страницы не был выброшен в корзину:
Код должен быть максимально прозрачным и разборчивым, id и классы называются логически избегая имен, которые не говорят об определенном элементе
Мы не можем избегать комментариев — здесь тоже, однако, это невозможно переусердствовать, стоит прокомментировать, где заканчиваются разделы, стоит также прокомментировать в разделе главы, тем самым отделяя ссылки на библиотеки, шрифты и таблицы стилей.
Структура файла также должна быть прозрачной — мы создаем отдельную папку для изображений, стилей, библиотек, шрифтов и т. Д. — даже если у нас есть только один файл в этой папке. Футуристическое мышление является основой для программирования, особенно для страниц, где контент постоянно обновляется.
Очень крутая функция, которая спасает нас, и разработчик некоторое время является функцией include, где мы можем взять фрагменты кода в место. Вот код:
[Php]
[/ Php]
Например, мы можем создать четыре файла: заголовок, содержание, нижний колонтитул и индекс. В первых трех файлах мы помещаем этот фрагмент кода, в котором расположены соответствующие разделы, то есть заголовок, содержимое страницы и нижний колонтитул. В индексном файле мы помещаем вышеуказанный код, указывая путь к файлу. Когда мы включаем этот файл, оказывается, что страница выглядит нормально, потому что мы индексировали код из трех других файлов. Это дает нам много времени, когда нам нужно подготовить некоторые скелеты, для которых, например, изменяется содержимое. Когда мы подготовили несколько таких страниц, и выясняется, что нам нужно что-то изменить в заголовке, нам не нужно делать это в каждом файле отдельно — просто отредактируйте файл, отвечающий за заголовок.
Проектирование схем
Уходит уже в небытие, но не потому, что не работает – причина — естественная смерть дизайна схем (исключением могут быть еще скины для wodpressa или joomli). Программист создает скелет страницы, а затем отправляет его графическому дизайнеру. Это получает ссылку или пакет файлов, где вы не видите мусора. Задача графика — одеть страницу и привести ее в CSS.
На этот раз роли немного изменились, потому что графика в этом случае может вызвать проблемы. Часто у него есть претензии относительно размера и размещения некоторых элементов, худшего, если он не знает CSS, и сам он не может изменить введение. Самое простое в этом случае — создать визуализацию этой страницы, даже в начале схемы, — дизайн самого макета — путем маркировки «каракулей», где можно найти и иметь какое – то измерение.
Программист также не может нести ответственность и испортить наше настроение, сообщив плохую компрессию графики, а пик — когда графическая запись перезаписывает файлового программиста, когда он просто скопировал его на сервер.
Вот единственное решение — разработать систему, например, если графические файлы в файле помогают установить часы работы (от этого и до этого часа работы графики и от этого до программиста), другим способом является передача преобразованных файлов программисту. Самый простой способ сделать это — создать отдельную таблицу стилей, в которой один записывает свой код, графическое изображение разрезает его на свой собственный лист и изменяет его. Изменения видят обе стороны, и нет возможности перезаписать чужой труд, здесь условие заключается в том, чтобы управлять языком CSS, графикой.
Система управления версиями
В сети есть много программ, которые способствуют сотрудничеству. Наиболее популярной из них является система управления версиями, иначе известная как SVN. Я использую TortoiseSVN, это, вероятно, самая популярная программа для этого типа задач. Черепаха позволяет нам проверять сравнение версий файлов и проверку журнала — чтобы узнать, кто сделал какие файлы и когда. Серверу нужна программа.
Путь номер четыре, пять, десять …
Сколько программистов и графических дизайнеров — так много способов совместной работы. На самом деле многое зависит от человека, который находится на другой стороне. Независимо от того, как работает графический редактор или программист, иногда простое сотрудничество не имеет смысла. Я лично использую метод номер два, он дает наиболее выгодный: во-первых, он кодирует скелет, и я знаю, какого эффекта я хочу достичь, программист оставляет задний конец и механику, которая не может быть видна на первый взгляд, непрерывное кодирование и необходимость сохранять порядок в файлах — потому что я сам могу по собственному желанию заблудиться в них.