Вы находитесь на странице: 1из 211

Web-

Web-
Photoshop.


Web-

1.0

2015

www.RafalTomal.com
Samigg Skladchik.com

.
.

.
-,

Web-.

,
.

, ,
-,
-. , , ,
-.
- ,
. , ,
,
.
. ,
.
. ,
.
, , .
, , , ,
, .
,
-. , , -,
.
- , Twitter, LinkedIn, Google+,
.
!

Web-. . Samigg. Skladchik.com


1:

........................................................... 5
2:

.................................................. 12
3:

......................................... 25
4:

.............................................. 44
5:

..................................................... 63
6:

................................................................... 98
7:

..................................... 126
8:

.....................................163
9:

.......... 202

Web-. . Samigg. Skladchik.com

!
2002 .
-: , ,
, , ,
, , ,
, , ,
.
10 , .
5-
. , ,
(
).
, , ,
.
.
, ,
.
:

. ,
.
, .
,
, ,
.
,
-, :

, . ,
, -
, . ,
, , !
.
.
, ,

?

-. .
- ,
, ,
.
WordPress
ThemeForest.net CreativeMarket.com.
, -
.
,
.
. ,


.
.

, .


. ,


.

Adobe Photoshop.
,


-.


Photoshop..

,
. ,
,

.


, .
.
, ,
. ?

?
,
, ,
. -
,
, .
,
. ,
.
, ,
, .

.
, ,
: . . , .
, -
, .
,
- . .
,
.
, , ,
. ,
, , ,
.


?
,

, ,
,
.

, -
. , .
- ,
, .
.

?
Adobe
Photoshop,

.

CC (14.0),
CS 4.0+,
.
PS
,
. ,


.

,
Photoshop , .

Adobe.

!
- .
, ,

.

,
. ,
Designers Area .

, !
Web-. . Samigg Skladchik.com

10

,
(UX-, , )
,

.
,
.
,
. ,
.

-. ,

.
,
-, .
:

Web-. . Samigg Skladchik.com

12

( )
, , ,
,
. , ,
, ,
.

.
, ,
.

. ( 3)
, , ,
,
. ,
, .

. ( 5)
,
-. .
,
.
,
.
,
.

. ( 6)
, ,
. ,
, ,
.

. ( 7)
-
, -
.

. ( 8)

, ,
.
Web-. . Samigg Skladchik.com

13

.
, ..
.

-
. ,

. , ;-)

, , , .
, Photoshop.
,
, ,
.
, , .
, ,

. .
- , -
.
. , .. ,
.
,
. ,
.
:

.
.

.
.
.

Web-. . Samigg Skladchik.com

14

,
.


: ?.
, .
? ? ? .
.
, - .
.
, ,
. .
, . ,
, .
?
, ,
.
- , , ,
. -
.
,
, . ,
, .
-
.
, .
Web-. . Samigg Skladchik.com

15

- , ,
, , . -,
.
, , ,
. - ,
.

.


- .
, . ,
, .
, ,
. ,
: ?
,
. ,
. . ,
.
.
, :
1. -,
.
2. , , ,
/, ( )
.
3. , .
,
, , ,
.

Web-. . Samigg Skladchik.com

16


.. .
- , . - ,
- .
, ? ,
? ? ?
()
/.
.
, , , -,
, , .
, 16+. ,
, , .
..
. ,
, -. ,

- , .


,
. ,
A Project Guide to UX Design.


- .
, -,
,
.
, , ,
, .
, ,
.
,
, . PSD-
( , , ..)
( -), .
Web-. . Samigg Skladchik.com

17

.
,
.

, , .
, .
, .. ,
, !
, :


:


:




:




PSD

, ,
.
.

,
. , ,
, .
,
:

Web-. . Samigg Skladchik.com

18

Basecamp.com
Basecamp - .
, ,
.

Trello.com
Basecamp, Trello .
( ),
.
.

Web-. . Samigg Skladchik.com

19

InVisionApp.com
InVision ,

. ,
.

Viewflux.com
Viewflux - ,
. , ,
.

Web-. . Samigg Skladchik.com

20

-.

,
, .
.
,
.
-.
, - ,
.
, .
-, ,
, .
. ,
, -..
:

,
. , ,
.

Web-. . Samigg Skladchik.com

21

-.
,
, , .
, ,
. .
. :

Slickplan.com

Lucidchart.com

Web-. . Samigg Skladchik.com

22

Gliffy.com

OmniGraffle.com

Web-. . Samigg Skladchik.com

23



. ,

.
-
, .
,
.

. . ,
,
- . , .
, :

.
. ,
. ,
, , . ,
, , , ,
.
, .
, .
, ,
, .
. ,
.
,
, .
,
.
Web-. . Samigg Skladchik.com

25

.

.

.
,
, , .

.
. .
, .
,
.
,
.
.

.
.
.
.
15 . , , ,
, , .

Web-. . Samigg Skladchik.com

26

.
. ,
, .
, , .
.

.
, ,

. ,

.


.

.
.

Evernote Google Drive


, ,
. ,
, -
.

, .
, ,
- - -.
,
.
.
,
.

your.
, : !
, , .
.

Web-. . Samigg Skladchik.com

27

, .
, .
. , - .
, ,
.
-
Photoshop . ,
, ,
.

Web-. . Samigg Skladchik.com

28

, ():

.
, ,
. , .

.
,
. .

.
,
. ,
. .
.

.
, ,
. . .
, ,
,

.
, :

..


.
. ,
,
.
,
, ,

.

, Faber-Castell
(fabercastell.com).
Web-. . Samigg Skladchik.com

29

,


.

Action

. ,


,

Method.
,


.

.

.

Designers Area -.
,
.
,
.


- .
,

, .

, . ,
,
.
Web-. . Samigg Skladchik.com

30

, - -
.
. - .
,
, .
.
, .
,
. , ,
. ,
, .
.
, .
:


Dribbble.com
Dribbble ,
, .
. 400300
( 800600 retina),
, ,
, , , ,
...

Web-. . Samigg Skladchik.com

31

Gridspiration.com
,
Dribble.

designspiration.net
.
, ,
.

CSS
CSS ,
. CSS galleries,
,
HTML/CSS flash..

CSSRemix.com

CSSMania.com

Awwwards.com

Fltdsgn.com

Web-. . Samigg Skladchik.com

33


, ? - ,
:

color.adobe.com

colourlovers.com

Web-. . Samigg Skladchik.com

34


-
:

typespiration.com

typecache.com/fonts-in-use

justmytype.co

Web-. . Samigg Skladchik.com

35

-
- ?
, . ,
.

.
.
, .

.

.

Offscreen

magazine

(offscreenmag.com)

.
, ,
. , .
.

.

,


.

, ,
.

, ,
.

, .


, , ,
.

.

Web-. . Samigg Skladchik.com

37


.
,
- .

, .
, , ,
.
, , , ,
,
. ,
.
?
, - .
, ,
. ,
.

-.
, .
.


,

.

.

.

,
..
38

,

.

-,
,
,
, ..
,
,
,

.
,
.
, ,
.

, .
.
, .
: ,
, .
4 :

Web-. . Samigg Skladchik.com

39

.
, .
- ..
, ,
.

,
.
, ,
.
: , .
.
.
. , Photoshop..

Web-. . Samigg Skladchik.com

40

. ,
, +
.
, .
, .

, e-mail.
, . ,
.

Web-. . Samigg Skladchik.com

41

.
, .
. , ,
.
, .

, , ,
,
. ,
,
.
,
,
.
.

Web-. . Samigg Skladchik.com

42


.

,
.

,



.
,
.
, .
, , , -
,
. .
.


.


.
, , .
,
.

Web-. . Samigg Skladchik.com

44

, ..
, .
:

::

Project Name.
. ,
. - .
.
, , client folder.
, .
.

: Logo Design, Print Design ..

Assets.
,
. , -
-.

Web-. . Samigg Skladchik.com

45

, ,
, , , , .
- -
,
.

Web Design.
-,
( ).
, :
_Archive !
- , ,
_Archive. ,
. ,
. , .
PSD ,
, , ..
PSD-,
.
Preview ,
. PNG, PDF JPG.
, .
Sketches -
. - ,
, .


, .
, , - PSD ,
. ?
:

.
.
.
.

Web-. . Samigg Skladchik.com

46

CompanyName_HomePage.psd
CompanyName_LandingPage-rev3.psd
ProjectName_IntroPage-John-rev1.psd

, , .
, ,
.
,

PSD .
, .
,
, .
,
.


,
,
, ,
.
Photoshop , ,
Photoshop, .. .
,
. ,
-, ,
.
- ,
, . ,
, ,
, ,
.

Web-. . Samigg Skladchik.com

47

, ,
( 2015 )
,
(RafalTomal.com).
.
,
:

Adobe Photoshop.

. , .
.
, ,
. ,
, , ..
Photoshop ,
.
-. Adobe
Adobe Edge Reflow.
PSD
.
, .

Web-. . Samigg Skladchik.com

48

Adobe Fireworks.

Photoshop. , Adobe
Fireworks; ,
.
Adobe , ,
Fireworks,
Fireworks.

Sketch.
Sketch - Photohop,
-. Photohop
, Sketch
.
, Sketch ,
Retina.
, , ,
..
Sketch ,
Photoshop..

Web-. . Samigg Skladchik.com

49

Webflow and Easel.


,
.
. , ,
.
,
HTML CSS.
. ,
, .

Designing in the browser.


, .. ,
Photoshop -.
, HTML CSS.
, -, ..

Web-. . Samigg Skladchik.com

50

Adobe Photoshop (
2015) , , .
, , ,
.. , ,
.
Photoshop
.
,
.
Photoshop -.

- PSD .
,
Photoshop, , (Slicy)
HTML CSS (Cut&Slice).
Adobe Photoshop -.

Photoshop
Adobe Photoshop
, -.
.
, Photoshop
-.


.. ,
.
- .
, .
2 :

RGB (Red, Green, Blue).


, .

Web-. . Samigg Skladchik.com

51

CMYK (Cyan, Magenta, Yellow, Black).


, .
, RGB ,
-. ? ,
... , ,
RGB; sRGB, Adobe RGB ..
,
RGB .
, Adobe RGB (1998) ..
, sRGB. , Adobe RGB
, - .
sRGB,
HP Microsoft 1996 .
sRGB , , ,
Photoshop , .
sRGB .
, 100% ,
, .. . ,
, , .
,

Photoshop.
, Edit -> Color
Settings (Shift+Command+K

Shift-Ctrl+K). , Adobe

North America General Purpose 2.
,
. ,
OK.

sRGB
IEC61966-2.1
PSD ..

- ,
.
Web-. . Samigg Skladchik.com

52


,
.
.
- 1140 150
, .

72 DPI (Dots Per Inch - ) PPI (Pixel Per Inch - )


, . ,
..
DPI/PPI .
. DPI/PPI ,
, . print.
, , PNG GIF
DPI/PPI. , , .
, . ,
, , Retina Apple. ,
, ,
.

Retina.
2x ...

...
,

.

, :
: 1x size ( ) 2x ( retina).

,
.
, Photoshop ,
:

1x.

-.
,
, Retina.
Retina, Photoshop .
, .

2x.
, ,
. , ( ,
) 2 .
, .
.
Retina , .
, 50%.

Web-. . Samigg Skladchik.com

54

, .
. 2, ..
Retina Photoshop. -
.
,
.

, CSS HTML.
,
-. , ,
assets .


- Photoshop.
, .
Photoshop - ,
.
.
Adobe Photoshop .
,
. ,
.
, , ,
. Window .
, , -:

Navigator

Info

.

.

Web-. . Samigg Skladchik.com

55

Character

Paragraph

,
, ..

History

Layers



,

, .

Paragraph Styles

,
,

.

,
.

Character Styles

character.

.

Window.
,
Window -> Workspace -> New Workspace ,
, .
, Window -> Workspace
.
.
, 15 .

Web-. . Samigg Skladchik.com

56

, , Styles, Adjustments,
Properties, .. ,
.
:

Web-. . Samigg Skladchik.com

57


- PSD-,


.
, ,
.
.

PSD Designers Area


-.
.

Photoshop, File -> New.


:

2280x2400 72 DPI, ,
, Retina (,
1 1140x1200 ). ,
RGB OK.

Web-. . Samigg Skladchik.com

58

, :

, .
, . Image -> Canvas Size 600
, 2880 :

Web-. . Samigg Skladchik.com

59

, 300 ,
.

.
,
.
:

,
.
, // .
- Colors and Trash,
. * ,
.
* Colors , *
Trash , , .
Web-. . Samigg Skladchik.com

60

* Trash
. , .
:

.
, ,
-, , ,
.

Web-. . Samigg Skladchik.com

61

?
- ,
.
:


(leading) (tracking).
..
. - ,
.
,
. .
.
,
.
, , (leading),
(tracking) ..

Web-. . Samigg Skladchik.com

63


, .
- . ,
.
.
. ,


,
:
The Elements of Typographic St yle.


?
-?
, .
?

- Copyblogger.com .

, ,
-. , - 90%
. , ,
,
- .
, -.
, ,
.
-
.

, ,
.

,
. , :

.

-.
Photoshop, - ,

. , -
.
,
@font-face CSS, ,
.
, , ,
.
@font-face, . ,
, .
, .
, ,
-,
.
,
.
Web-. . Samigg Skladchik.com

65

Google Fonts.

Google . Google Fonts


,
Photoshop
.

Adobe Typekit.

The Essential Web Design Handbook

66

, -.
Typekit
, Google.
Adobe Cloud,
Typekit Photoshop Adobe.

.
-. PSD
Photoshop Mac Windows,
HTML/CSS,
. Safari, Google, Firefox Internet Explorer
. Mac OS, Windows Vista, Windows 7/8.
, , ..
Photoshop,
.

. ,
.

,
. , ,
, .

.
,

.
Web-. . Samigg Skladchik.com

67

(StudioPress.com),
.

.
,
, -

.
- . -
. ,
, , -.
, -
.
,
? ,
, ,
. , , ,
.

The Essential Web Design Handbook

68

.
.
:

Serif ( ).
- .
,
. ,
. ,
.
.

Sans serif ( ).
, .
, ,
. ,
.
.
.

Web-. . Samigg Skladchik.com

69

Slab serif ( ).
.
, , ,
, .
,
.

Script ().

. ,

, , .. .

Blackletter ( ).
-
.
.

Web-. . Samigg Skladchik.com

70

Handwriting ( ).

. .
- ,
. , - ,
.

Decorative ().
.
.
, .
, .

,
. ,

.
-, ,
.
Web-. . Samigg Skladchik.com

71

, . ,
(
).
, , ,
, , , ..
.
, , ,
..

.

.

Web-. . Samigg Skladchik.com

72

-, . -
, .
. ,
, , ,
.

, .
.
,
.

.
.

-, ,
- .
.
.. .

Web-. . Samigg Skladchik.com

73

:
.
,
, . ,
: ,
. ,
,
. ,
.

vs.

( ),
( ).
, ,
.

;
,

-
,

,
, .

..
,
,

.
- .
, , .. . Star Jedi ,
.
, , .
Web-. . Samigg Skladchik.com

74

.
I 3- (
, )
.
:
1. , Google Fonts
Typekit,
.
2. ,
.
3.
.

.
, ,
.

. ,
,
. .
-
, .

Merriweather



,
-
.

Web-. . Samigg Skladchik.com

75

.



.

Typekit.com

Futura PT Heavy
,
.


31Three.com
:
Sentinel (serif slab)
:
Gotham Narrow (sans-serif)
,

,

,

..

. ,
,
.

76

avclark.com
:
Freight Text Pro (serif )
:
Freight Sans Pro (sans-serif)
-,

. , ..

,
.

,

.

FocusLabLLC.com
:
PMN Caecilia (slab serif)
:
Gill Sans (sans-serif)
Focus

Lab


.


.


.

CirclesConference.com
:
Proxima Nova (sans-serif)

:
FF Tisa Pro (serif )

, .

.

,

ElliotJayStocks.com
:
Skolar (serif )
Elliot


. ,

-
,
.

LiftUX.com
:
Brandon Grotesque (sans-serif)
:
Freight Text Pro (serif )


.
,
.
,
.
.



, ,
,
.
, .
. ,
.
.
,
. :

.
-
. : ,
. , ,
( ), , ,
, .

.
,
, ,
. -
,
.
Web-. . Samigg Skladchik.com

79

.
,
- , .
, . , ,
.

Letterspace ( ).
,
. , ,

.

Web-. . Samigg Skladchik.com

80

Leading ( ).
- ,
. ,
. , ,

.

Space ().

.
.

Web-. . Samigg Skladchik.com

81


- ,

.
,

.
.
,
.
,

. .
, - ,
:

, ,
- .

Web-. . Samigg Skladchik.com

82

-. ,
,
.

, ?
. ,
,
, .
, , , ,
.
. , 1 6
. (
, 1 )
.

Web-. . Samigg Skladchik.com

83

.
H1.
, ,
:


, ,
: 16 , 18 H4/H5/H6, 21
H3, 24 h2 48 H1

/
. ,
.
,
. :


1.5. , 18 pt
Web-. . Samigg Skladchik.com

84

26-28 pt.
, . ,
30 pt, 1.25
. .
,
. ,
,
. ,

.

.
, , ,
. ,
.
, . ,
.
, , .

.

. ,
.

55 100 .
100 .
, , ,
, 100 .

Web-. . Samigg Skladchik.com

85

, 600 ,
16 ,
85 . ,
1.5.
16 24 ,

. 600 ,
25 26 .

.
,
(16 - 20 )
Golden Ratio Typography Calculator ,
,

CPL (Characters Per Line - ).

.
, ,
.
?
. .
, :

,
, ,
.
Web-. . Samigg Skladchik.com

86

24
:

-, ..
.

. ,
, , .. , .
,
:
1. , 24 .
2. ,
, - .
48 24
. ,
, 12 .
3. ,
, , 16 24 32
, 48 (2 24 ) ..
Web-. . Samigg Skladchik.com

87

4.
.

.
.
- . ,
, ,
.

,
. ,
-.
.
- , ,
.
, .
,
, ..
, .

,
,
.

Web-. . Samigg Skladchik.com

88

..

. ,
.
,
.
,
.
, , :

Web-. . Samigg Skladchik.com

89



-
- -
,
,
-.
-
, .
, , ,
.
..
.
, .

Designers Area -.
.

-,
.
.
.
.

. ..
.
Google 5 5
, :

, Photoshop, 10 ,
. 25 , 5
5 .
, . 5
, :

,
, ,

:
Merriweather
() + Open Sans
( ).
,

Merriweather.

Open
Sans,

.
Web-. . Samigg Skladchik.com

91

-
. -, ,
special, .. .
-, , ,
, .
, ,
, .
-,
. ,
. ,
.

1 ,
6- , , . ,
, , (
)..
( 84)
: 48 (1), 36 (H2), 24 (H3), 22 (H4 -
21 ), 18 (), 16 ( ),
14 (H6).
1 4 ,
. . , 1.33
1.5 .
, .
Web-. . Samigg Skladchik.com

92

, .
, .

5 6 .
.
5 , ,
, 6 ,
.

. Open Sans 18
.
. , 1.66
30 .

Web-. . Samigg Skladchik.com

93

1.5, ,
.

. ,
.
Merriweather. .

, . .
,
. .

. -
Photoshop.
Photoshop, Window -> Paragraph Styles.

-. ,
,
, ,
Paragraph Styles.
- ,
, Redefine
paragraph style by merging Overrides. ,
.

Web-. . Samigg Skladchik.com

94

, .
, .
.

Adobe
Photoshop, Adobe,
.

,
PS-
project files .
! .
-. , ,
,
. ,

.
-
. , .
, .
, -.

Web-. . Samigg Skladchik.com

95

16

,
,
,

.
.
.
,

. ,
,
.
,
. ,
.
,
-. ...


-
: ,
( ).
1706
, , ,
. ,
, :

, :

.
:

?

.
, .
.

Web-. . Samigg Skladchik.com

99

,
:

Web-. . Samigg Skladchik.com

100

Web-. . Samigg Skladchik.com

101


, .
: .

. ,
..

.

, .
.

, ,
, .

, , ,

. ,


..

,

.

,
,
.


.. ,

.

Web-. . Samigg Skladchik.com

102

,
,
.
.

. , ,
.
,
.
, .
:


.
.
. .


- . ,
.
.

Web-. . Samigg Skladchik.com

103

.
, ,
. , ,
, . ,
.



- ,
.
- .
,
.
, 5
. , ,
.

The Essential Web Design Handbook

104

3 4 . ,
, :

.
, ,
. , ,
.

. .
, , ,
. .
,
, , .

.

.
.

.
, .
,
.
.
Web-. . Samigg Skladchik.com

105

,
. ,
,
. , - .
, ,
.

, -,
. ,
. .
.

.
.
.. , . ,
.
.
, .
.
..
. ,
.

..
. ,
-, .
Web-. . Samigg Skladchik.com

106

.
,
. , ,
.
.
-.
, .
, ,
, -. ,
, -.
.

-
. ,
- .
. ,
- , ,
.

, ,
.

. , , ,
.
, . ,
.

Web-. . Samigg Skladchik.com

107

-
, .
.
. .

teamtreehouse.com
teamtreehouse.com


.
-

.

.



,
.

sachagreif.com
- sacha
. ,
,
. ,



.

-


.

Web-. . Samigg Skladchik.com

108

greyp-bikes.com

.

.

,
.
, ,
.

InVisionApp.com

InVisionApp.com


.
.
..


. ,

,

.

,

.

getnarrative.com
-


.

.

,
.
,
.

.

109


,
.
.
, .

COLOURlovers.com
Colourlovers -
. ,

.
: , , , , , , .
, .

color.adobe.com
Adobe Color . Adobe Color

Adobe,
. ,
,
, ,
.

Web-. . Samigg Skladchik.com

110

Google Images
, ?
red color schemes Google Images ,
.
, ..
.

Nature
Nature - .
. , ,
.

-..
Web-. . Samigg Skladchik.com

111



,
. ,

.
,
. -


, .
- , , ..
.
,
.
- ,
, .

, . ,

.
, , , .
,
. .
.
-
. .

,
.
, .
, ,
.

Web-. . Samigg Skladchik.com

112

- , , , , , .

, .
,
.
,
.
. ,
/ .

moresleep.net

wufoo.com

thedesigncubicle.com

- , , , , , .

. -
.
.
..
.

Web-. . Samigg Skladchik.com

113

.
,
.

newrainmaker.com

briandelaney.com

nl-recruitment.com

- , , , , , .

- .

..
.
-.
,
.

radicaltesta.com

semplicelabs.com

Web-. . Samigg Skladchik.com

vangoghmuseum.nl

114

- , , , , ,
, .

, , .
.
,
.
, /
/.

presidentti3d.paulig.fi

alectia.com

clementgrellier.fr

- , , , , .

- , .
. , .
, , . -
.

Web-. . Samigg Skladchik.com

115

.
,
.
,
.

designawatch.mijlo.com

getdonedone.com

tastecreative.com

- , , , , ..

,
, , .
-, , ,
.
.

vseonet

nunomen.co

gomistrip.com

Web-. . Samigg Skladchik.com

demo.bootstraptor.com/blocks.html

116

- , , , .
.
, .

.
.. -
.

mediatemple.net

thenothingapp.com

iphone.artsy.net

- , , , .
, ,
,
, .
-, , ,
, ..
.color.

gosquared.com

cactusformac.com

Web-. . Samigg Skladchik.com

serious-studio.com

117



, ,
. ,

-.

, , , .
hex RGB.
, CMYK Pantone.
,
. , ,
.
. , , ,
.

.


from Designers Area -.
..

.
, . ,
, , .
, - .
, ,
. ?
Color Picker Photoshop. .
PSD
* Change colors here. ,
primary - double click. -,
.
Color Picker.

- Photoshop,
.

Web-. . Samigg Skladchik.com

118

Make , H .
,
. ,
..
, .

.
,
, . , ,
. ?

,

,
.

.
,

.
,
.

Web-. . Samigg Skladchik.com

119

, , , .
.
, ,
.
. ,
. - .
, , ,
. ,
, .

. ,
,
. ,
secondary.
, -
, . ,
, -.
-
. :

Web-. . Samigg Skladchik.com

120

.
( ), .
.

( ) .
,
.
Adobe Color ( Adobe Kuler).
, :

Web-. . Samigg Skladchik.com

121

,
.
,
-. hex-,
Adobe Color
Photoshop color picker.
,
, ,

/ -
.
.
3 , .

Web-. . Samigg Skladchik.com

122


.
.
.
,
.

.
, ,
Color Picker .
,
, .

.
, .
( ).
,
. , .
.
,
. ,
, .
,
. , ,
.
, , , ,
. ,
, , , ,
.
,
.
, -.
.
,
, .
.

. .

Web-. . Samigg Skladchik.com

123

-.

-
,
.

.
-, ,
, , - .

.
:

Web-. . Samigg Skladchik.com

126

?
,
:

.
,
.
,
.
,
.
, ,
, , .

.
-.
,
.
.

.
.
.

. ,

.

.


-.
- .
.
, ,
.
, . ,
,
.
Web-. . Samigg Skladchik.com

127

?
, :

.
- .
-, ,
, .

..

.
,
( ). ,
.
Call To Action,
, .

.
,
.
-. , ,
,
-.

.
,
.
-.
, -, .
.

.
- -
. ,
, ..


, .
. ,
.

Web-. . Samigg Skladchik.com

128

, :

Adobe Photoshop.
,
Photoshop. ,
Adobe
Photoshop. Adobe Photoshop

. ,
,

.

free web
design resources -.

Adobe Photoshop.

Wireframe.cc
. . - ,
.
. ,
- URL.
.

Web-. . Samigg Skladchik.com

129

Creatly.com
- Creatly .
,
, .
. ,
.

Balsamiq.com
Balsamiq Creatly.
, . .
, , .
.

Web-. . Samigg Skladchik.com

130

Mockflow.com
,
, .
Basic.

Solidifyapp.com
,
.

. ,
.
,
. ,
-
.

Web-. . Samigg Skladchik.com

131

,
.

.
.

-?
- , -
.
.
,
. ,
, .
.

, -
,
-.
, , .
Web-. . Samigg Skladchik.com

132

- - . , ,
-. ..
-,
.
, ,
:

.
- , .
, .
.
,
.
.
,
(- ).
,
.
, , , 4- (
) -
. 4
1 .
.

Web-. . Samigg Skladchik.com

133

, , 100%
.
.
- ,
.

,

(100% ) .
, ,
- ,
.
,
Photoshop (
Adobe Edge Reflow).
.
.
, -
,
. , , ,
.

Web-. . Samigg Skladchik.com

134

.
.
,
, .
- ,
.
. , ,
.
,
(
, ),
, ( )
.

.
.
- ,
.
.
,
.

Web-. . Samigg Skladchik.com

135

: .
,
:

, ,

:

,
.
, .

Web-. . Samigg Skladchik.com

136

.

.

. - ,
.

,
Photoshop Snap to Guides View.

.
, .

Web-. . Samigg Skladchik.com

137


- ,
. ..
:

,
. ,
.

-.

Web-. . Samigg Skladchik.com

-.

-.

138

, ,
.
, ,
, - .
:

.
. ,
, ,
.
. ,
.

,
. ,
,
.
Web-. . Samigg Skladchik.com

139


, ,
, .

.
- .

.
,
.
, .
50 ,
50 :

,
, .


. ,
2
.
.

, . 2
3, .

, .

. ,
. , .
.
,
.
.

Web-. . Samigg Skladchik.com

141

- .
, , -
.
, .
.
. .

. .

The Essential Web Design Handbook

142

, ,


.
.
. , ,
1920-. ,
.
, -, ..
. ,
, :

.
- ,
, -
,

.
HTML/CSS,
,
.


.

.


.


..

Web-. . Samigg Skladchik.com

143

.
-,

.
,
.

.
, , .
, , , ,
.
, .
.

Web-. . Samigg Skladchik.com

144

, 12 , . 12
, 4 , .
, 16 , ,
. , 8-
, 3 .
12 - , ,
.
, - ,
, .
, Photoshop, .
, ?
,
.
,
.
, 1140 , ,
12 , 11 .
, 12 :

11 x 12px = 132px
132 -

1140px - 132px = 1008px


1008px / 12 = 84px

, 12 84 11
12 . 1140 .
, ,
.
Photoshop .
Photoshop CC 2014, ,
Guide Layout. View -> New Guide Layout.
.
Photoshop, ,
GuideGuide .

Photoshop
free web design resources -.
, 12
.

, , .
, , ,
, -
.
, 12 , ,
, .. CSS .

Web-. . Samigg Skladchik.com

146

CSS -
. ,
,
.
CSS ,
, PSD : Foundation, Bootstrap,
960.gs, YAML.
,
-. .
,
, .
, ,
- .

-
, ,
- , .

, 12 - wallpaper.com

, 8 -22.com

, 16 - pulseapp.com

Web-. . Samigg Skladchik.com

148

, 12 - fontsinuse.com

Web-. . Samigg Skladchik.com

149

.
..
,

.
, .
, , .
Adobe Photoshop :
Photoshop Wireframe Kit Photoshop Starter Template.

Photoshop Wireframe Kit


Photoshop Starter Template Designers Area -.

,
, .
.

.
Wireframes ProjectName-Home.psd.
. (command + ; Mac, ctrl + ; Windows)..

The Essential Web Design Handbook

150

12 ,
. ,
.
"*Trash" "*Colors" .. . ,
.. .

PSD- .
.
, ,
. Photoshop Wireframe Kit .
, ,
, ..

Web-. . Samigg Skladchik.com

151

Rectangle Tool
, .
. Wireframe Kit,
: , , . :

, .
, 75%, 30%.
.

, . ,
12 , (3 4)
, , ,
.

. , 3
. .
.

, 4
. 4 (4 3). ,
12 , 3 4 .

Web-. . Samigg Skladchik.com

153

, ,
:

. ,
.
wireframe kit .
, "*Notes",

:

Web-. . Samigg Skladchik.com

154

. ,
. ,
, .
-. ,
.
- , , , .
:

, ,
. , (8 + 1 + 3).
.
, .


. -
. !

Web-. . Samigg Skladchik.com

157

:
. . ,
,
.
.
, ,
.
. ,
.
:

Web-. . Samigg Skladchik.com

159

The Essential Web Design Handbook

160


, Photoshop. . ,
,
, .
,
. ,
. , ,
. !
, , ,
, .. !

Web-. . Samigg Skladchik.com

161

?

-.

,
-.
, ,
Photoshop .
, .
,
.
, ? ?
. - .
, .
,
CSS/HTML . ,
: , ,

.

.
.

.
-.
Web-. . Samigg Skladchik.com

163

, . ,
.
.
, - ( -, ,
) ,
.

.
,
,

Web-. . Samigg Skladchik.com

164

, , , ,
.. ,
, . ,
.
-, .
,
. .

, .

. ,
, .
,
.
, .
, :

, , ,
.
.
-.

Web-. . Samigg Skladchik.com

165

.
. ,
.
.
,
.
,
, .
.
.
,
. (,
!) , ,
. ,
, . ,
.
, !
1

,
Photoshop , PSD-.
ProjectName-Home.psd. .
. .
.
,
. ,
,
:

,
Photoshop. , ,
- .
, ,
. , Load Paragraph Styles Paragraph
Styles.

PSD-.
,
.

.
, .
.
. ,
.
,

. ,
.

Web-. . Samigg Skladchik.com

167

PSD- ,
, ,
. ,
.
, .
. Rectangular Marquee Tool

. 700 (, ,
700pt 1400 ,
144dpi), .

Rectangle Tool
(10 ) .
.

The Essential Web Design Handbook

168

, , ,
. .
PSD- clipping mask,
.


Unsplash.com. Unsplash
Creative Commons Zero. ,
, ,
.

clipping mask ,
Create clipping mask.
, , .

opacity: 30%, ,
. ..
.
..
, ,
. . 100

Web-. . Samigg Skladchik.com

169

: 100
50 (
).

-, .
, 24pt .
..
. -,
: Home, About, Services, Blog, Contact.
, Heading 5
12pt, .
, , ,
.

The Essential Web Design Handbook

170

, opacity: 30% ,
home 100% .
.
( 350 ). ,
. Heading 1 ,
.
Title.

250 . .
Heading 5 .
Subtitle. ,
, .

171

, - . :
. ,
. ,
.
.
( ? )
,
.
( Heading 5)
.
, (
,
).

Web-. . Samigg Skladchik.com

172

.
. , .

. 100
. 50
. ,
. Heading 2
Subheading . , .
Heading 2.
, , ,
. ,
.
- .

Web-. . Samigg Skladchik.com

173

. ,
3 .
,
. Heading 3
.
,
. 1 , 2
3 .
4 5.
50 .

Web-. . Samigg Skladchik.com

174


.

. ,
. ,
(
).:-)

. ,
, . ,
.
Learn More, Find Out More, Read More, Get Started
.
50 .
Small Paragraph ,
30% , .
. . ,
, .

Web-. . Samigg Skladchik.com

175

, .
.
. .

, 100 .
. :

Web-. . Samigg Skladchik.com

176

, .
, :

. ,
, .
, 3 .
,
Paragraph . -,
. , ( clipping mask,
)
, Heading 3. (Small
Paragraph) Twitter ( Subheading ).

The Essential Web Design Handbook

177

,
.
, read more.
Character Style ( )
. , .

, .
, :

, 100 100 .
. 8
, 4 .
, , border 1
.

12
.
0,75,

4:3..

178

See More Projects


50 100 .
,
. ,
.
, ,
. - ,
.
.
Clipping Mask, .

.

Web-. . Samigg Skladchik.com

179

: .
. ,
:

, .
Blockquote .
,
, .
Heading 4 Small

Web-. . Samigg Skladchik.com


The Essential Web Design Handbook

180

Paragraph.
.
, ,
.

.
.
50
. ,
.
..
, .
.

. ,
,
.

. ,
. .
, ,
. , 20%
100% .

Web-. . Samigg Skladchik.com

181

. ,
Contact Me
Contact .
- , , .
.
- opacity: 95%. ,
, ,
, ,
- .
, .
. -
.
// CONTACT FORM .
-
- , .

Web-. . Samigg Skladchik.com

182

,
, ,
.

. ,
,
.

,
. ,
. , .
.
, .

Web-. . Samigg Skladchik.com

183

The Essential Web Design Handbook

184

, ,
, .
,
.
.
,
.
. ,
,
, .
. ,
.
, , ,
, .



.
,

. , ,
-.
, - .

. PSD-

.
, , ,
.
, . ,
- , -.
, ,
.
, , .
, .
Web-. . Samigg Skladchik.com

186

- PSD- -Page.psd.
, ,
.
, .
, . * Trash, // HEADER, //
INTRO, // CTA, // FOOTER and // MAIN BG.
, .. .

.
. ,
.
50
100 . ,
. - , clipping mask,
. .

The Essential Web Design Handbook

187

, Home About.

, ,
.
.

//MAIN CONTENT.
(Heading 3) . ,
. , ,
.

The Essential Web Design Handbook

18 8

,
. ,
.

,
. ,
. :

The Essential Web Design Handbook

189

! .
// MAIN CONTENT
// CONTENT - ABOUT // CONTENT - SERVICE ..
.
, .


:
.
,
,
, .
, , .
.
PSD-
ProjectName-Blog.psd. ,
,
.

PSD- // MAIN CONTENT.


My Blog .

Web-. . Samigg Skladchik.com

190

100
. .

. .
.

-, .
8 , 4
.
,
50 .

,
clipping mask. (Heading 2),
Continue Reading. 50
100 ,
, .
Web-. . Samigg Skladchik.com

191

, .
.
, .
.
, .

The Essential Web Design Handbook

192

:
Merriweather Open Sans.

,

-.


,
.

.
, ,

. ,

. :: Post
1 :: Post 2.
100
.

100
..

The Essential Web Design Handbook

193

, - .
.
.

100 ,
.
, .

, 4 . ,
,

.
Email
Newsletter.




.

194

(Heading 4), email,


Sign Up. e-mail:

,
(Heading 5) (Small Paragraph).

, ,
, . -
, -
, .

Web-. . Samigg Skladchik.com

195

The Essential Web Design Handbook

196

: .
PSD- ProjectName-Blog-Post.psd.
, .
, // INTRO . ,
. PSD-. ,
.
.

,
. .
, , .


.
, ,
,
.
,

.

,

.
,

.
197

, .
100 . (Heading 2)
.
Small Paragraph Heading 4
.

The Essential Web Design Handbook

199

!
Web-.
.
, !
, .
, .
, , ,

. ,
.
,
. ,
Designers Area - .

Web-. . Samigg Skladchik.com

201

!
. .

, ,

.
, , -.
: Web-. .
.
,
, . , ,
. , ( !).
, , -
. - .
, .
-, . ,
, .
, , ,
, .
, . ,
. . ,
, , , , .

Web-. . Samigg Skladchik.com

203


99u.com , .
abduzeedo.com Design inspiration.
alistapart.com , -.
boxesandarrows.com , , ,
.
designmodo.com , .
informationisbeautiful.net , , , .
smashingmagazine.com -
.
speckyboy.com -, -,
.

A Practical Guide to Designing for the Web : Mark Boulton


A Project Guide to UX Design : Russ Unger and Carolyn Chandler
Disciplined Dreaming: A Proven System to Drive Breakthrough Creativity
: Josh Linkner
Dont Make Me Think, Revisited: A Common Sense Approach to Web Usability
: Steve Krug
Creative You: Using Your Personality Type to Thrive : Otto Kroeger
Manage Your Day-to-Day: Build Your Routine, Find Your Focus, and Sharpen
Your Creative Mind : Jocelyn K. Glei
Web-. . Samigg Skladchik.com

204

Maximize Your Potential: Grow Your Expertise, Take Bold Risks & Build an
Incredible Career : Jocelyn K. Glei
The Accidental Creative: How to Be Brilliant at a Moments Notice : Todd
Henry
The War of Art: Break Through the Blocks and Win Your Inner Creative Battles
: Steven Pressfield
Universal Principles of Design : William Lidwell, Kritina Holden, Jill
Butler

Creating Style Guides : Susan Robertson

How We Read : Jason Santa Maria


The Importance of Designing for Readability : Carrie Cousins
When Typography Speaks Louder Than Words : C. Knight, J. Glaser
Setting Type on the Web to a Baseline Grid : Wilson Miner

Typography Matters : Erin Kissane


The Elements of Typographic Style Applied to the Web : Richard Rutter
How Typography Affects Conversions : Ankit Oberoi
Web Design is 95% Typography

Designing with Type : James Craig Irene Korol Scala


On Web Typography : Jason Santa Maria
Web-. . Samigg Skladchik.com

205

The Anatomy of Type : Stephen Coles


The Elements of Typographic Style : Robert Bringhurst
Thinking with Type : Ellen Lupton
Type on Screen: A Critical Guide for Designers, Writers, Developers, and
Students : Ellen Lupton

An Introduction to Color Theory for Web Designers : Thomas


Cannon
How Colors Help Make Websites Successful
How Color Theory Affects Landing Page Conversion : Josh Pigford
How to Use the Psychology of Color to Increase Website Conversions :
Jeremy Smith
Usability Tip: Dont Rely on Color to Convey Your Message : Tammy Guy
Which Color Converts The Best? : Ott Niggulis

Color Design Workbook: A Real World Guide to Using Color in Graphic Design
: Adams Morioka
Color Inspirations: More than 3,000 Innovative Palettes from the Colourlovers.
Com Community : Darius A. Monsef IV
Design Elements, Color Fundamentals: A Graphic Style Manual for
Understanding How Color Affects Design : Aaris Sherin

Web-. . Samigg Skladchik.com

206

The Secret Language of Color: Science, Nature, History, Culture, Beauty of


Red, Orange, Yellow, Green, Blue, & Violet : Joann Eckstut and Arielle
Eckstut

Content-out Layout : Nathan Ford


Ditching the Grid: Alternative Layout Strategies and Tips : Joshua
Johnson
Grid-Based Layouts 101 : James George
Original And Innovative Web Layouts : Shavaughn Haack Understanding
the F-Layout in Web Design : Brandon Jones
Understanding the Z-Layout in Web Design : Brandon Jones
Whitespace : Mark Boulton
Whitespace in Web Design: What It Is and Why You Should Use It : Gisele
Muller

Layout Essentials: 100 Design Principles for Using Grids : Beth Tondreau
Making and Breaking the Grid: A Graphic Design Layout Workshop :
Timothy Samara
Grid Systems in Graphic Design : Josef Muller-Brockmann

Web-. . Samigg Skladchik.com

207


agiledesigners.com
.
creativemarket.com , , .
fontastic.me .
freevectormaps.com .
graphicburger.com .
.
gratisography.com .
iconmonstr.com Free icons.
littlevisuals.co .
pixeden.com -.
premiumpixels.com PSD-.
unsplash.com .

Web-. . Samigg Skladchik.com

208


-,
, Magda, ,
,

. .

, ESL
, Laurie Jezuit
.
, ,
1000 ,
. Laurie
. Laurie LinkedIn.

,
- Bartek Kregiel.


Starbucks. Bartek
, .
Bartek -.

Web-

Web-.
,
, , WordPress
...

www.RafalTomal.com

The Essential Web Design Handbook

210