Webとデザインとアート Webクリエイターズスクール2023年よりアート動画も追加します。Webデザインを学びながらビジネス力も身につける個別伴走型スクール＆コミュニティ。Webクリエイターズスクールが運営するWebデザイナー向け動画講座です。
使わないと損！作業の効率を上げるIllustratorの機能まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの白浜です。5月病にならないためにも、仕事をサクサク終わらせて明るい時間に帰りたいですね！！ そんなわけで、今回は覚えておくと作業効率が劇的に上がるIllustratorの機能を、わたしが新しく知った順にご紹介したいと思います。 後半は今まで書いた記事の紹介になってしまうのですが…本当に使っていないと損なので何度でも言うよ！！ ここ半年ぐらいで知った便利な機能 まずはここ半年ぐらいで知ったIllustratorの便利な機能を2つご紹介します。 ライブコーナー Illustrator CC（17.1）のアップデートでしれっと追加されていたこの機能、すごいです！！ヤバイです。 ダイレクト選択ツールでオブジェクトを選択するとコーナーに白い○が出てくる方、あなたのバージョンはライブコーナー機能が使えます！ 全部のコーナーが選択された状態で1個○をドラッグしてみると… 全部の角
HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳
» Introducing Tablecloth テーブルクロスを導入する。 この記事がWEB関連のなかで話題になっていました。 はて・・テーブルクロス・・・。 何のことやらさっぱりだったんですが、使ってみるとなかなか素敵な動きをしてくれましたので記事に。 あなたのhtmlに2行のコードを加えたら・・・ By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love あなたのhtmlにたった2行のコードを加えるだけで、あなたのサイトのテーブルは、あなたのサイトの訪問者に愛される。 なんとも素敵な響きだなと思った人はデモを見てみましょう。 » デモはこちら テーブルによって大量のデータを出力するときには便利な機能ですね。
[CSS]シンプルなHTMLに付箋紙のデザインを適用するスタイルシート
Sticky Notes with CSS3 デモ：左、デモ：右 [ad#ad-2] 付箋紙はどんな背景にも適用できます。 デモ 画像無しで付箋紙 Sticky Notes with CSS3 by accidental hacker 付箋紙の実装 上記の当サイトに設置したデモのコードを紹介します。 リスト要素で実装します。p要素は付箋紙には必要ありません。 <ul id="notes"> <li> <p>画像無しで付箋紙</p> </li> <li> <p>Sticky Notes with CSS3<br />by <a href="http://www.accidentalhacker.com/sticky-notes-with-css3/">accidental hacker</a></p> </li> </ul> [ad#ad-2] CSS3のグラデーション、ボックスシャドウ、回
Photoshopブラシを効率よく整理する5つの方法 (1/3)
Webデザインに便利なPhotoshopブラシ。ネット上に大量に公開されているブラシライブラリを使えば、カッコいい背景やロゴも手軽に作れる（関連記事1、関連記事2）。だが簡単に使えるだけに、新しいブラシをついつい追加しすぎてしまい、管理不能になってしまった――という方も少なくないだろう。 この記事では、大量のブラシを効率よく整理する方法を紹介する。ブラシの整理に困ったときにぜひ試してみよう（以降の操作は「Photoshop CS2」をもとにしています）。 1：やみ雲に追加してしまったブラシの“捨て方” 整理の基本は、身の回りの荷物と同じ。「これは使わない」と思ったものを思い切ってさっさと捨ててしまうことだ。 以前の記事で紹介したとおり関連記事、ネット上でダウンロードしたブラシファイル（ABRファイル）は、Photoshopのブラシパレット→[ブラシファイルの読み込み]で選ぶだけで追加できる
Photoshopで文字をよりシャープにクリアに見せるこつ -1px未満のこだわり
dribbbleに投稿されたデザインで、コメントのやり取りがちょっと興味深いものなので紹介します。 簡単に意訳すると、 ビジター「デザインきれいだな、文字周りの処理に秘訣とかあるの？」 オーナー「文字をクリアにみせるために、Photoshopでこういう風にやってるよ。」 という感じです。
[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック
デモページ [ad#ad-2] 実装 全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> CSS 両端がフェードするラインはCSS3グラデーションで、linear-gradientを使います。 シンプルに書くと下記のようになります。 background–image: linear–gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); 両端が「0」で、真ん中が「1」です。 また、このグラデー
[CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック
CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。 3 Advanced CSS3 Techniques You Should Learn デモページ（※キャプチャはChrome） [ad#ad-2] 1. Advanced Selectors CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。 リスト要素で配置した下記のデモを見てください。 背景色を奇数番目はブルーに、更に5番目はレッドにしています。
１ピクのラインにこだわったデザインスタディ
ヘッダ内、ヘッダとコンテンツなど異なる色の背景の区切りに１ピクセルのラインを使用したデザインスタディをSpoonfed Designのエントリーから紹介します。
デザイナーの仕事を驚くほどラクにするPhotoshopアクション厳選18種【全て無料】 | Find Job ! Startup
画像加工や写真の修正、すべて手作業でやってませんか？ Photoshopのアクション機能で自動化すればアッという間に終わります。今回はデザイナーの仕事を驚くほどラクにするアクションを18種、厳選してまとめました。 目次 単純作業をラクにするアクション（×4種） モックアップ作成をラクにするアクション（×6種） 写真加工をラクにするアクション（×6種） 写真の枠をラクに付けるアクション（×2種） 単純作業をラクにするアクション １.Retina対応画像を生成する Retinize Itを使えば、iPhoneやiPadに対応したRetina画像を自動生成できます。リサイズ〜名前変更の手間を一気に短縮しましょう。 Retinize It ２.リフレクションする 水面に反射したような効果が得られるリフレクションエフェクトが簡単に作れるアクションです。たったのワンクリックでAppleプロダクトの
ウェブデザインの7つのトレンドとそのチュートリアル | コリス
Deziner Folioのエントリーから、ウェブサイトのデザインに使用されている、最近の7つのトレンドとそのチュートリアルを紹介します。 Design Trendz ※チュートリアルのいくつかは当方で追加しています。 Lights n Shadows ライトを当てているように、シャドウ効果を持たせます。
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方
ウェブデザインにおける、ライトとシャドウの効果的な5つの使い方をSmashing Magazineから紹介します。 5 Simple Tricks To Bring Light and Shadow Into Your Designs 以下、その意訳です。 ライトとシャドウというのは単にそこにあるだけではありません。ライトは対象物を射し、シャドウを生み出します。 形や大きさ、質感を伝え、目にする対象物の理解を深めます。 ウェブデザインでもこのライトとシャドウは非常に重要で、デザインをよりナチュラルにし、感動的で直感的なものにします。 ここに、ライトとシャドウの洗練された5つの使い方を紹介します。 A Quick Anatomy Of Light And Shadow ライトとシャドウの構造 下の図は、ライトが左からあたっています。ハイライトはそのライトが一番強くあたっている箇所です。そして
配置をマスターして「機能するレイアウト」を作る大切なポイント
ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、
ウェブデザインの幅をひろげる20のキーワード | コリス
20 Vital Techniques & Best Practices For Effective Web Design 下記、各エッセンスの簡単な説明とワンポイントとサイトの紹介です。noupeのサイトでは他にも多くのサイトが紹介されています。 1. ビビッド カラー 2. グラデーションとライトのエフェクト 3. 透過 4. グランジ 5. 手書き風のデザイン 6. 押さえた色味 7. 水彩画のエフェクト 8. ネイチャー系のエレメント 9. 写実的でリアルな背景 10. 特大のタイポグラフィ 11. デコラティブなタイポグラフィ 12. 大胆な背景 13. レトロやヴィンテージのエレメント 14. アイキャッチなヘッダ 15. コラージュしたエレメント 16. テクスチャを使った背景 17. タブ型のナビゲーション 18. ブラックとホワイト 19. 水平方向のスクロール 20.
[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス
Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その２つの不具合が無いものとなっています（IE7調べ）。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。
overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
Ngi-d.net
[CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス![[CSS]いろいろな問題を解決する1行のスタイルシート集 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
新着記事
