Как новичку создать дизайн сайта?

LeoMilan

Пользователь
Регистрация
12.01.13
Сообщения
142
Реакции
18
Баллы
13
Учусь по специальности программирование, но меня больше интересует конкретно направление создания сайтов. Но дизайн нам никогда не преподавали, всё что умею, все научился в инете. Подскажите как к примеру делать более менее нормальные логотипы, не имея опыта в дизайнте (не предлогать сервисы по соданию логотип, это не то) и как сделать такую вещь к примеру. Вот сайт http://promodern.ee/, там где размещен контент, там есть изгиб в верхнем левом углу, как например такое сделать подскажите. Может вообще линк дадите, где всякие такие темки для сайтов рассказывают как делать. Вы дизайнеры всяко что-то полезное можете подсказать.
 

lukamal

Редактор
Регистрация
30.08.12
Сообщения
803
Реакции
484
Баллы
28
Вот сайт http://promodern.ee/, там где размещен контент, там есть изгиб в верхнем левом углу, как например такое сделать подскажите. Может вообще линк дадите, где всякие такие темки для сайтов рассказывают как делать. Вы дизайнеры всяко что-то полезное можете подсказать.

Если вас заинтересовал дизайн вы можете изучить структуру страницы сами.
В Firefox например это делается вот так



Вы увидите код всей страницы.

Код страницы
<html>
<head>
<title>Promodern OÜ</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<META NAME="DESCRIPTION" CONTENT="Atelje">
<META NAME="KEYWORDS" CONTENT="ateljee,moda,promodern,avatud ateljee,kunst,tellimine">
<META NAME="RESOURCE-TYPE" CONTENT="DOCUMENT">
<META NAME="Document-state" CONTENT="Dynamic">
<META NAME="revizit-after" CONTENT="1 day">
<META NAME="URL" CONTENT="http://www.promodern.ee">
<META NAME="AUTHOR" CONTENT="Maxim Zimarev">
<style>
.key_on { border-top: 1 solid #202020; }
</style>
</head>
<body bgcolor="#eedca2" marginheight="0" marginwidth="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<form method="POST" target="_self" id="mainForm">
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" align="center" background="images/background.gif">
<tr>
<td width="230" height="100" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td width="230" ><img src="images/logo.gif" width="230" height="100" alt="" border="0" /></td></tr>
<tr><td align="right" valign="top" height="110">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="rus/images/k_about.gif" width="217" height="19" alt="" border="0" /></td></tr>
<tr><td style="padding: 3 0 0 0"><img src="rus/images/k_studio.gif" width="217" height="19" alt="" border="0" style="cursor: pointer" onClick="lnk2.value='';lnk.value='studio';mainForm.submit();"/></td></tr>
<tr><td style="padding: 3 0 0 0"><img src="rus/images/k_job.gif" width="217" height="19" alt="" border="0" style="cursor: pointer" onClick="lnk2.value='';lnk.value='job';mainForm.submit();" /></td></tr> <tr><td style="padding: 3 0 0 0"><img src="rus/images/k_contact.gif" width="217" height="19" alt="" border="0" style="cursor: pointer" onClick="lnk2.value='';lnk.value='contact';mainForm.submit();"/></td></tr></td></tr>
</table>
<tr><td align="right"><table border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top" height="75" valign="top">
<table border="0" cellpadding="5" cellspacing="0">
<tr><td><img src="rus/images/flag.gif" width="30" height="19" alt="" border="0" /></td></tr>
<tr><td><img src="est/images/flag.gif" width="30" height="19" alt="" border="0" style="cursor: pointer" onClick="lng.value='est';mainForm.submit();" /></td></tr>
<tr><td><img src="eng/images/flag.gif" width="30" height="19" alt="" border="0" style="cursor: pointer" onClick="lng.value='eng';mainForm.submit();" /></td></tr>
</table>
</td>
<td height="415"><img src="images/logo2.gif" width="180" height="415" alt="" border="0" /></td>
</tr>
</table>
</td></tr>
</table>
</td>
<td width="550" height="570" valign="top"/>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td width="550" height="570" valign="top" background="images/book.gif" style="padding: 35 25 5 30"/>
<table border="0" cellpadding="0" cellspacing="0"><tr><td valign="top" width="265" style="padding: 0 10 0 0; text-align: justify; font-size: 14px;"><img src="rus/images/firma.gif" width="231" height="18" alt="" border="0"/><br><img src="images/underline.gif" width="231" height="14" alt="" /><br><font color="575757" style="tahoma">OÜ Promodern было основано весной 2003 года как семейное предприятие. Сейчас в фирме работает более 20 человек.<br><br>
В 2005 году фирма заняла первое место в устроенном департаментом предпрнимательства конкурсе "Sarav startija".
Благодаря помощи мэрии Таллинна, удалось существенно расширить и обновить парк машин. <br><br>
Основным видом деятельности является выполнение различных субподрядных работ. С 2007 года фирма выполняет также
индивидуальные заказы. <br><br>
Мы стремится идти в ногу со временем и быстро меняющимися потребностями рынка и вкусами наших клиентов,
постоянно внедряя в производство новые технологии и собственные KNOW-HOW! Огромное внимание уделяется качеству продукции.

</font><br><br><div style="cursor: pointer;font-size: 15px;text-decoration:underline;color: #0000FF;" onClick="lnk2.value='equipment';mainForm.submit();">наше оборудование</div></td><td width="214" valign="top"><div style="padding: 15 8 15 8;border: 1px solid #808080;background-color: #DDDDDD" ><table border="0" cellpadding="0" cellspacing="0" style="cursor: pointer;" onClick="lnk2.value='equipment';mainForm.submit();"><tr><td><img src="images/equipment_main.gif" width="214" height="343" alt="" / border="0" title="наше оборудование"></td></tr></table></div></td></tr></table> </td></tr>
<tr><td> </td></tr>
</table>
</td>
</tr>
</table>
<input type="Hidden" id="lng" name="lng" value="rus">
<input type="Hidden" id="lnk" name="lnk" value="about">
<input type="Hidden" id="lnk2" name="lnk2" value="">
</form>
</body>
</html>


Загнутый уголок реализован при помощи подкладывания фонового рисунка в ячейку таблицы <td width="550" height="570" valign="top" background="images/book.gif" style="padding: 35 25 5 30"/>



Информацию по дизайну смотрите на сайте http://htmlbook.ru
 

LeoMilan

Пользователь
Регистрация
12.01.13
Сообщения
142
Реакции
18
Баллы
13
Да это я вижу в фаитбаге, что картинка стоит. Вопрос, как ее сделать такую с уголком ? Ну понятн, что в графическом редакторе. Я пользуюсь Paint.NET. Вот как скажем там делать подобдное?
 

lukamal

Редактор
Регистрация
30.08.12
Сообщения
803
Реакции
484
Баллы
28
Да это я вижу в фаитбаге, что картинка стоит. Вопрос, как ее сделать такую с уголком ? Ну понятн, что в графическом редакторе. Я пользуюсь Paint.NET. Вот как скажем там делать подобдное?

фотошоп
вам в этом поможет

смотрите, читайте, повторяйте, делайте своё.
 

LeoMilan

Пользователь
Регистрация
12.01.13
Сообщения
142
Реакции
18
Баллы
13
А конкретно в Paint.NET как реализовать ? Вообще программист, который сайт делает, вы думаете он рисует всё это дело сам или тырит из инета картинки ?
 

lukamal

Редактор
Регистрация
30.08.12
Сообщения
803
Реакции
484
Баллы
28
Паинт или фотошоп разницы нет нужно уметь рисовать.
Программист обращается к тому кто умеет рисовать в фотошопе или другой программе.
Брать чужие картинки можно, но это уже не уникально.
 

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
Я пользуюсь Paint.NET. Вот как скажем там делать подобдное?
Как сделать в Paintе, я думаю вам никто не скажет...
Рассматривайте фотошоп, как графический редактор.

Вообще программист, который сайт делает, вы думаете он рисует всё это дело сам или тырит из инета картинки ?

Кто-то делает все сам с нуля, кто-то берет картинки, но картинки из инета это НЕ значит, что дизайнер делал дизайн не сам, украл его. Найти картинку это 10% работы.
Причем картинки могут быть и из платных фотобанков.

Конкретно по загнутому уголку есть уроки опять таки фотошопа, а не пайнта. В сети даже можно найти заготовки по фотошопу с различными элементами.

Добавлено через 1 минуту
Подскажите как к примеру делать более менее нормальные логотипы, не имея опыта в дизайнте

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

Manjuna

Пользователь
Регистрация
08.01.13
Сообщения
3
Реакции
2
Баллы
3
Адрес
Уфа
LeoMilan, Здравствуйте!
Не могла пройти мимо такой животрепещущей темы.
Если Вы хотите научиться рисовать уголки и прочую графику, я бы Вам посоветовала изучить саму суть рисования в фотошопе.
Введите в поисковике : "как рисовать в фотошоп", пройдите четыре-пять уроков и Вам станет ясно как все это устроено.
Вкратце я могу сказать, что уголки и подобное делается так - создается слой с маской и внутри этого слоя при помощи кисти и градиентов рисуются тени, блики. Маска нужна, чтобы были ровные края у изображения, кисть нужна, чтобы добиться реалистичности. Но чтобы этой реалистичности добиться, лучше разобраться как устроен тот же самый уголок.
Если Вы хотите понять веб-дизайн в целом, то я бы посоветовала перерисовать 4-5 сайтов, которые Вам нравятся. Так Вы интуитивно поймете как они устроены, как задается модульная сетка и т.п.
С логотипами уже посложнее, так как их по идее нужно сперва нарисовать в эскизном виде, а потом оцифровывать в векторе.Или сразу в векторе делать эскизы. Вам нужно будет изучить еще и Adobe Illustrator (ну или Корел), если хотите сразу все чисто делать.)

Начальные уроки Вы можете тут посмотреть : http://demiart.ru/. Все новички начинают с этого форума) Пройдите побольше уроков и вы поймете саму суть.
Желаю творческих узбеков и удачи!
 

LeoMilan

Пользователь
Регистрация
12.01.13
Сообщения
142
Реакции
18
Баллы
13
По умолчанию
LeoMilan, Здравствуйте!
Не могла пройти мимо такой животрепещущей темы.
Если Вы хотите научиться рисовать уголки и прочую графику, я бы Вам посоветовала изучить саму суть рисования в фотошопе.
Введите в поисковике : "как рисовать в фотошоп", пройдите четыре-пять уроков и Вам станет ясно как все это устроено.
Вкратце я могу сказать, что уголки и подобное делается так - создается слой с маской и внутри этого слоя при помощи кисти и градиентов рисуются тени, блики. Маска нужна, чтобы были ровные края у изображения, кисть нужна, чтобы добиться реалистичности. Но чтобы этой реалистичности добиться, лучше разобраться как устроен тот же самый уголок.
Если Вы хотите понять веб-дизайн в целом, то я бы посоветовала перерисовать 4-5 сайтов, которые Вам нравятся. Так Вы интуитивно поймете как они устроены, как задается модульная сетка и т.п.
С логотипами уже посложнее, так как их по идее нужно сперва нарисовать в эскизном виде, а потом оцифровывать в векторе.Или сразу в векторе делать эскизы. Вам нужно будет изучить еще и Adobe Illustrator (ну или Корел), если хотите сразу все чисто делать.)

Начальные уроки Вы можете тут посмотреть : http://demiart.ru/. Все новички начинают с этого форума) Пройдите побольше уроков и вы поймете саму суть.
Желаю творческих узбеков и удачи!
Спасибо за ответ !
 

Brackets

Пользователь
Регистрация
12.11.13
Сообщения
17
Реакции
0
Баллы
2
Возраст
34
Нужно сначала получить какие-то знания и навыки, интернет в помощь
 

Статистика форума

Темы
200.635
Сообщения
380.524
Пользователи
327.877
Новый пользователь
fine.greff
Сверху Снизу