Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > WPF и Silverlight > Дизайн приложений


Автор: Bars1992 19.1.2011, 21:36
Привет всем. 

Когда я только знакомился с технологией, я просто был поражен графическими возможностями программы. Но вот в чем проблема: я не дизайнер и рисовать толком не умею. Думал всегда успею скачать в Интернете. Но не тут то было. Все векторные иконки платные, а фонов, например стеклянные или еще какие то красивые для панелей и кнопок, вообще только несколько нашел и то платные. В общем, мне нужна вся векторная графика, что есть. Прошу растровых иконок не выкладывать, так как у самого по горло, а от фонов не откажусь

Автор: vikaz 20.1.2011, 19:49
Привет! http://allday.ru/ был?

Автор: Kaerus 20.1.2011, 22:11
vikaz
Я бы по остерегся их использовать в коммерческой программе, очень у них смутное происхождение

Bars1992
Есть специальные конвертеры для перекодирования всяких SVG и AI в XAML. А уж сайтов с отрытыми клипартами полно (гугл в помощь), хотя бы http://www.openclipart.org/


Автор: Freyzer 20.1.2011, 22:21
А почему вектор? Все равно весь дизайн крутится вокруг растра. Ну а если так уж нужен вектор, Корел осваиваеться буквально за месяц, а то и быстрей, при желании.

Автор: Rohoss 21.1.2011, 01:51
Цитата(Freyzer @  20.1.2011,  22:21 Найти цитируемый пост)
А почему вектор?

Имеется ввиду вектор на WPF. То есть, иконка не является изображением, а является непосредственно элементом управления. Такая "иконка" способна сама менять анимацию и многое другое...

Автор: Bars1992 21.1.2011, 12:25
Цитата(Freyzer @ 20.1.2011,  22:21)
Ну а если так уж нужен вектор, Корел осваиваеться буквально за месяц, а то и быстрей, при желании.

Что корел освоить быстро можно это ясно, а вто творческую жилку врядли так быстро набешь, а возможно и вобще некогда если таланта нету.

Вобщем всем спасибо будем шарудеть дальше.

Автор: vikaz 21.1.2011, 12:43
Цитата(Kaerus @  21.1.2011,  00:11 Найти цитируемый пост)
Я бы по остерегся их использовать в коммерческой программе, очень у них смутное происхождение


Когда на такое обращали внимание? Если у Вас очень много денег, то покупайте, а у кого их нет, те будут бесплатно скачивать и пользоваться! smile

Автор: Rohoss 21.1.2011, 16:29
Вот что я называю иконкой на WPF
Код

<ControlTemplate x:Key="ct1">
                <ContentControl>
                    <Viewbox>
                        <Grid>
                            <Rectangle Opacity="0.1" Fill="Orange" x:Name="Rectangle" Width="254.042" Height="152.646" Canvas.Left="0.0419769" Canvas.Top="0" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF000000"/>
                            <Path Fill="Orange" x:Name="Path" Width="254.167" Height="152.5" Canvas.Left="0" Canvas.Top="0.145996" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 60.9998,91.1458L 1,91.1458L 1,61.1458L 60.9998,61.1458L 60.9998,1.14606L 90.9998,1.14606L 90.9998,61.1458L 151,61.1458L 151,91.1458L 90.9998,91.1458L 90.9998,151.146L 60.9998,151.146L 60.9998,91.1458 Z M 201.5,121.646L 253.167,121.646L 253.167,151.646L 172.167,151.646L 172.167,151.146L 171.5,151.146L 171.5,1.146L 201.5,1.146L 201.5,121.646 Z "/>
                        </Grid>
                    </Viewbox>
                    <ContentControl.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="Rectangle"
                                                         Storyboard.TargetProperty="Opacity" 
                                                         From="0.1"
                                                         To="0.5" >
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="Rectangle"
                                                         Storyboard.TargetProperty="Opacity" 
                                                         From="0.5"
                                                         To="0.1" >
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseDown">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         AutoReverse="True"
                                                         Storyboard.TargetName="Path"
                                                         Storyboard.TargetProperty="Opacity" 
                                                         From="1"
                                                         To="0.1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </ContentControl.Triggers>
                </ContentControl>
            </ControlTemplate>

Где такие вещи брать? smile 

Автор: vikaz 21.1.2011, 16:43
нигде, только самостоятельно. Брать векторную иконку прикручивать к ней анимацию и т.д. и т.п.

Автор: Kaerus 22.1.2011, 14:05
Цитата(Rohoss @ 21.1.2011,  16:29)
Где такие вещи брать?

А стоит ли?
В Blende: 1 минута что-бы накидать иконку + 10 кликов что бы прикрутить анимацию на прозрачность

Автор: vikaz 22.1.2011, 16:06
Цитата(Kaerus @  22.1.2011,  16:05 Найти цитируемый пост)
В Blende: 1 минута что-бы накидать иконку + 10 кликов что бы прикрутить анимацию на прозрачность

Ну за одну минуту, красивую иконку ты не создашь, как не старайся, а вот воспользоваться конвертации или для создания профессиональных иконок сторонними программами специально для этого рассчитанных - это ДА!

Автор: Kaerus 22.1.2011, 16:19
vikaz
Я имел ввиду только эту конкретную иконку состоянию из креста и буквы L и анимацию свойства Opacity наложенную на триггеры событий. Что-бы такое сделать совершенно не нужно быть дизайнером.

Не надо забывать что WPF и MVVM были придуманы что-бы убрать программиста от разработки GUI

Автор: vikaz 22.1.2011, 18:22
Цитата(Kaerus @  22.1.2011,  18:19 Найти цитируемый пост)
Не надо забывать что WPF и MVVM были придуманы что-бы убрать программиста от разработки GUI 

А никто про это и не забывает! Сама суть WPF - разделить пространство разработчика и дизайнера +привнести новые возможности в разработку ПО +  уйти от старой технологии реализованной на GDI+ и user32.dll. Хотя последний еще пока используется для одной вещи. MVVM - патерн разработки, явно был придуман не для этого, а для того, чтобы структурировать код, разнести его по уровням, и сделать его более понятным и легким в обслуживании и расширении.

   По поводу дизайнеров. Я, лично, не собираюсь пользоваться услугами сторонних разработчиков GUI, как и многие другие. Во первых, таких сначала надо найти, во-вторых это стоит денег. Многие разрабатывают ПО для себя или для компании, которая явно не гонится за красивейшим дизайном. Для них главное функциональность и стабильность. 
   Можно все сделать самому, просто нужно желание. У меня тоже нет данных для рисования уникальных и красивых иконок, пользуюсь сборками. Но если сильно понравится набор и нужно чтобы он стал векторным, потрачу месяц, на то чтобы "раскурить" AI или Expression Design и обведу растр. Ясно одно,  никто не будет делать такие наборы, как предложил автор топика, а если и будут появляться , то в очень ограниченном количестве! 

Автор: Bars1992 22.1.2011, 19:18
vikaz если делаешь софт для себя то ясное дело что не обязательно парится над интерфейсом долгое время, и нанимать дизайнеров думаю тоже не стоит. Но представь что у тебя отличный заказ на какой нибуть софт, но есть ограничения по времени. Тогда и создаются команды в которых одни парятся над максимальной удобностью и приятностью интерфейса, а тругие над бизнес логикой. WPF позволил что каждый занимался своим делом и не забивал мозги интерфейсом если он работает с бизнес логикой. 

И притом в некоторых случаях всё тянуть на себе не логично: время - деньги.

Ты сказал что пользуешся сборками? Можешь дать информацию про эти сборки (использование и тому подобное), и если можешь скинуть сами эти сборки. 

Автор: vikaz 22.1.2011, 19:33
Цитата(Bars1992 @  22.1.2011,  21:18 Найти цитируемый пост)
vikaz если делаешь софт для себя то ясное дело что не обязательно парится над интерфейсом долгое время, и нанимать дизайнеров думаю тоже не стоит. Но представь что у тебя отличный заказ на какой нибуть софт, но есть ограничения по времени. Тогда и создаются команды в которых одни парятся над максимальной удобностью и приятностью интерфейса, а тругие над бизнес логикой. WPF позволил что каждый занимался своим делом и не забивал мозги интерфейсом если он работает с бизнес логикой. 

И притом в некоторых случаях всё тянуть на себе не логично: время - деньги.

Ты сказал что пользуешся сборками? Можешь дать информацию про эти сборки (использование и тому подобное), и если можешь скинуть сами эти сборки.

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

Есть несколько способов работать с вектором:
1. Экспортировать в XAML
2. Использовать http://svg2xaml.codeplex.com/.

По поводу софта. Вы сильно все идеализируете. В последнее время, заказчик стал очень внимательно изучать, кому он доверяет свой проект. Абы кому его не доверят, особенно если проект стоящий. Они попросят Ваш портфолио, оценят Вас со всех сторон, можно ли Вам доверять или нет, сможете ли Вы закончить проект в положенный срок или провалите его. 
Это конечно же мое мнение и с ним можно не согласиться!  smile 

Автор: exBlender 25.1.2011, 18:24
Цитата(Rohoss @ 21.1.2011,  09:29)
Вот что я называю иконкой на WPF
Код

<ControlTemplate x:Key="ct1">
                <ContentControl>
                    <Viewbox>
                        <Grid>
                            <Rectangle Opacity="0.1" Fill="Orange" x:Name="Rectangle" Width="254.042" Height="152.646" Canvas.Left="0.0419769" Canvas.Top="0" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF000000"/>
                            <Path Fill="Orange" x:Name="Path" Width="254.167" Height="152.5" Canvas.Left="0" Canvas.Top="0.145996" Stretch="Fill" StrokeThickness="2" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 60.9998,91.1458L 1,91.1458L 1,61.1458L 60.9998,61.1458L 60.9998,1.14606L 90.9998,1.14606L 90.9998,61.1458L 151,61.1458L 151,91.1458L 90.9998,91.1458L 90.9998,151.146L 60.9998,151.146L 60.9998,91.1458 Z M 201.5,121.646L 253.167,121.646L 253.167,151.646L 172.167,151.646L 172.167,151.146L 171.5,151.146L 171.5,1.146L 201.5,1.146L 201.5,121.646 Z "/>
                        </Grid>
                    </Viewbox>
                    <ContentControl.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="Rectangle"
                                                         Storyboard.TargetProperty="Opacity" 
                                                         From="0.1"
                                                         To="0.5" >
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         Storyboard.TargetName="Rectangle"
                                                         Storyboard.TargetProperty="Opacity" 
                                                         From="0.5"
                                                         To="0.1" >
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseDown">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.2"
                                                         AutoReverse="True"
                                                         Storyboard.TargetName="Path"
                                                         Storyboard.TargetProperty="Opacity" 
                                                         From="1"
                                                         To="0.1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </ContentControl.Triggers>
                </ContentControl>
            </ControlTemplate>

Где такие вещи брать? :crazy

Не надо брать такие вещи. Там не меняется ничего, кроме Opacity.

В реальных приложениях содается стиль прозрачной кнопки, а анимация такого типа навешивается на ContentPresenter.
Для векторных иконок создаются ресурсы - DrawingBrush'и, которые помещаются в ContentPresenter, типа:

Код

<StackPanel Style="{StaticResource IconButtonsPanel}">
      <Button>
         <Rectangle Fill="{StaticResource Icon1}" />
      </Button>
      <Button>
         <Ellipse Fill="{StaticResource Icon2}" />
      </Button>
   ...
</StackPanel>

Анимация создается один раз и в приложении работает для всех иконок этого типа одинаково.
Можно написать extension, - xaml будет выглядеть еще проще.

Автор: Bars1992 25.1.2011, 19:55
vikaz прости меня нуба но я все никак не пойму что нужно скачивать с того сайта, который ты мне дал, и как эго использовать.

Например нашел векторные рисунки контролов в EPS формате. Но как конвертировать EPS в XAML так и не нашел. Просмотев ище несколько примеров, я заметил что там почти всё в EPS. 

Если не сложно можешь описать весь процес как ты создаешь стиль, с уровнем детализации который не лень написать smile

Автор: Rohoss 25.1.2011, 20:53
Bars1992, используй утилиту http://www.microsoft.com/expression/products/design_overview.aspx

Добавлено через 1 минуту и 22 секунды
Цитата(exBlender @  25.1.2011,  18:24 Найти цитируемый пост)
Не надо брать такие вещи. Там не меняется ничего, кроме Opacity.

Я знаю, так как сам это создавал. Но ведь могу быть иконки и более красивые...

Автор: vikaz 25.1.2011, 21:24
Цитата(Bars1992 @  25.1.2011,  21:55 Найти цитируемый пост)
ikaz прости меня нуба но я все никак не пойму что нужно скачивать с того сайта, который ты мне дал, и как эго использовать.

Например нашел векторные рисунки контролов в EPS формате. Но как конвертировать EPS в XAML так и не нашел. Просмотев ище несколько примеров, я заметил что там почти всё в EPS. 

Если не сложно можешь описать весь процес как ты создаешь стиль, с уровнем детализации который не лень написать smile 

Конечно камрад. Есть http://www.mikeswanson.com/xamlexport/ для AI (Adobe Illustraition), он позволяет экспортировать XAML. Это первая возможность. Вторая - использовать формат SVG и использовать http://svg2xaml.codeplex.com/ для его отображения в WPF

Добавлено через 1 минуту и 19 секунд
Цитата(Rohoss @  25.1.2011,  22:53 Найти цитируемый пост)
Я знаю, так как сам это создавал. Но ведь могу быть иконки и более красивые... 

В этом нет смысла. Так как в основном анимация накладывается не на иконку, а на кнопки и др. элементы! 

Автор: Bars1992 25.1.2011, 23:39
vikaz огромнишее спасибо smile

Да, пользуясь таким количество backgrounds, controls, icons с сайта http://allday.ru можно создавать очень красивые и высокофункциональные программы

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)