お久しぶりの和柄チュートリアル。今回は千鳥格子を作ります。英語で言うと「houndstooth」犬の牙と小鳥、例えが異なって面白いですよね。 完成予定図 使用ソフト:Illustrator CS5.1 Step1 6つの頂点の星を描く まずはじめに、上メニュー>表示>スマートガイド(Ctrl+U)でスマートガイドを有効にしておいて下さい。 スマートガイド→有効 SmartGuide→on 星を描く スターツールを選択後、ドラッグで星を描きます。 ドラッグしている最中に↑↓キーで頂点の数を変更することができるので、頂点の数を6つにしておいて下さい。 Shift+Alt(Option)を押しながらドラッグをすると、図のような星を描くことが出来ます。 スターツール(頂点6つ) +Shift(オリジナルの向きを保つ) +Alt/Option(対応する2辺を直線上に揃える) 星を横に広げる 続いて拡
今回はアピアランスで作る市松模様の線のチュートリアルです。 アピアランスで出来ているので、グラデーションが使えたり、バリエーション作りが簡単!ぜひ、お試しください! ※このチュートリアルは2015/1/28に行われた第162回バンフーセミナーにてご紹介した内容に加筆(主に冗談部分・補足・注意)を加えたものです。 Step0 ・以下のパネルを表示させておいてください。 アピアランスパネル ・チュートリアルで使用しているIllustratorはCC2014、ツールの名称などはCC2014にあわせています。 ・カラーモードはRGB、基本単位はpxを使用しています。 Step1 線プロファイルをつくる 市松模様をつくる準備として、線の位置を調整するための線プロファイルを作っていきます。 ※このステップは以前ご紹介した 『【Illustrator】オープンパスで線の位置を変更する(内側・外側)方法』
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
普段はあまり使うことはないですが、たまに画像を水彩画風に加工が必要になることがあります。 その度に加工方法を検索し調整をするのが面倒になってきたので備忘録としてまとめることにしました。 すべての画像でうまくいくわけではないですし、個々の画像にあわせて調整が必要ですが、とりあえずそれっぽくなればいいなという人がいれば試してみてください。 まずは水彩画のベースを作る 今回はこんな風景画像を使用します。 作業を始める前に、描画色・背景色は黒・白にしておいてください。 まず背景画像を複製します。 【フィルタ】→【フィルターギャラリー】を選択。 アーティスティックの水彩画を選択し、ブラシの細かさ:7・シャドウの濃さ:0・テクスチャ:1でOK。 更に、同じレイヤーをぼかします。 【フィルタ】→【ぼかし(詳細)】を選択し、半径:10・しきい値:25・画質:高・モード:標準にします。 画像全体を明るくする
2014年3月6日 Photoshop, Webデザイン 水彩画っていいですよね。なんだかほんわかした雰囲気が大好きです。ということで今回はPhotoshop CS5を使って画像を水彩画風に加工する方法と、便利なPhotoshopブラシ、水彩画風デザインのWebサイトを紹介します。デザインの参考にしてみてください! ↑私が10年以上利用している会計ソフト! 写真を水彩画風に加工する方法 また動画撮ってみました。ただでさえ時間かかってないのに、4倍速にしたら30秒くらいになっちゃいました。簡単なのでぜひ試してみてくださいね! 1. ぼかし 画像を開いて、そのレイヤーを複製します(コマンド+J)。 複製したレイヤーを「blur」にレイヤー名を変更します。 フィルター > ぼかし > ぼかし(詳細)で、「半径」を10、「しきい値」を25〜30に設定します。 2. エッジの光彩 元の画像レイヤーを
fukasawaです。こんにちは。 クナイプのグーテナハトが安眠に良いと聞いたので試してみたのですが、風呂場中にタイカレーのようなスパイシーな香りが広がりました。安眠…? Animate.cssは要素にclassをつけるだけで、簡単にいろいろな種類のCSS3アニメーションを実装してくれる便利なスタイルシートです。多くのブログで既に紹介されているものではあるのですが、バシャログではまだ誰も書いていないようなのでここぞとばかりに書いてみます。 公式サイト(デモ&ダウンロード) http://daneden.github.io/animate.css/ GitHub(使い方など) https://github.com/daneden/animate.css ※CSS3アニメーションに対応しているブラウザで動作します。 簡単な使い方 animate.min.cssを読み込みます。 <head> <
エンジニアの王です。 そもそも「素材」というのは「何かを作るための原材料」ですから、デザイナー・グラフィッカーなどにとっての「写真素材」とは、新しい何かを作るためのもととなる写真であって、ほぼそのままアイキャッチとして使ったり、記事内で使ったりするものではありません! 同じ「写真素材」とは言っても、使い方によっては向き不向きっていうのがありますからね。今回は特にデザイナー向けの無料で使える写真素材サイトをご紹介します! 私は「デザイナーに優しい写真素材」とは以下のような特徴を持っていると考えています。(もちろんすべてのケースに当てはまるわけではないが) 被写体が明確 背景が単純 同じオブジェクトを複数のアングルから撮っている テクスチャ系 切抜き済み そのため、今回は以上の特徴を多く持っている写真素材サイトだけに焦点をあてて紹介したいと思います! おすすめ順で列挙していきますので、上位にき
ネットショップ運営[楽天・ECサイト]に関する情報 便利ツール Webサービス CSS Javascript jQueryなど紹介していきます シネマグラフってご存知ですか? (写真の一部だけが動くシネマグラフというタイプのアニメーションGif画像) ちょっと前から流行っているようで面白そうだなと気にはなっていたのですが調べる機会があったので紹介したいと思います。うまく活用すればサイトの印象をガラッと変えることができます。 シネマグラフって知ってますか?写真の一部だけが動くシネマグラフというタイプのアニメーションGif画像が少し前から流行っているようです。一部だけ動くことで逆に静けさや時間の流れを意識させる効果があります。作成するのは難しそうなイメージがありますが、調べてみると思ったより簡単に作成することができるようです。最近ではシネマグラフ作成アプリなども多数公開されています。この記事で
動画を準備する シネマグラフの完成度は動画のできにかかっています。主な条件は以下の3つです。 ネマグラフがうまくできる条件 1. カメラが固定されていること シャッターを押すちょっとしたブレでもつなげると気になったりするので、三脚&リモートシャッターなんかがあるといいと思います。 2. ループの繋ぎ目が気になりにくい動きであること 髪の毛のふわふわとか水がチョロチョロ流れる動きなど、動きが単純で短い時間でも成立するものが向いています。しかしこういった動きはすでによく使われていて、マンネリなのも事実ですね……。アイデアをひねり出すのが一番大変な作業かもしれません。 3. 動いてる部分の背景に動きがないこと 後で詳しく説明しますが、動画の上に静止画を置いて、動かしたい部分に穴を空けるというのがおおまかな手法なので、動かしたい部分以外にちょっとでも変化があると違和感が生まれます。 以上の点を踏ま
FE-VO(フェーボ)は会社様、お客様の強みや魅力となっている部分を引き出し、形にするブランディング特化型のサイトにこだわり、17年間ホームページを制作しています。個人でもブランディングを作れるようテンプレートの開発もし、販売しています。
※解説バージョンは、基本的にCS5です。これ以外のバージョンでも、このメニューがあれば操作はできますが、結果が異なったり、うまくいかない場合があるかもしれません。 Illustratorは印刷系に強いソフトウエアだと思われがちですが(実際そっちの機能のほうが充実してるんですが)、設定をきちんと調整することで、Webなどのピクセルベースの作業も正確におこなえます。 2013.07.10
商用可のラベルとタグの無料素材 一覧 紙のテクスチャ素材をつかったラベルやアイコン素材をダウンロードできます。
yane-ni-kabochano.com This domain is expired. The domain owner has to renew it from the admin setting if you continue using it. 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain o
This slider has a 100% width layout and it is responsive. It operates with CSS transitions and the image is wrapped with an anchor. The anchor can be replaced by a division if no linking is needed. With a max-width set to 100%, the image will size down for smaller screens. The HTML <div id="cbp-fwslider" class="cbp-fwslider"> <ul> <li><a href="#"><img src="images/1.jpg" alt="img01"/></a></li> <li>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く